/* R121/R122 "İlan hikâyeleri": the story row (Instagram-like rings) of the home page and, compact, of the listing pages,
   and the full-screen story viewer. Loaded only where a row is shown. Every class is in the "lstory" namespace (R122: the
   customer photos viewer keeps its older names; sharing those names left the viewer black on phones). Logical properties
   throughout, so ar/fa pages mirror. */

/* ---- The row */
.lstory-strip{--lstory-size:72px;--lstory-gap:#fff;--lstory-ring:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%);margin-block:28px 8px;margin-inline:0;max-inline-size:100%;min-inline-size:0;overflow:hidden}
.lstory-row{list-style:none;margin:0;padding-block:6px 10px;padding-inline:16px;display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lstory-row::-webkit-scrollbar{display:none}
.lstory{flex:none;scroll-snap-align:start}
.lstory__link{display:flex;flex-direction:column;align-items:center;gap:6px;inline-size:calc(var(--lstory-size) + 10px);text-decoration:none;color:var(--ink,#1b2733);border-radius:12px;-webkit-tap-highlight-color:transparent}
.lstory__link:focus-visible{outline:2px solid var(--focus,#b08d57);outline-offset:4px}
.lstory__avatar{position:relative;display:block;inline-size:var(--lstory-size);block-size:var(--lstory-size)}
/* The ring: Instagram's gradient, a white gap, then the round photo. Viewed: a thin grey ring, same outer size. */
.lstory__ring,.lstory__ring img,.lstory-viewer,.lstory-viewer *{box-sizing:border-box}
.lstory__ring{display:block;inline-size:100%;block-size:100%;border-radius:50%;padding:2.5px;background:var(--lstory-ring);transition:transform .18s ease}
.lstory__ring img{display:block;inline-size:100%;block-size:100%;max-inline-size:none;aspect-ratio:1/1;border-radius:50%;object-fit:cover;object-position:center;image-rendering:auto;border:3px solid var(--lstory-gap);background:#efefef}
.lstory.is-viewed .lstory__ring{padding:1px;background:#c7c7c7}
.lstory.is-viewed .lstory__ring img{border-width:4.5px}
.lstory__link:hover .lstory__ring,.lstory__link:focus-visible .lstory__ring{transform:scale(1.04)}
.lstory__link:active .lstory__ring{transform:scale(.96)}
.lstory__badge{position:absolute;inset-block-end:-5px;inset-inline:0;margin-inline:auto;inline-size:fit-content;max-inline-size:100%;padding-block:1px;padding-inline:6px;border:2px solid var(--lstory-gap);border-radius:5px;background:linear-gradient(90deg,#d62976,#962fbf);color:#fff;font-size:9.5px;font-weight:800;line-height:1.35;letter-spacing:.06em;white-space:nowrap}
.lstory__label{display:block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.3;text-align:center}
.lstory.is-viewed .lstory__label{color:var(--muted,#5a6673)}
/* R122: the listing page's row under the breadcrumb — smaller circles, one-line labels, little height. */
.lstory-strip--compact{--lstory-size:60px;margin-block:6px 4px}
.lstory-strip--compact .lstory-row{gap:10px;padding-block:4px 6px}
.lstory-strip--compact .lstory__link{gap:4px}
.lstory-strip--compact .lstory__ring img{border-width:2.5px}
.lstory-strip--compact .lstory.is-viewed .lstory__ring img{border-width:4px}
.lstory-strip--compact .lstory__badge{font-size:8.5px;padding-inline:5px;inset-block-end:-4px}
.lstory-strip--compact .lstory__label{font-size:11px}
@media (min-width:760px){
  .lstory-strip{--lstory-size:84px;margin-block:40px 16px}
  .lstory-row{justify-content:center;gap:22px;padding-inline:var(--page,48px)}
  .lstory__label{font-size:12.5px}
  .lstory-strip--compact{--lstory-size:64px;margin-block:8px}
  .lstory-strip--compact .lstory-row{justify-content:flex-start;gap:16px}
}
/* R123: per-device counts (the site's mobile breakpoint): circles past a device's count, or the whole row when that
   device would show too few, are hidden there. */
.lstory--hidden{display:none}
@media (max-width:767px){.lstory-strip--no-mobile,.lstory--desktop-only{display:none}}
@media (min-width:768px){.lstory-strip--no-desktop,.lstory--mobile-only{display:none}}
@media (prefers-reduced-motion:reduce){.lstory__ring{transition:none}.lstory__link:hover .lstory__ring,.lstory__link:active .lstory__ring{transform:none}}

/* ---- The viewer (moved to <body> on the first opening; one per page) */
html.lstory-open,html.lstory-open body{overflow:hidden}
.lstory-viewer{position:fixed;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;margin:0;padding:0;border:0;background:#111;color:#fff;overflow:hidden;overscroll-behavior:contain;touch-action:none;font-family:var(--body-font,system-ui,sans-serif)}
@supports (height:100dvh){.lstory-viewer{block-size:100dvh}}
.lstory-viewer:not([open]){display:none}
.lstory-viewer[open]{display:flex}
.lstory-viewer::backdrop{background:#111}
.lstory-viewer__layout{position:relative;flex:1 1 auto;min-inline-size:0;min-block-size:0;display:flex;align-items:stretch;justify-content:center;gap:28px}
.lstory-viewer__card{position:relative;flex:1 1 auto;inline-size:100%;min-block-size:0;overflow:hidden;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* R123 (owner: "çok yakın kalıyor ve bozuluyor"): by default the whole photo, centred and never stretched — the width of a
   phone, at most its own size on larger screens — over a blurred, darkened copy that fills the rest, as Instagram shows
   landscape photos. ".lstory-viewer--fill" ("Ekranı doldur") fills the screen (or the desktop card) and crops. */
.lstory-viewer__backdrop{position:absolute;inset:0;display:block;inline-size:100%;block-size:100%;max-inline-size:none;object-fit:cover;filter:blur(28px) brightness(.55);transform:scale(1.2)}
.lstory-viewer__photo{position:absolute;inset:0;margin:auto;display:block;inline-size:100%;block-size:auto;max-inline-size:100%;max-block-size:100%;object-fit:contain;image-rendering:auto;-webkit-user-drag:none;pointer-events:none}
.lstory-viewer__photo:not([src]),.lstory-viewer__backdrop:not([src]){visibility:hidden}
.lstory-viewer--fill .lstory-viewer__backdrop{display:none}
.lstory-viewer--fill .lstory-viewer__photo{inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;object-fit:cover}
.lstory-viewer__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 100%)}
.lstory-viewer__spinner{position:absolute;inset:0;z-index:1;margin:auto;inline-size:38px;block-size:38px;border:3px solid rgba(255,255,255,.28);border-block-start-color:#fff;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .15s ease;animation:lstory-spin .8s linear infinite}
.lstory-viewer.is-loading .lstory-viewer__spinner{opacity:1;transition-delay:.35s}
@keyframes lstory-spin{to{transform:rotate(1turn)}}
.lstory-viewer__zone{position:absolute;inset-block:0;z-index:1;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.lstory-viewer__zone--prev{inset-inline-start:0;inline-size:33.333%}
.lstory-viewer__zone--next{inset-inline-end:0;inline-size:66.667%}
.lstory-viewer__zone:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.lstory-viewer__top{position:absolute;inset-block-start:0;inset-inline:0;z-index:2;padding-block:max(10px,env(safe-area-inset-top)) 0;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));pointer-events:none;transition:opacity .2s ease}
.lstory-viewer__bars{display:flex;gap:4px}
.lstory-viewer__bar{flex:1 1 0;display:block;block-size:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.lstory-viewer__fill{display:block;inline-size:100%;block-size:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
[dir=rtl] .lstory-viewer__fill{transform-origin:right center}
.lstory-viewer__bar.is-done>.lstory-viewer__fill{transform:scaleX(1)}
.lstory-viewer.is-static .lstory-viewer__bar.is-current>.lstory-viewer__fill{transform:scaleX(1)}
.lstory-viewer__head{display:flex;align-items:center;gap:10px;margin-block-start:10px}
.lstory-viewer__avatar{flex:none;inline-size:34px;block-size:34px;border-radius:50%;padding:2px;background:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%)}
.lstory-viewer__avatar>span{display:grid;place-items:center;inline-size:100%;block-size:100%;border-radius:50%;border:2px solid #fff;background:#0f2a44}
.lstory-viewer__avatar svg{display:block;inline-size:18px;block-size:18px;fill:none;stroke:#fff;stroke-width:7;stroke-linejoin:round;stroke-linecap:round}
.lstory-viewer__avatar .lstory-viewer__accent{stroke:#b08d57}
.lstory-viewer__who{min-inline-size:0;flex:1 1 auto;display:flex;align-items:baseline;gap:8px;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.lstory-viewer__who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}
.lstory-viewer__who time{flex:none;font-size:13px;color:rgba(255,255,255,.75)}
.lstory-viewer__icon{pointer-events:auto;flex:none;inline-size:44px;block-size:44px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.lstory-viewer__icon:hover{background:rgba(255,255,255,.12)}
.lstory-viewer__icon:focus-visible{outline:2px solid #fff;outline-offset:0}
.lstory-viewer__icon svg{display:block;inline-size:24px;block-size:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.lstory-viewer__icon .lstory-viewer__play-icon{display:none;fill:currentColor;stroke:none}
.lstory-viewer__icon[aria-pressed=true] .lstory-viewer__pause-icon{display:none}
.lstory-viewer__icon[aria-pressed=true] .lstory-viewer__play-icon{display:block}
.lstory-viewer.is-static [data-lstory-pause]{display:none}
.lstory-viewer__info{position:absolute;inset-block-end:0;inset-inline:0;z-index:2;padding-block:24px max(22px,calc(env(safe-area-inset-bottom) + 12px));padding-inline:18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:opacity .2s ease}
.lstory-viewer__info p{margin:0;max-inline-size:100%;overflow-wrap:break-word;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.lstory-viewer__location{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.lstory-viewer__title{font-size:19px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lstory-viewer__facts{font-size:14px;color:rgba(255,255,255,.9)}
.lstory-viewer__price{font-size:17px;font-weight:800}
.lstory-viewer__info [hidden]{display:none}
.lstory-viewer__cta{margin-block-start:12px;align-self:center;display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-block:10px;padding-inline:24px;border-radius:999px;background:#fff;color:#111;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.28);touch-action:manipulation}
.lstory-viewer__cta:hover{background:#f1f1f1}
.lstory-viewer__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lstory-viewer.is-holding .lstory-viewer__top,.lstory-viewer.is-holding .lstory-viewer__info{opacity:0}
.lstory-viewer__nav{display:none}
/* Desktop: a 9:16 card of at most 420×746 in the middle, the photo whole on its own blurred copy (never larger than the
   photo itself), round arrows beside. */
@media (min-width:760px) and (min-height:560px){
  .lstory-viewer__layout{align-items:center}
  .lstory-viewer__card{flex:none;inline-size:min(420px,calc((100vh - 48px) * 9 / 16));block-size:auto;aspect-ratio:9/16;max-block-size:746px;border-radius:10px}
  @supports (height:100dvh){.lstory-viewer__card{inline-size:min(420px,calc((100dvh - 48px) * 9 / 16))}}
  .lstory-viewer__photo{inline-size:auto;block-size:auto}
  .lstory-viewer__nav{flex:none;inline-size:36px;block-size:36px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:#111;cursor:pointer}
  .lstory-viewer__nav:hover{background:#fff}
  .lstory-viewer__nav:disabled{visibility:hidden}
  .lstory-viewer__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .lstory-viewer__nav svg{display:block;inline-size:20px;block-size:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  [dir=rtl] .lstory-viewer__nav svg{transform:scaleX(-1)}
}
@media (prefers-reduced-motion:reduce){
  .lstory-viewer__bar.is-current>.lstory-viewer__fill{transform:scaleX(1)}
  .lstory-viewer__top,.lstory-viewer__info{transition:none}
  .lstory-viewer__spinner{animation-duration:2.4s}
}