/* =========================================================
   PERDE PART — home (anasayfa)
   Namespaces: .hero* · .home-* · .resume* · .chart* · .bento* ·
   .cta-random* · .genre-tiles* · .to-top-fab (+ .poster-grid.is-home-7 modifier)
   1. Hero — full-bleed slider (numbered dots, autoplay)
   2. Intro fallback (no sliders)
   3. Kaldığın Yerden — resume tiles
   4. Trend — numbered chart
   5. Öne Çıkanlar — bento grid
   6. Filmler / Diziler — 7 × 3 poster grids
   6b. Card meta — genre only when it fits whole
   7. Ne izlesem? — gradient-framed ticket + compact preference chips
   8. Türler — genre tiles
   8b. Yukarı çık — fixed back-to-top button
   9. Reduced motion
   Colours: Lumen tokens only (alpha via the *-rgb tokens).
   ========================================================= */

/* ---------- 1. Hero — full-bleed slider ----------
   The backdrop is the background layer across the whole content frame (right of the rail) and starts
   under the translucent sticky top bar; scrims melt it into --s0 from the left and the bottom.
   app.js contract: [data-hero] root, .hero-slide(.is-active), .hero-dots button (.is-active/.is-running,
   --hero-interval set on the root, .is-paused while held), [data-hero-prev]/[data-hero-next].
   Slides stack in one grid cell and crossfade. Heights use svh (vh fallback first) so mobile browser bars never resize it.
   home.js sets --hero-lift while the guest cookie bar is up: copy + controls translate clear of it (transform → no layout shift). */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);min-height:clamp(560px,84vh,820px);min-height:clamp(560px,84svh,820px);margin-top:calc(-1*var(--header-h));background:var(--s1);overflow:hidden}
main > .container:has(> .ad-slot) ~ .hero{margin-top:0}
/* the outgoing slide stays on top while it fades out (hidden slides are not hit-testable): a tap mid-crossfade lands on
   the CTA the reader was looking at, not on the next slide's still almost transparent one */
.hero-slide{grid-area:1/1;position:relative;z-index:1;display:grid;min-width:0;opacity:0;visibility:hidden;transition:opacity var(--dur-hero) var(--ease-soft),visibility 0s linear var(--dur-hero)}
.hero-slide.is-active{z-index:0;opacity:1;visibility:visible;transition:opacity var(--dur-hero) var(--ease-soft),visibility 0s}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--s1)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 35%;transform:scale(1.05);transition:transform var(--dur-settle) var(--ease-out)}
.hero-slide.is-active .hero-media img{transform:scale(1)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--s0) 0%,rgba(var(--scrim-rgb),.6) 12%,rgba(var(--scrim-rgb),.1) 40%,rgba(var(--scrim-rgb),0) 60%),radial-gradient(700px 420px at 14% 80%,rgba(var(--violet-rgb),.26),transparent 70%),linear-gradient(90deg,rgba(var(--scrim-rgb),.92) 0%,rgba(var(--scrim-rgb),.55) 42%,rgba(var(--scrim-rgb),0) 72%),linear-gradient(180deg,rgba(var(--scrim-rgb),.6) 0,rgba(var(--scrim-rgb),0) 160px)}

