/* Protect the reference rings from global WISECP image and span rules. */
section.cv2-hk-stories button[data-story]>span:first-child{flex-shrink:0;aspect-ratio:1;overflow:visible}
section.cv2-hk-stories button[data-story]>span:first-child>span:first-child{position:absolute;inset:5px;width:auto;height:auto;overflow:hidden;border-radius:50%}
section.cv2-hk-stories button[data-story]>span:first-child>span:first-child>img{position:absolute;inset:0;width:100%;height:100%;min-height:100%;max-height:none;object-fit:cover;display:block}
section.cv2-hk-stories button[data-story]>span:last-child{display:block;position:static;height:auto;min-height:16px;overflow:visible;color:var(--pop-fg);line-height:16px;font-size:12px}

/* Site renklerinde ince, dönen gradyan halka */
/* PERF: eski surum @property --hk-angle animasyonu her karede stil yeniden hesaplatiyordu (ana is parcacigi).
   Simdi gradyan bir ::before katmaninda sabit, katman transform:rotate ile GPU'da doner — gorunum ayni. */
section.cv2-hk-stories button[data-story]>span.hk-ring{
  border-color:transparent;
  background:transparent;
  padding:2px;
  
  isolation:isolate}
section.cv2-hk-stories button[data-story]>span.hk-ring::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,var(--color-gradient-from,var(--story-accent)),var(--color-gradient-to,var(--story-accent)),var(--color-gradient-from,var(--story-accent)));
  animation:hk-ring-rot 3.2s linear infinite;will-change:transform}
section.cv2-hk-stories button[data-story]>span.hk-ring>span{z-index:1}
@keyframes hk-ring-rot{to{transform:rotate(360deg)}}
section.cv2-hk-stories button[data-story]>span.hk-ring>span:first-child{
  inset:2px}
/* Okunan hikaye: çerçeve rengini korur ama sönük, dönmez — tekrar dikkat çekmeye devam eder. */
section.cv2-hk-stories button[data-story]>span.hk-ring.hk-ring--seen{
  background:conic-gradient(from 210deg,color-mix(in oklab,var(--color-gradient-from,var(--story-accent)) 42%,var(--pop-line)),color-mix(in oklab,var(--color-gradient-to,var(--story-accent)) 30%,var(--pop-line)),color-mix(in oklab,var(--color-gradient-from,var(--story-accent)) 42%,var(--pop-line)))}
section.cv2-hk-stories button[data-story]>span.hk-ring.hk-ring--seen::before{display:none}
section.cv2-hk-stories button[data-story]>span.hk-ring.hk-ring--seen>span:first-child>img{filter:saturate(.75);opacity:.85}

/* Göz / tik rozeti: tam çerçeve çizgisinin üstünde — yarısı içte, yarısı dışta (45° noktası). */
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]:nth-child(2){
  top:auto;left:auto;bottom:auto;right:auto;
  width:24px;height:24px;
  inset:calc(85.355% - 12px) auto auto calc(85.355% - 12px);
  z-index:2}
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]:nth-child(3){
  inset:calc(14.645% - 10px) auto auto calc(14.645% - 10px);z-index:2}
/* Okundu tik işareti: dolu daire, kalın beyaz tik, yumuşak gölge ve kısa açılış efekti. */
section.cv2-hk-stories button[data-story]>span.hk-ring--seen>span[aria-hidden="true"]:nth-child(2){
  background:var(--color-gradient,var(--story-accent));
  color:var(--cv2-on-brand);
  
  animation:hk-check-pop .35s cubic-bezier(.34,1.56,.64,1) both}
section.cv2-hk-stories button[data-story]>span.hk-ring--seen>span[aria-hidden="true"]:nth-child(2) svg{width:13px;height:13px;stroke-width:3.2}
@keyframes hk-check-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){section.cv2-hk-stories button[data-story]>span.hk-ring::before,section.cv2-hk-stories button[data-story]>span.hk-ring--seen>span[aria-hidden="true"]:nth-child(2){animation:none}}
section.cv2-hk-stories button[data-story]:hover>span.hk-ring:not(.hk-ring--seen){
  filter:saturate(1.15)}