.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,680px) 1fr;align-items:end;padding-top:calc(var(--header-h) + 48px);padding-bottom:clamp(64px,9vh,104px);padding-bottom:clamp(64px,9svh,104px)}
.hero-content,.hero-controls{translate:0 calc(-1*var(--hero-lift,0px))}
.hero.is-lift-anim .hero-content,.hero.is-lift-anim .hero-controls{transition:translate var(--dur-base) var(--ease-out)}
.hero-inner{position:relative;min-width:0;padding-left:clamp(18px,2vw,26px)}
.hero-inner::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:4px;background:var(--grad-line-v);box-shadow:0 0 18px rgba(var(--violet-rgb),.6)}
.hero-brand{display:flex;align-items:center;gap:10px;min-width:0;font:600 11px/1.3 var(--font-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--t2)}
.hero-brand .brand-mark{width:18px;height:18px;filter:none}
.hero-brand__name{flex:none;font-weight:700;background:var(--grad-shine);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-brand i{width:22px;height:1px;flex:none;background:var(--line-3)}
.hero-brand__kicker{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-title{margin-top:18px;font:800 var(--fs-hero)/.98 var(--font-display);font-variation-settings:"opsz" 96,"wdth" var(--display-wdth);letter-spacing:-0.03em;color:var(--t1);text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-text{margin-top:18px;max-width:52ch;font:400 17px/1.55 var(--font-body);color:var(--t2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* every item carries its leading rule; the row is pulled 34px left and clipped there, so a wrapped line never starts with "|" */
.hero-meta{margin-top:18px;margin-left:-34px;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;font:600 13.5px/1.2 var(--font-body);color:var(--t2);clip-path:inset(-6px -6px -6px 34px)}
.hero-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.hero-meta span::before{content:"";width:1px;height:12px;flex:none;background:var(--line-3);margin:0 14px}
.hero-meta svg{width:14px;height:14px}
.hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* Controls: numbered dots with a filling progress line + round arrows, bottom-right of the content column.
   Many slides: the dot strip scrolls sideways instead of shrinking the 44px targets (home.js keeps the active dot in view);
   on the side-by-side layout it stops ~540px short of the left edge so it never runs under the CTAs.
   The 6px padding (cancelled by the negative margin) keeps focus rings inside the scroll box. */
.hero-controls{position:absolute;left:0;right:0;bottom:clamp(64px,9vh,104px);bottom:clamp(64px,9svh,104px);z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:24px;pointer-events:none}
.hero-controls > *{pointer-events:auto}
.hero-dots{position:relative;display:flex;gap:10px;min-width:0;max-width:calc(100% - 540px);margin:-6px;padding:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.hero-dots::-webkit-scrollbar{display:none}
.hero-dots.can-prev,.hero-dots.can-next{-webkit-mask-image:linear-gradient(90deg,transparent,black var(--fade-l,0px),black calc(100% - var(--fade-r,0px)),transparent);mask-image:linear-gradient(90deg,transparent,black var(--fade-l,0px),black calc(100% - var(--fade-r,0px)),transparent)}
.hero-dots.can-prev{--fade-l:32px}
.hero-dots.can-next{--fade-r:32px}
.hero-dots button{position:relative;flex:none;min-width:46px;height:44px;padding:0 2px;border:0;background:none;color:var(--t3);font:700 12px/1 var(--font-display);letter-spacing:.06em;text-align:left;transition:color var(--dur-fast)}
.hero-dots button span{display:block;padding-bottom:14px}
.hero-dots button::after,.hero-dots button i{content:"";position:absolute;left:2px;right:2px;bottom:10px;height:2px;border-radius:2px}
.hero-dots button::after{background:var(--line-2)}
.hero-dots button i{z-index:1;background:var(--grad-line);transform:scaleX(0);transform-origin:left center}
.hero-dots button.is-active{color:var(--t1)}
.hero-dots button.is-active i{transform:scaleX(1)}
.hero-dots button.is-running i{animation:hero-progress var(--hero-interval,7000ms) linear forwards}
@keyframes hero-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-arrows{display:flex;gap:8px;flex:none}
.hero-arrows button{width:44px;height:44px;padding:0;border-radius:var(--r-round);border:1px solid var(--line-3);background:rgba(var(--scrim-rgb),.5);color:var(--t1);display:grid;place-items:center;transition:border-color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast) var(--ease-out)}
.hero-arrows button:active{transform:scale(.96)}
.hero-arrows svg{width:20px;height:20px}
/* autoplay stop/start (home.js, WCAG 2.2.2): same round button, ❚❚ while playing, ▶ once stopped (.is-stopped) */
.hero-toggle svg{width:16px;height:16px}
.hero-toggle .hero-toggle__play{margin-left:2px}
.hero-toggle.is-stopped .hero-toggle__pause,.hero-toggle:not(.is-stopped) .hero-toggle__play{display:none}
/* hover only for real pointers: a tap would otherwise leave the tint stuck on touch screens */
@media (hover:hover) and (pointer:fine){
  .hero-dots button:hover{color:var(--t2)}
  .hero-arrows button:hover{border-color:var(--accent-line);background:var(--accent-soft)}
}
/* guest cookie bar on a short screen (home.js liftHero, only while the bar is up): when lifting the copy clear of the
   bar would push it under the top bar, shed the brand line and shorten the copy (.is-squeezed), then drop the copy
   (.is-squeezed-more) and the meta line (.is-squeezed-max) so the title, CTAs and controls stay reachable */
.hero.is-squeezed .hero-brand{display:none}
.hero.is-squeezed .hero-title{margin-top:0}
.hero.is-squeezed .hero-text{-webkit-line-clamp:1}
.hero.is-squeezed-more .hero-text,.hero.is-squeezed-max .hero-meta{display:none}

/* laptop (icon rail, 1024–1279; ≤1023 overrides it below): the 52ch overview reaches ~70% across the narrower hero,
   past the point where the desktop side scrim has faded out → keep it darker further right */
@media (max-width: 1279px){
  .hero-media::after{background:linear-gradient(0deg,var(--s0) 0%,rgba(var(--scrim-rgb),.6) 12%,rgba(var(--scrim-rgb),.1) 40%,rgba(var(--scrim-rgb),0) 60%),radial-gradient(700px 420px at 14% 80%,rgba(var(--violet-rgb),.26),transparent 70%),linear-gradient(90deg,rgba(var(--scrim-rgb),.92) 0%,rgba(var(--scrim-rgb),.78) 40%,rgba(var(--scrim-rgb),.5) 62%,rgba(var(--scrim-rgb),0) 84%),linear-gradient(180deg,rgba(var(--scrim-rgb),.6) 0,rgba(var(--scrim-rgb),0) 160px)}
}
/* tablet + phone (tab-bar shell): copy stacked over the controls row; the hero fills the first screen above the
   tab bar minus a ~48px peek of the next section, capped at 640px.
   The copy runs across the middle of the picture here, so besides the height-based scrim it carries its own: a full-bleed
   layer anchored to the copy block (.hero-inner::after) that fades in over 72px above the brand line and stays dark to
   the bottom — the kicker/overview keep ≥4.5:1 on a bright real backdrop whatever the copy's height. */
@media (max-width: 1023px){
  .hero{min-height:clamp(480px,calc(100vh - var(--tabbar-cur) - 48px),640px);min-height:clamp(480px,calc(100svh - var(--tabbar-cur) - 48px),640px)}
  .hero-media img{object-position:64% 30%}
  .hero-media::after{background:linear-gradient(0deg,var(--s0) 0%,rgba(var(--scrim-rgb),.8) 36%,rgba(var(--scrim-rgb),.15) 72%,rgba(var(--scrim-rgb),0) 100%),radial-gradient(90% 60% at 0% 80%,rgba(var(--violet-rgb),.24),transparent 70%),linear-gradient(180deg,rgba(var(--scrim-rgb),.6) 0,rgba(var(--scrim-rgb),0) 140px)}
  .hero-inner::after{content:"";position:absolute;z-index:-1;inset:-72px -100vw -100vh;background:linear-gradient(180deg,rgba(var(--scrim-rgb),0),rgba(var(--scrim-rgb),.66) 72px);pointer-events:none}
  .hero-content{grid-template-columns:minmax(0,1fr);padding-bottom:calc(24px + 44px + 28px)}
  /* one slide renders no controls row (hero.blade.php) → no room reserved for it */
  .hero.is-single .hero-content{padding-bottom:clamp(40px,6vh,64px);padding-bottom:clamp(40px,6svh,64px)}
  .hero-controls{justify-content:space-between;bottom:24px}
  .hero-dots{max-width:none}
  .hero-arrows button{width:40px;height:40px}
}
@media (max-width: 560px){
  .hero-inner{padding-left:14px}
  .hero-inner::before{width:3px}
  .hero-title{margin-top:14px;font-size:clamp(32px,9.4vw,42px)}
  .hero-text{margin-top:12px;font-size:15px}
  .hero-meta{margin-top:14px;margin-left:-26px;font-size:13px;clip-path:inset(-6px -6px -6px 26px)}
  .hero-meta span::before{margin:0 10px}
  .hero-actions{margin-top:20px;gap:10px}
  /* equal halves; a long custom button label wraps inside its button instead of spilling out */
  .hero-actions .btn{flex:1 1 0;min-width:0;height:auto;min-height:52px;padding:6px 14px;white-space:normal;line-height:1.2;text-align:center}
  .hero-controls{gap:12px}
  .hero-dots{gap:8px}
}
/* 3+ slides (.is-many) on a controls row under 314px (320px phones: 288px; 400%-zoomed desktops): three whole numbers
   (154) + gap (12) + stop/start and both arrows (148) don't fit, so "03" hid half under the edge fade → the prev/next
   arrows step aside there (the numbers pick any slide, swipe and stop/start stay). One row, so the copy keeps its
   height budget (a second controls row cost 52px and pushed the controls under the tab bar / cookie bar on 568px-tall
   phones). A container query on the row itself, so gutters, safe areas and zoom are all counted. */
.hero-controls{container:hero-ctrl/inline-size}
@container hero-ctrl (width < 314px){
  .hero.is-many .hero-arrows [data-hero-prev],.hero.is-many .hero-arrows [data-hero-next]{display:none}
}
/* phone landscape (static top bar, slim tab bar): the hero fills exactly the space between the two bars;
   type + spacing scale with the short side (svh) so ~200px (360px-tall phone with its URL bar) still holds title, copy
   and CTAs; the controls share the CTA row on the right (the dot strip scrolls past ~4 slides) */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  .hero{min-height:calc(100vh - var(--topbar-h) - var(--tabbar-cur));min-height:calc(100svh - var(--topbar-h) - var(--tabbar-cur))}
  /* wide + short: a side scrim like the desktop one (copy on the left, image clear on the right), but darker further
     right: the copy fills most of the height and its lines run past the middle of the picture */
  .hero-media::after{background:linear-gradient(0deg,var(--s0) 0%,rgba(var(--scrim-rgb),.6) 12%,rgba(var(--scrim-rgb),.1) 40%,rgba(var(--scrim-rgb),0) 60%),radial-gradient(700px 420px at 14% 80%,rgba(var(--violet-rgb),.26),transparent 70%),linear-gradient(90deg,rgba(var(--scrim-rgb),.94) 0%,rgba(var(--scrim-rgb),.84) 42%,rgba(var(--scrim-rgb),.55) 64%,rgba(var(--scrim-rgb),0) 88%)}
  .hero-inner::after{content:none}
  .hero-content,.hero.is-single .hero-content{padding-top:18px;padding-bottom:18px;padding-block:clamp(12px,4.6svh,18px)}
  .hero-title{margin-top:10px;margin-top:clamp(6px,2.6svh,10px);font-size:clamp(24px,4.4vw,38px);font-size:clamp(24px,min(4.4vw,9svh),38px);-webkit-line-clamp:2}
  .hero-text{margin-top:8px;margin-top:clamp(4px,2svh,8px);max-width:60ch;font-size:14px;line-height:1.5;-webkit-line-clamp:2}
  .hero-meta{margin-top:10px;margin-top:clamp(6px,2.6svh,10px)}
  /* the controls take at most 26vw (dot strip) + 164px (gap + stop/start + arrows) on the right; the CTAs stop 16px short of that */
  .hero-actions{margin-top:14px;margin-top:clamp(8px,3.6svh,14px);gap:10px;max-width:calc(100% - 26vw - 180px)}
  .hero-actions .btn-lg{height:44px;padding:0 18px}
  .hero-controls{justify-content:flex-end;gap:16px;bottom:18px;bottom:clamp(12px,4.6svh,18px)}
  .hero-dots{max-width:26vw}
}
/* narrow landscape phones (568–767px): compact CTAs + gaps, so "İzlemeye Başla" + "Bölümler" (234.6px with the gap) still
   fit beside the controls on one row (a wrapped second row made that slide taller than the screen band). The CTAs keep
   ≥242px (~7px slack): below ~616px the dot strip gives way first (min(): exactly two whole numbers at 568px, it scrolls);
   the CTA limit mirrors that min() (its 100% is the hero-inner box = controls box − 18px padding; 164px = 12 gap + 148
   stop/start + arrows + 4 margin; with the strip's 6px inner padding the CTAs end 16px before "01"). */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 520px){
  .hero-actions{max-width:calc(100% - min(26vw,100% - 406px) - 164px)}
  .hero-actions .btn-lg{gap:7px;padding:0 12px;font-size:14px}
  .hero-controls{gap:12px}
  .hero-dots{gap:8px;max-width:min(26vw,100% - 424px)}
}
/* "landscape" narrower than any phone — a 300–400% zoomed desktop (1280×1024 at 400% = 320×256): no room beside the
   CTAs (the strip above collapsed to 0px, so focused numbers were invisible) → controls back under the copy as on
   portrait phones (3+ slides on a <314px row: no prev/next, see .is-many above) */
@media (max-width: 560px) and (orientation: landscape) and (max-height: 520px){
  .hero-content{padding-bottom:calc(18px + 44px + 14px);padding-bottom:calc(clamp(12px,4.6svh,18px) + 44px + 14px)}
  .hero-actions{max-width:none}
  .hero-actions .btn{height:auto;min-height:44px}
  .hero-controls{justify-content:space-between}
  .hero-dots{max-width:none}
}
/* short landscape (a phone with its browser bars): one line of copy; ≤300px also drops the brand line */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 360px){
  .hero-text{-webkit-line-clamp:1}
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 300px){
  .hero-brand{display:none}
  .hero-title{margin-top:0}
}
@media (pointer:coarse){ .hero-arrows button{width:44px;height:44px} }

/* ---------- 2. Intro fallback (no active sliders → the page's single <h1>) ---------- */
.home-intro{position:relative;margin-top:clamp(14px,2vw,28px);padding:clamp(28px,5vw,64px);border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(640px 320px at 0 100%,rgba(var(--violet-rgb),.26),transparent 70%),radial-gradient(520px 300px at 100% 0,rgba(var(--pink-rgb),.12),transparent 70%),var(--s1);box-shadow:inset 0 0 0 1px var(--line-1)}
.home-intro::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad-line);opacity:.7}
.home-intro__kicker{display:flex;align-items:center;gap:10px;font:600 11px/1.3 var(--font-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--nardo-200)}
.home-intro__kicker i{width:28px;height:1px;flex:none;background:var(--grad-line)}
.home-intro__title{margin-top:14px;max-width:14ch;font:800 var(--fs-hero)/1 var(--font-display);font-variation-settings:"opsz" 96,"wdth" var(--display-wdth);letter-spacing:-0.025em;text-wrap:balance}
.home-intro__lead{margin-top:16px;max-width:52ch;font-size:17px;line-height:1.55;color:var(--t2)}
.home-intro__actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
/* phone landscape: the 45px title + 42px padding filled the band between the bars and pushed the CTAs under the tab bar
   → type and spacing scale with the short side so the card fits between the (static) top bar and the tab bar */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  .home-intro{margin-top:12px;padding:clamp(16px,4.6svh,24px) clamp(20px,3.4vw,32px)}
  .home-intro__title{margin-top:8px;max-width:none;font-size:clamp(26px,9svh,38px)}
  .home-intro__lead{margin-top:8px;font-size:15px;line-height:1.5}
  .home-intro__actions{margin-top:14px}
  .home-intro__actions .btn-lg{height:44px;padding:0 18px}
}

/* ---------- 3. Kaldığın Yerden — horizontal resume tiles (thumb ┆ plate) ---------- */
.row-track.resume-track{--cols:3.3}
.resume-tile{position:relative;display:grid;grid-template-columns:44% minmax(0,1fr);min-width:0;scroll-snap-align:start;border-radius:var(--r-md);overflow:hidden;background:var(--s2);box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.07);color:inherit;transition:background var(--dur-base),box-shadow var(--dur-base),transform var(--dur-base) var(--ease-out)}
.resume-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--s3)}
.resume-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.resume-play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:var(--r-round);background:rgba(var(--scrim-rgb),.72);box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.3);display:grid;place-items:center;color:var(--t1);transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.resume-play svg{width:16px;height:16px;margin-left:2px}
.resume-body{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:12px 14px}
.resume-body::before{content:"";position:absolute;left:0;top:10px;bottom:10px;border-left:1px dashed rgba(var(--lilac-rgb),.22)}
.resume-title{font:600 14px/1.3 var(--font-body);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-meta{font:500 12.5px/1.3 var(--font-body);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.resume-bar{flex:1;height:4px;border-radius:4px;background:rgba(var(--lilac-rgb),.12);overflow:hidden}
.resume-bar i{display:block;height:100%;border-radius:inherit;background:var(--grad-line)}
.resume-pct{font:600 11.5px/1 var(--font-body);color:var(--t2)}
.resume-tile:focus-visible{outline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .resume-tile:hover{background:var(--s3);box-shadow:inset 0 0 0 1px var(--accent-line);transform:translateY(-3px)}
  .resume-tile:hover .resume-thumb img{transform:scale(1.05)}
  .resume-tile:hover .resume-play{background:var(--grad-brand);box-shadow:var(--glow-1)}
}

/* ---------- 4. Trend — numbered chart (2 columns reading down, 1 on phones) ---------- */
.chart{columns:2;column-gap:clamp(24px,3.4vw,56px)}
.chart-item{break-inside:avoid;padding:4px 0;border-bottom:1px solid var(--line-1)}
.chart-row{display:grid;grid-template-columns:52px 56px minmax(0,1fr) auto;align-items:center;gap:16px;padding:10px 14px 10px 4px;border-radius:var(--r-md);color:inherit;transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.chart-rank{font:800 40px/1 var(--font-display);font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-0.03em;text-align:center;color:var(--t3);transition:color var(--dur-fast)}
.chart-row.is-top .chart-rank{background:var(--grad-shine);-webkit-background-clip:text;background-clip:text;color:transparent}
.chart-thumb{width:56px;aspect-ratio:2/3;border-radius:var(--r-xs);overflow:hidden;background:var(--s2);box-shadow:0 0 0 1px rgba(var(--lilac-rgb),.1)}
.chart-thumb img{width:100%;height:100%;object-fit:cover}
.chart-body{display:grid;gap:5px;min-width:0}
.chart-title{font:600 15px/1.3 var(--font-body);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-meta{font:500 12.5px/1.3 var(--font-body);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-meta span+span::before{content:"·";margin:0 6px}
.chart-score{display:inline-flex;align-items:center;gap:4px;font:700 14px/1 var(--font-body);color:var(--gold)}
.chart-score svg{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){
  .chart-row:hover{background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-2)}
  .chart-row:hover .chart-rank{color:var(--t2)}
  .chart-row.is-top:hover .chart-rank{color:transparent}
}
@media (max-width: 767px){
  .chart{columns:1}
  .chart-item{padding:2px 0}
  .chart-row{grid-template-columns:36px 42px minmax(0,1fr) auto;gap:12px;padding:6px 6px 6px 0}
  .chart-rank{font-size:30px}
  .chart-thumb{width:42px}
  .chart-title{font-size:14.5px}
  .chart-meta{font-size:12px}
}

/* ---------- 5. Öne Çıkanlar — bento: wide lead tile + poster cards ----------
   Phone: lead full width, posters in 2|3 columns (.is-p2/.is-p3). Mid (600–859px): lead 21:9, .is-t3…6.
   Wide (≥860px): 7-column grid (8 for .is-n6/.is-n9); the lead's span per item count keeps every row full. */
.bento-frame{container:bento/inline-size}
.bento{--bento-cols:var(--bento-phone,3);display:grid;grid-template-columns:repeat(var(--bento-cols),minmax(0,1fr));gap:18px 12px}
.bento > *{min-width:0}
.bento.is-p2{--bento-phone:2}
.bento.is-t3{--bento-mid:3} .bento.is-t4{--bento-mid:4} .bento.is-t5{--bento-mid:5} .bento.is-t6{--bento-mid:6}
.bento-lead{position:relative;grid-column:1/-1;display:flex;align-items:flex-end;min-width:0;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--s2);isolation:isolate;color:inherit;container:bento-lead/inline-size;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.bento-lead > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 30%;transition:transform var(--dur-slow) var(--ease-out)}
.bento-lead::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(var(--scrim-rgb),.95) 0%,rgba(var(--scrim-rgb),.72) 36%,rgba(var(--scrim-rgb),.12) 72%,rgba(var(--scrim-rgb),0) 100%),linear-gradient(90deg,rgba(var(--scrim-rgb),.6) 0%,rgba(var(--scrim-rgb),0) 60%)}
.bento-lead::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.12);pointer-events:none;transition:box-shadow var(--dur-base)}
.bento-lead__body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;max-width:660px;min-width:0;padding:clamp(16px,4.2cqi,34px)}
.bento-lead__kicker{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--r-round);background:rgba(var(--scrim-rgb),.62);box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.2);font:600 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--nardo-100);white-space:nowrap}
.bento-lead__kicker svg{width:13px;height:13px;color:var(--gold)}
.bento-lead__title{max-width:100%;font:800 clamp(22px,6.4cqi,48px)/1 var(--font-display);font-variation-settings:"opsz" 96,"wdth" var(--display-wdth);letter-spacing:-0.02em;color:var(--t1);text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bento-lead__text{max-width:62ch;font:400 14.5px/1.55 var(--font-body);color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* same leading-dot + left clip trick as .hero-meta: wrapped lines never start with a dot */
.bento-lead__meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin-left:-23px;font:600 12.5px/1.3 var(--font-body);color:var(--t2);clip-path:inset(-6px -6px -6px 23px)}
.bento-lead__meta span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.bento-lead__meta span::before{content:"";width:3px;height:3px;flex:none;border-radius:50%;background:var(--line-3);margin:0 6px 0 10px}
.bento-lead__meta svg{width:13px;height:13px}
.bento-lead__cta{display:none;align-items:center;gap:10px;margin-top:8px;font:600 14px/1 var(--font-body);color:var(--t1)}
.bento-lead__play{width:40px;height:40px;border-radius:var(--r-round);background:var(--grad-brand);box-shadow:var(--glow-1);display:grid;place-items:center;flex:none}
.bento-lead__play svg{width:16px;height:16px;margin-left:2px}
.bento-lead:focus-visible{outline-offset:4px}
.bento .card-body{padding:10px 10px 11px}
.bento .card-title{font-size:13.5px}
@media (hover:hover) and (pointer:fine){
  .bento-lead:hover{transform:translateY(-3px);box-shadow:var(--glow-2)}
  .bento-lead:hover > img{transform:scale(1.04)}
  .bento-lead:hover::after{box-shadow:inset 0 0 0 1px var(--accent-line)}
}
@container bento (max-width: 599px){
  .bento .card-body{padding:8px 8px 9px}
  .bento .card-title{font-size:12.5px}
  .bento .card-meta,.bento .card-score{font-size:11px}
  .bento .card-badges .badge.num{display:none}
  .bento .card-badges{top:6px;left:6px;right:6px}
  .bento-lead__kicker{height:24px;font-size:11px;letter-spacing:.1em}
}
@container bento (min-width: 600px){
  .bento{--bento-cols:var(--bento-mid,3);gap:22px 14px}
  .bento-lead{aspect-ratio:21/9}
}
@container bento (min-width: 860px){
  .bento{--bento-cols:7;gap:24px 16px}
  .bento.is-n6,.bento.is-n9{--bento-cols:8}
  .bento-lead{--lead-cols:4;--lead-rows:1;grid-column:span var(--lead-cols);grid-row:span var(--lead-rows);aspect-ratio:auto}
  .bento.is-n1 .bento-lead,.bento.is-n8 .bento-lead{--lead-cols:7;aspect-ratio:16/5}
  .bento.is-n2 .bento-lead{--lead-cols:6}
  .bento.is-n3 .bento-lead{--lead-cols:5}
  .bento.is-n5 .bento-lead,.bento.is-n6 .bento-lead{--lead-cols:3}
  .bento.is-n7 .bento-lead,.bento.is-n9 .bento-lead{--lead-cols:4;--lead-rows:2}
  .bento.is-n10 .bento-lead{--lead-cols:6;--lead-rows:2}
  /* single-row leads share the poster height: smaller type, no call-to-action */
  .bento-lead:not(.is-tall) .bento-lead__title{font-size:clamp(22px,5cqi,34px)}
  .bento-lead.is-tall .bento-lead__text{-webkit-line-clamp:3}
  .bento-lead.is-tall .bento-lead__cta{display:inline-flex}
}
/* phone landscape: a 21:9 lead would fill the whole short screen → 3:1 (it still grows to fit its copy) */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  @container bento (min-width: 600px) and (max-width: 859px){ .bento-lead{aspect-ratio:3/1} }
}
@container bento (min-width: 860px) and (max-width: 1080px){
  /* tablets: 7–8 narrow columns → quieter cards */
  .bento .card-body{padding:8px 8px 9px}
  .bento .card-title{font-size:12.5px}
  .bento .card-meta,.bento .card-score{font-size:11px}
  .bento .card-badges .badge:not(.badge-accent){display:none}
  .bento-lead__text{-webkit-line-clamp:2}
}