/* Yatay hikaye rafi — sade, kutusuz; belirgin gradyan halka, beyaz ara boşluk, üstten hizali etiketler. */
section.cv2-hk-stories>div:first-child{
  display:flex;align-items:flex-start;gap:22px;overflow-x:auto;overflow-y:hidden;
  padding:10px 16px 6px;scroll-padding-inline:16px;box-sizing:border-box;max-width:100%;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;justify-content:safe center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
section.cv2-hk-stories.hk-align-left>div:first-child{justify-content:safe flex-start}
section.cv2-hk-stories.hk-align-right>div:first-child{justify-content:safe flex-end}
section.cv2-hk-stories>div:first-child::-webkit-scrollbar{display:none}
section.cv2-hk-stories>div:first-child>button[data-story]{
  flex-shrink:0;scroll-snap-align:start;min-width:0;width:86px;gap:8px;padding:0;outline:none;
  justify-content:flex-start;-webkit-tap-highlight-color:transparent}
section.cv2-hk-stories button[data-story]>span.hk-ring{
  width:80px;height:80px;padding:0;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
/* Halka 3px gradyan, icinde 3px zemin rengi bosluk */
section.cv2-hk-stories button[data-story]>span.hk-ring>span:first-child{
  inset:3px;background:var(--pop-card,var(--background,#fff))}
section.cv2-hk-stories button[data-story]>span.hk-ring>span:first-child>img{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);min-height:0;border-radius:50%}
section.cv2-hk-stories button[data-story]:hover>span.hk-ring{transform:translateY(-2px) scale(1.03)}
section.cv2-hk-stories button[data-story]:focus-visible>span.hk-ring{outline:2px solid var(--story-accent);outline-offset:3px}
/* Rozetler: kucuk, zemin rengi cerceveli */
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]:nth-child(2){
  width:22px;height:22px;inset:calc(85.355% - 11px) auto auto calc(85.355% - 11px);
  }
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]:nth-child(3){display:none}
section.cv2-hk-stories button[data-story]>span:last-child{
  max-width:86px;font-size:12px;line-height:15px;font-weight:600;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
section.cv2-hk-stories button[data-story].hk-story--seen>span:last-child{
  color:color-mix(in oklab,var(--pop-fg,currentColor) 60%,transparent);font-weight:500}
@media (max-width:640px){
  section.cv2-hk-stories>div:first-child{
    gap:14px;padding:8px 14px 4px;scroll-padding-inline:14px;justify-content:flex-start;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  section.cv2-hk-stories>div:first-child>button[data-story]{width:70px;gap:6px}
  section.cv2-hk-stories button[data-story]>span.hk-ring{width:66px;height:66px}
  section.cv2-hk-stories button[data-story]>span:last-child{max-width:70px;font-size:11px;line-height:14px}
  section.cv2-hk-stories button[data-story]:hover>span.hk-ring{transform:none}
  section.cv2-hk-stories button[data-story]:active>span.hk-ring{transform:scale(.94)}
}
@media (prefers-reduced-motion:reduce){section.cv2-hk-stories button[data-story]>span.hk-ring{transition:none}}

/* Keep the original rings and story layout; inherit the site's configured brand. */
section.cv2-hk-stories,dialog.hk-scope.story-dialog{
  --story-accent:var(--color-primary);
  --story-panel-accent:var(--color-primary);
  --story-accent-gradient:linear-gradient(145deg,color-mix(in oklab,var(--color-primary) 12%,transparent),transparent 75%)}
section.cv2-hk-stories{margin-block:0;padding-block:0;min-width:0;max-width:100%}
section.cv2-hk-stories button[data-story]>span:last-child{overflow-wrap:anywhere}
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]{background:var(--color-gradient,var(--story-accent));color:#fff}

/* Goz/tik rozeti: beyaz simge, parlak gradyan, yumusak golge */
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]:nth-child(2){
  background:var(--color-gradient,var(--story-accent));
  color:#fff;
  }
section.cv2-hk-stories button[data-story]>span.hk-ring>span[aria-hidden="true"]:nth-child(2) svg{color:#fff;stroke:#fff;width:13px;height:13px;stroke-width:2.2}
section.cv2-hk-stories button[data-story]>span.hk-ring--seen>span[aria-hidden="true"]:nth-child(2) svg{stroke-width:3}