/* ---------- 6. Filmler / Diziler — 7 × 3 (21 cards), 3 columns when narrow ----------
   Only 3 and 7 columns make full rows of 21. A shelf of 680px+ (tablet portrait up; 600px+ in phone landscape) takes the
   7 × 3 grid — three ~240px posters per row made the tablet shelves ~3000px tall. Up to 1060px the cards are quiet
   (≤ ~140px wide: smaller type, accent badge only; the genre shows only where it fits whole, see 6b). */
.home-shelf{container:shelf/inline-size}
.poster-grid.is-home-7{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
.poster-grid.is-home-7 .card-body{padding:10px 10px 11px}
.poster-grid.is-home-7 .card-title{font-size:13.5px}
.poster-grid.is-home-7 .card-meta{font-size:11.5px}
.poster-grid.is-home-7 .card-score{font-size:12px}
@container shelf (min-width: 680px){
  .poster-grid.is-home-7{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 10px}
}
@container shelf (min-width: 880px){
  .poster-grid.is-home-7{gap:26px 14px}
}
@container shelf (min-width: 880px) and (max-width: 1060px){
  .poster-grid.is-home-7{gap:22px 12px}
}
@container shelf (min-width: 680px) and (max-width: 1060px){
  .poster-grid.is-home-7 .card-body{padding:8px 8px 9px}
  .poster-grid.is-home-7 .card-title{font-size:12.5px}
  .poster-grid.is-home-7 .card-meta,.poster-grid.is-home-7 .card-score{font-size:11px}
  .poster-grid.is-home-7 .card-badges .badge:not(.badge-accent){display:none}
}
@container shelf (min-width: 680px) and (max-width: 879px){
  .poster-grid.is-home-7 .card-badges{top:6px;left:6px;right:6px}
}
/* phone landscape: three columns would make every poster taller than the screen → the 7 × 3 grid from 600px */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  @container shelf (min-width: 600px) and (max-width: 679px){
    .poster-grid.is-home-7{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 10px}
    .poster-grid.is-home-7 .card-body{padding:8px 8px 9px}
    .poster-grid.is-home-7 .card-title{font-size:12.5px}
    .poster-grid.is-home-7 .card-meta,.poster-grid.is-home-7 .card-score{font-size:11px}
    .poster-grid.is-home-7 .card-badges{top:6px;left:6px;right:6px}
    .poster-grid.is-home-7 .card-badges .badge:not(.badge-accent){display:none}
  }
}
@container shelf (max-width: 520px){
  .poster-grid.is-home-7{gap:16px 10px}
  .poster-grid.is-home-7 .card-body{padding:8px 8px 9px}
  .poster-grid.is-home-7 .card-title{font-size:12.5px}
  .poster-grid.is-home-7 .card-meta,.poster-grid.is-home-7 .card-score{font-size:11px}
  .poster-grid.is-home-7 .card-badges{top:6px;left:6px;right:6px}
  .poster-grid.is-home-7 .card-badges .badge.num{display:none}
}

/* ---------- 6b. Card meta "Yıl · Tür" on every home poster card (Vizyondakiler row, bento, shelves) ----------
   The genre shows only when it fits whole, at any card width: the meta is one clipped line box and each part an
   unbreakable inline-block, so a genre that doesn't fit wraps onto the hidden second line — "2026", never "2026 · Ma…".
   (Core's meta is one nowrap/ellipsis line; per-tier year-only rules missed widths in between, e.g. the row at 1280px.) */
.row-track.home-row .card-meta,.bento .card-meta,.poster-grid.is-home-7 .card-meta{height:1.4em;white-space:normal;text-overflow:clip}
.row-track.home-row .card-body .card-meta span,.bento .card-body .card-meta span,.poster-grid.is-home-7 .card-body .card-meta span{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}

/* ---------- 7. Ne izlesem? — the page's most colourful block (explicit exception to the gradient rule) ----------
   2px --grad-line frame (violet→pink→coral, same as the progress strips; padding-box / border-box backgrounds), violet→magenta glow inside,
   ticket stub with a dashed perforation and two punched notches (mask, same technique as .card-body).
   Compact (user request 2026-09-25: as low as the first version, ~240px on desktop): the main part is a GET form (RandomPicker) —
   title row, then one line of colourful chips per group (Mod / Süre + Kiminle / Ekstra, fixed label column) with the two CTAs
   stacked on the right (Dizi Öner = --grad-brand, Film Öner = .btn-warm). Each chip is a checkbox inside its label (the input
   covers the label → hit area = the chip); state via :has(input:checked); tone class (.is-sun … .is-indigo) sets --tone
   (foreground) + --tone-rgb (tints). home.js: count pill, Temizle, die spin on submit. */
.cta-random{margin-top:var(--section-gap);container:cta/inline-size;filter:drop-shadow(0 24px 48px rgba(var(--violet-rgb),.26))}
.cta-random__ticket{--stub:clamp(108px,10cqi,140px);--notch:13px;position:relative;display:grid;grid-template-columns:var(--stub) minmax(0,1fr);border:2px solid transparent;border-radius:var(--r-xl);
  background:
    radial-gradient(440px 280px at 0% 50%,rgba(var(--violet-rgb),.46),transparent 70%) padding-box,
    radial-gradient(560px 320px at 100% 0%,rgba(var(--pink-rgb),.26),transparent 70%) padding-box,
    radial-gradient(520px 260px at 62% 120%,rgba(var(--violet-rgb),.2),transparent 70%) padding-box,
    linear-gradient(115deg,var(--nardo-800) 0%,var(--s1) 58%,var(--s2) 100%) padding-box,
    var(--grad-line) border-box;
  -webkit-mask:radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 0,transparent 96%,black) 0 0/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 100%,transparent 96%,black) 0 100%/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 0,transparent 96%,black) 0 0/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(var(--stub) + 2px) 100%,transparent 96%,black) 0 100%/100% 51% no-repeat}
.cta-random__stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px 10px}
.cta-random__stub::after{content:"";position:absolute;right:-1px;top:calc(var(--notch) + 8px);bottom:calc(var(--notch) + 8px);border-right:2px dashed rgba(var(--lilac-rgb),.34)}
.cta-random__die{width:clamp(54px,5.6cqi,72px);aspect-ratio:1;border-radius:var(--r-round);background:var(--grad-brand);color:var(--t1);display:grid;place-items:center;box-shadow:var(--glow-2),0 0 0 6px rgba(var(--violet-rgb),.14),0 0 48px 4px rgba(var(--pink-rgb),.4)}
.cta-random__die svg{width:46%;height:46%;transition:transform var(--dur-slow) var(--ease-out)}
.cta-random__ticket.is-rolling .cta-random__die svg{animation:pick-roll .7s linear infinite}
@keyframes pick-roll{to{transform:rotate(360deg)}}
.cta-random__stamp{font:700 10px/1.35 var(--font-body);letter-spacing:.2em;text-transform:uppercase;text-align:center;color:var(--nardo-100)}
.cta-random__main{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(18px,2.2cqi,24px) clamp(18px,2.6cqi,30px)}
.cta-random__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.cta-random__title{font:800 clamp(26px,2.8cqi,34px)/1 var(--font-display);font-variation-settings:"opsz" 96,"wdth" var(--display-wdth);letter-spacing:-0.025em;background:var(--grad-shine);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}
.cta-random__lead{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.4;color:var(--t3)}
.cta-random__status{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.cta-random__count{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-round);background:rgba(var(--lilac-rgb),.07);box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.2);font:600 12px/1 var(--font-body);color:var(--t2);white-space:nowrap;transition:background var(--dur-base),box-shadow var(--dur-base),color var(--dur-base)}
.cta-random__count.is-on{background:var(--grad-brand);box-shadow:var(--glow-1);color:var(--t1)}
.cta-random__reset{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--r-round);background:transparent;font:600 12px/1 var(--font-body);color:var(--t3);white-space:nowrap;transition:color var(--dur-fast),background var(--dur-fast)}
.cta-random__reset svg{width:13px;height:13px}
.cta-random__reset:hover{color:var(--t1);background:rgba(var(--lilac-rgb),.08)}
.cta-random__reset:focus-visible{outline:2px solid var(--nardo-300);outline-offset:2px}
.cta-random__body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 28px}

/* chip lines: label column + wrapping chips (wrapped chips line up under the first one, not under the label) */
.pick{display:flex;flex-wrap:wrap;gap:8px 22px;min-width:0}
.pick-set{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pick-set.is-full{flex-basis:100%}
.pick-label{flex:none;width:56px;font:700 10.5px/34px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--nardo-100)}
.pick-opts{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.pick-chip{--tone:var(--nardo-300);--tone-rgb:var(--violet-rgb);position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 5px;border-radius:var(--r-round);background:rgba(var(--tone-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.26);font:600 13px/1 var(--font-body);color:var(--t2);white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background var(--dur-base),box-shadow var(--dur-base),color var(--dur-base)}
.pick .is-sun{--tone:var(--sun);--tone-rgb:var(--sun-rgb)}
.pick .is-gold{--tone:var(--gold);--tone-rgb:var(--gold-rgb)}
.pick .is-coral{--tone:var(--coral);--tone-rgb:var(--coral-rgb)}
.pick .is-crimson{--tone:var(--crimson);--tone-rgb:var(--crimson-rgb)}
.pick .is-pink{--tone:var(--pink);--tone-rgb:var(--pink-rgb)}
.pick .is-violet{--tone:var(--nardo-300);--tone-rgb:var(--violet-rgb)}
.pick .is-orchid{--tone:var(--orchid);--tone-rgb:var(--orchid-rgb)}
.pick .is-indigo{--tone:var(--indigo);--tone-rgb:var(--indigo-rgb)}
/* the real checkbox covers its chip: native hit area, keyboard + screen readers; the visuals sit under it */
.pick input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick-chip:has(input:focus-visible){outline:2px solid var(--tone);outline-offset:2px}
.pick-chip__ico{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--r-round);background:rgba(var(--tone-rgb),.18);color:var(--tone);transition:background var(--dur-base),color var(--dur-base)}
.pick-chip__ico svg{width:14px;height:14px}
/* süre meter: three rising bars, the first 1/2/3 lit */
.pick-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:6px 6px 7px}
.pick-bars i{flex:none;width:3px;border-radius:2px;background:rgba(var(--tone-rgb),.35);transition:background var(--dur-base)}
.pick-bars i:nth-child(1){height:40%}
.pick-bars i:nth-child(2){height:70%}
.pick-bars i:nth-child(3){height:100%}
.pick-bars.is-l1 i:nth-child(1),.pick-bars.is-l2 i:nth-child(-n+2),.pick-bars.is-l3 i{background:var(--tone)}
.pick-chip:has(input:checked){background:linear-gradient(120deg,var(--tone),rgba(var(--tone-rgb),.78));box-shadow:0 8px 20px -10px rgba(var(--tone-rgb),.9);color:var(--t-inv)}
.pick-chip:has(input:checked) .pick-chip__ico{background:rgba(var(--scrim-rgb),.16);color:var(--t-inv)}
.pick-chip:has(input:checked) .pick-bars i{background:rgba(var(--scrim-rgb),.3)}
.pick-chip:has(input:checked) .pick-bars.is-l1 i:nth-child(1),.pick-chip:has(input:checked) .pick-bars.is-l2 i:nth-child(-n+2),.pick-chip:has(input:checked) .pick-bars.is-l3 i{background:var(--t-inv)}

.cta-random__actions{display:flex;flex-direction:column;gap:8px;width:clamp(172px,16cqi,210px)}
.cta-random__actions .btn{width:100%;height:48px}
@media (hover:hover) and (pointer:fine){
  .cta-random:hover .cta-random__die svg{transform:rotate(24deg)}
  .pick-chip:not(:has(input:checked)):hover{background:rgba(var(--tone-rgb),.15);box-shadow:inset 0 0 0 1px rgba(var(--tone-rgb),.6);color:var(--t1)}
}
/* touch: chips 38px + 3px invisible band = 44px tap rows (row gap 6px → bands meet, never overlap); Temizle keeps its look */
@media (pointer:coarse){
  .pick-chip{height:38px}
  .pick-label{line-height:38px}
  .pick-chip::after{content:"";position:absolute;inset:-3px 0}
  .cta-random__reset{position:relative}
  .cta-random__reset::after{content:"";position:absolute;inset:-8px -4px}
}
/* below ~1100px of ticket (1366 laptops, icon-rail widths) a side CTA column would push chips onto orphan lines:
   the CTAs move under the chips, right-aligned; on tablets / narrow content they share the row */
@container cta (max-width: 1100px){
  .cta-random__body{grid-template-columns:minmax(0,1fr)}
  .cta-random__actions{flex-direction:row;justify-content:flex-end;width:auto}
  .cta-random__actions .btn{width:auto;min-width:180px}
}
@container cta (max-width: 900px){
  .cta-random__actions .btn{flex:1 1 0;min-width:0}
}
/* phones: stub on top, horizontal perforation, notches on the side edges; labels become captions above their chips */
@container cta (max-width: 580px){
  .cta-random__ticket{--stub-h:68px;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--stub-h) auto;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 calc(var(--stub-h) + 2px),transparent 96%,black) 0 0/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% calc(var(--stub-h) + 2px),transparent 96%,black) 100% 0/51% 100% no-repeat;
    mask:radial-gradient(circle var(--notch) at 0 calc(var(--stub-h) + 2px),transparent 96%,black) 0 0/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% calc(var(--stub-h) + 2px),transparent 96%,black) 100% 0/51% 100% no-repeat}
  .cta-random__stub{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 20px}
  .cta-random__stub::after{top:auto;right:calc(var(--notch) + 8px);bottom:-1px;left:calc(var(--notch) + 8px);border-right:0;border-bottom:2px dashed rgba(var(--lilac-rgb),.34)}
  .cta-random__die{width:44px;box-shadow:var(--glow-2),0 0 0 5px rgba(var(--violet-rgb),.14),0 0 32px 3px rgba(var(--pink-rgb),.4)}
  .cta-random__stamp{font-size:11px;text-align:left}
  .cta-random__stamp br{display:none}
  .cta-random__main{gap:14px;padding:16px 14px 16px}
  .cta-random__title{font-size:28px}
  .cta-random__lead{display:none}
  .pick{gap:12px}
  .pick-set{flex-direction:column;gap:6px}
  .pick-label{width:auto;line-height:1.2}
  .pick-chip{padding:0 11px 0 4px;gap:6px;font-size:12.5px}
  .cta-random__actions .btn{height:46px;padding-inline:12px;font-size:14px}
}

/* ---------- 8. Türler — genre tiles (7 × 2 wide, 2 columns on phones) ---------- */
.genre-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.genre-tiles > li{min-width:0}
.genre-tiles__tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;height:100%;min-height:104px;padding:14px 16px 16px;border-radius:var(--r-md);overflow:hidden;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1);color:var(--t2);transition:background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-base) var(--ease-out)}
.genre-tiles__tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-line);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-base) var(--ease-out)}
.genre-tiles__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.genre-tiles__idx{font:700 11.5px/1 var(--font-body);letter-spacing:.08em;color:var(--t3)}
.genre-tiles__top svg{width:16px;height:16px;color:var(--t3);transition:transform var(--dur-fast),color var(--dur-fast)}
.genre-tiles__name{font:800 21px/1.05 var(--font-display);font-variation-settings:"opsz" 48,"wdth" var(--display-wdth);letter-spacing:-0.01em;color:var(--t1);overflow-wrap:anywhere}
.genre-tiles__tile:focus-visible{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line-2)}
.genre-tiles__tile:focus-visible::after{transform:scaleX(1)}
.genre-tiles__tile:focus-visible svg{color:var(--nardo-200);transform:translateX(3px)}
@media (hover:hover) and (pointer:fine){
  .genre-tiles__tile:hover{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line-2);transform:translateY(-2px)}
  .genre-tiles__tile:hover::after{transform:scaleX(1)}
  .genre-tiles__tile:hover svg{color:var(--nardo-200);transform:translateX(3px)}
}

/* ---------- 8b. Yukarı çık — fixed back-to-top button (bottom right) ----------
   Round, 2px --grad-line ring (the same violet→pink→coral strip as the progress bars and the .cta-random frame).
   home.js contract: [data-to-top] gets .is-visible as soon as the page leaves the top and keeps it whichever way the reader
   scrolls (user request 2026-09-25), --fab-lift while the cookie bar is up; click runs an eased scroll to the top.
   Sits under the mobile drawer scrim, above the tab bar. */
.to-top-fab{position:fixed;right:calc(24px + var(--safe-r));bottom:calc(24px + max(var(--tabbar-cur),var(--safe-b)) + var(--fab-lift,0px));z-index:calc(var(--z-drawer) - 2);width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:var(--r-round);
  background:radial-gradient(circle at 50% 0,rgba(var(--violet-rgb),.34),transparent 72%) padding-box,linear-gradient(var(--s1),var(--s1)) padding-box,var(--grad-line) border-box;
  color:var(--t1);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-1),var(--glow-1);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base),box-shadow var(--dur-fast),bottom var(--dur-base) var(--ease-out)}
.to-top-fab.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top-fab svg{width:28px;height:28px;stroke-width:2.2;transition:transform var(--dur-fast) var(--ease-out)}
.to-top-fab:focus-visible{outline:2px solid var(--nardo-300);outline-offset:4px}
.to-top-fab:active svg{transform:translateY(-4px)}
main#icerik[tabindex="-1"]:focus{outline:none} /* keyboard focus lands here after the glide */
@media (hover:hover) and (pointer:fine){
  .to-top-fab.is-visible:hover{transform:translateY(-3px);box-shadow:var(--shadow-1),var(--glow-2)}
  .to-top-fab:hover svg{transform:translateY(-3px)}
}

/* ---------- Responsive (viewport) ---------- */
@media (max-width: 1279px){
  .row-track.resume-track{--cols:2.6}
}
@media (max-width: 1023px){
  .row-track.resume-track{--cols:2.2}
  .to-top-fab{right:calc(16px + var(--safe-r));bottom:calc(16px + max(var(--tabbar-cur),var(--safe-b)) + var(--fab-lift,0px));width:56px;height:56px}
  .to-top-fab svg{width:24px;height:24px}
}
@media (max-width: 560px){
  .row-track.resume-track{--cols:1.2}
  .genre-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .genre-tiles__tile{min-height:88px;padding:12px 14px 14px;gap:12px}
  .genre-tiles__name{font-size:19px}
}
@media (max-width: 374px){
  .genre-tiles__tile{padding:12px 12px 13px}
  .genre-tiles__name{font-size:17px}
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  .row-track.resume-track{--cols:2.6}
  .to-top-fab{right:calc(12px + var(--safe-r));bottom:calc(12px + max(var(--tabbar-cur),var(--safe-b)) + var(--fab-lift,0px));width:48px;height:48px}
  .to-top-fab svg{width:22px;height:22px}
}

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-media img{transform:none!important;transition:none}
  /* opacity crossfade + 2px progress line are not motion: exempt them from core's global 0.001ms reset */
  .hero-slide,.hero-slide.is-active{transition-duration:var(--dur-hero),0s!important}
  .hero-dots button.is-running i{animation-duration:var(--hero-interval,7000ms)!important}
  .cta-random__die svg,.bento-lead,.bento-lead > img,.resume-tile,.genre-tiles__tile{transition:none}
  /* back-to-top: no slide/lift, but keep its fade (not motion) */
  .to-top-fab,.to-top-fab.is-visible:hover,.to-top-fab svg{transform:none!important}
  .to-top-fab{transition-duration:var(--dur-base)!important}
}