/* =========================================================
   PERDE PART — catalog
   Listing & discovery pages: film/dizi katalogları, tür/yıl/ülke,
   yeni bölümler, türler, yıllar, yayın takvimi, koleksiyonlar,
   kişi profili, arama.
   Namespaces: .page-head* .filter-bar* .field-inline .result-count
   .catalog-* (.catalog-rail-wrap/.catalog-rail__step) .genre-index
   .genre-card* .year-index* .calendar* (.calendar-jump) .week-nav*
   .collection-* .person-hero* .bio* .search-page* .latest-*
   Sections: 1 page head · 2 filter toolbar · 3 active filters +
   rails · 4 latest episodes · 5 genre tiles · 6 year index ·
   7 calendar · 8 collections · 9 person · 10 search · 11 touch ·
   12 responsive (ladder ≤1279/≤1023/≤767/≤560/≤374 + phone
   landscape; desktop toolbar via @container fbar) · 13 reduced motion
   ========================================================= */

/* ---------- 1. Page head — compact title bar ---------- */
/* Shape A (catalog pages): .page-head > .page-head__main + .page-head__aside
   Shape B (legacy, e.g. page-shell): .page-head > .eyebrow + .h1 + .lead      */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:32px;padding:clamp(22px,2.6vw,36px) 0 clamp(20px,2.2vw,28px)}
.page-head > div:not(.page-head__aside),.page-head__main{flex:1 1 440px;min-width:0}
.page-head > .eyebrow,.page-head > .h1,.page-head > .lead{flex:0 0 100%}
.page-head .eyebrow{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-head .eyebrow::before{content:"";width:28px;height:1px;flex:none;background:var(--grad-line)}
.page-head .h1{margin-top:12px;min-width:0;overflow-wrap:anywhere}
.page-head .lead{margin-top:12px;max-width:68ch}
.page-head__title{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:12px;min-width:0}
.page-head__title .h1{margin-top:0}
.page-head__aside,.page-head > .tabs{flex:none;display:flex;align-items:center;gap:8px;margin-top:18px;max-width:100%;min-width:0}
.breadcrumbs + .page-head{padding-top:8px}
.result-count{display:inline-flex;align-items:center;flex:none;height:28px;padding:0 12px;border-radius:var(--r-round);background:var(--s2);box-shadow:inset 0 0 0 1px var(--line-2);font:600 12.5px/1 var(--font-body);color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums}
.catalog-tabs svg{width:16px;height:16px;color:var(--t3)}
.catalog-tabs .is-active svg{color:var(--nardo-200)}

/* ---------- 2. Filter toolbar ---------- */
/* One row: [title search][pills][Filtrele]. The pills never wrap: when they run out of room they scroll sideways
   (edge fades follow the scroll position, catalog.js; the sort pill stays pinned at the right end; a mouse gets
   ‹ › step buttons, as on the chip rails). On desktop the toolbar stacks below a container width chosen by its field
   count (§12) — never by text metrics, so a late web-font swap can't hop pills between lines (CLS); tablets/touch
   always stack; browsers without field-sizing wrap (§12). */
.filter-bar{position:relative;z-index:6;container:fbar/inline-size;margin:0 0 28px;padding:8px;border-radius:var(--r-lg);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1);transition:box-shadow var(--dur-base) var(--ease-out),background var(--dur-base)}
.filter-bar:has(+ .catalog-active){margin-bottom:14px}
.filter-bar.is-stuck{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-2)}
.filter-bar__sentinel{height:1px;margin-bottom:-1px;pointer-events:none}
.filter-bar__row{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0}
/* the strip frame (the row's flex item): the pill scroller + its pointer-only step buttons */
.filter-bar__strip{position:relative;display:flex;flex:0 1 auto;min-width:0}
.filter-bar__fields{--fade-l:0px;--fade-r:0px;display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scroll-padding-inline:28px calc(48px + var(--sort-w,0px) + var(--peek,0px));overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--fade-r)),transparent)}
.filter-bar__fields::-webkit-scrollbar{display:none}
.filter-bar__fields.can-prev{--fade-l:28px}
.filter-bar__fields.can-next{--fade-r:40px}
/* the sort pill stays pinned at the strip's right end while the other pills scroll beneath it, so the most-used
   control is never hidden; the right fade then sits just before it (--sort-w = its width, whole px, catalog.js) */
@media (min-width: 561px){
  .filter-bar__fields > .is-sort{position:sticky;right:0;z-index:1}
  /* while pinned, a bar-coloured ring (follows the radius; ≥ r·(√2−1) wide) masks the pill scrolling beneath its round ends */
  .filter-bar__fields.can-next > .is-sort{outline:10px solid var(--s1);outline-offset:0}
  /* the fade never reaches full transparency before the ring, so a pill running on under the sort pill peeks (a
     swipe hint); when none is cut by a clear amount (one ends just short of the ring, or one only grazes it),
     catalog.js moves the fade --peek px earlier and lets it run out (--peek-a:0), so the last pill in view fades
     out with its end (chevron) gone instead of looking complete. The mask turns opaque again 2px inside the ring,
     so the sort pill's edge never lands on a half-covered pixel */
  .filter-bar__fields.can-next{-webkit-mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--sort-w,0px) - var(--peek,0px) - 56px),rgba(0,0,0,var(--peek-a,.28)) calc(100% - var(--sort-w,0px) - var(--peek,0px) - 10px),rgba(0,0,0,var(--peek-a,.28)) calc(100% - var(--sort-w,0px) - 2px),black calc(100% - var(--sort-w,0px) - 2px));mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--sort-w,0px) - var(--peek,0px) - 56px),rgba(0,0,0,var(--peek-a,.28)) calc(100% - var(--sort-w,0px) - var(--peek,0px) - 10px),rgba(0,0,0,var(--peek-a,.28)) calc(100% - var(--sort-w,0px) - 2px),black calc(100% - var(--sort-w,0px) - 2px))}
  /* mouse: the › step sits in that fade, just clear of the pinned pill's ring */
  .filter-bar__strip > .filter-bar__step.is-next{right:calc(var(--sort-w,0px) + 10px)}
}
/* mouse (no swipe): ‹ › step buttons over the fades (catalog.js shows them while there is more to scroll to), so
   the button — not a peeking pill — is the "more" cue: both fades lengthen and run out under the buttons, and the
   focus insets clear them */
@media (min-width: 561px) and (hover:hover) and (pointer:fine){
  .filter-bar__fields{scroll-padding-inline:72px calc(104px + var(--sort-w,0px))}
  .filter-bar__fields.can-prev{--fade-l:72px}
  .filter-bar__fields.can-next{-webkit-mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--sort-w,0px) - 104px),transparent calc(100% - var(--sort-w,0px) - 40px),transparent calc(100% - var(--sort-w,0px) - 2px),black calc(100% - var(--sort-w,0px) - 2px));mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--sort-w,0px) - 104px),transparent calc(100% - var(--sort-w,0px) - 40px),transparent calc(100% - var(--sort-w,0px) - 2px),black calc(100% - var(--sort-w,0px) - 2px))}
}
.filter-bar__actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto;padding-left:4px}
.filter-bar__toggle{flex:none;height:40px;padding:0 14px 0 12px}
/* open disclosure reads as pressed (the .btn.is-active look) and its chevron flips, so it can't pass for "Filtrele" */
.filter-bar__toggle::after{content:"";flex:none;width:6px;height:6px;margin:-4px 1px 0 0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-fast),margin var(--dur-fast)}
.filter-bar__toggle[aria-expanded="true"]{background:var(--accent-soft);color:var(--nardo-100);border-color:var(--accent-line)}
.filter-bar__toggle[aria-expanded="true"]::after{margin-top:4px;transform:rotate(-135deg)}
.filter-bar__badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-round);background:var(--accent-soft);color:var(--nardo-100);font:700 11px/1 var(--font-body)}
/* one field = a pill holding a micro label + a borderless select/input */
.field-inline{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 30px 0 14px;border-radius:var(--r-round);background:var(--s2);box-shadow:inset 0 0 0 1px transparent;white-space:nowrap;flex:0 0 auto;min-width:0;cursor:pointer;transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.field-inline::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);transform:rotate(45deg);pointer-events:none;transition:border-color var(--dur-fast)}
.field-inline:hover{background:var(--s3)}
.field-inline:hover::after{border-color:var(--t2)}
.field-inline:has(:focus-visible){box-shadow:inset 0 0 0 2px var(--nardo-300)}
.field-inline > span{flex:none;font:600 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.field-inline .select,.field-inline .input{flex:1 1 auto;width:auto;min-width:0;max-width:176px;height:38px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font:600 13.5px/1 var(--font-body);color:var(--t1);cursor:pointer;field-sizing:content}
/* the select reaches under the chevron, so value + arrow are one hit area (the micro label opens it via catalog.js) */
.field-inline .select{max-width:206px;margin-right:-30px;padding-right:30px}
.field-inline .select:hover,.field-inline .select:focus,.field-inline .input:hover,.field-inline .input:focus{background:transparent;border-color:transparent;box-shadow:none}
.field-inline .select:focus-visible,.field-inline .input:focus-visible{outline:0}
/* a chosen value reads as "set": lilac value */
.field-inline:not(.is-sort) .select:has(option:checked:not([value=""])){color:var(--nardo-100)}
/* the title search field */
.field-inline.is-search{flex:1 1 200px;min-width:160px;max-width:360px;padding:0 14px;cursor:text}
.field-inline.is-search::after{display:none}
.field-inline.is-search svg{width:17px;height:17px;flex:none;color:var(--t3)}
.field-inline.is-search .input{max-width:none;width:100%;field-sizing:fixed;font-weight:500;cursor:text;text-overflow:ellipsis}
.field-inline.is-search .input::placeholder{color:var(--t3);font-weight:500}
.field-inline.is-search .input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ---------- 3. Active filter chips + chip rails ---------- */
.catalog-active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 26px}
.catalog-active__label{font:600 10.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-right:2px}
.catalog-active .chip{padding:0 8px 0 13px;gap:6px;color:var(--nardo-100);border-color:var(--accent-line);background:var(--accent-soft);max-width:100%}
.catalog-active .chip span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.catalog-active .chip svg{width:14px;height:14px;opacity:.7;transition:opacity var(--dur-fast)}
.catalog-active .chip:hover svg{opacity:1}
.catalog-active__clear{margin-left:4px;font:600 13px/1 var(--font-body);color:var(--t3);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px;transition:color var(--dur-fast)}
.catalog-active__clear:hover{color:var(--t1)}
/* rail of sibling links under the head (genres, nearby years): one line that scrolls sideways — a wrapped cloud
   re-flowed chips between lines when the web font swapped in (CLS); edge fades + desktop step buttons via catalog.js */
.catalog-rail-wrap{position:relative;margin:-8px 0 24px;--fade-l:0px;--fade-r:0px}
.catalog-rail-wrap.can-prev{--fade-l:56px}
.catalog-rail-wrap.can-next{--fade-r:56px}
/* 6px padding (pulled back with negative margins) = room for the 2px + 3px-offset focus ring inside the clipping scroller */
.catalog-rail{display:flex;flex-wrap:nowrap;gap:8px;margin:-2px -6px;padding:6px;overflow-x:auto;scroll-padding-inline:56px;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--fade-r)),transparent);mask-image:linear-gradient(90deg,transparent,black var(--fade-l),black calc(100% - var(--fade-r)),transparent)}
.catalog-rail::-webkit-scrollbar{display:none}
.catalog-rail .chip{flex:none;height:36px;padding:0 15px}
.catalog-rail__step{position:absolute;top:50%;z-index:2;width:36px;height:36px;margin-top:-18px;padding:0;border-radius:var(--r-round);border:1px solid var(--line-2);background:rgba(var(--scrim-rgb),.86);color:var(--t1);display:grid;place-items:center;box-shadow:var(--shadow-1);transition:background var(--dur-fast),border-color var(--dur-fast)}
.catalog-rail__step svg{width:18px;height:18px}
.catalog-rail__step.is-prev{left:0}
.catalog-rail__step.is-next{right:0}
.catalog-rail__step:hover{background:var(--s3);border-color:var(--accent-line)}
@media not all and (hover:hover) and (pointer:fine){ .catalog-rail__step{display:none} }
.catalog-rail .chip-accent{color:var(--t1)}
.catalog-rail__all{color:var(--t3)}
.catalog-rail__all svg{width:14px;height:14px;transition:transform var(--dur-fast)}
.catalog-rail__all:hover svg{transform:translateX(2px)}
.catalog-grid{margin-top:4px}

/* ---------- 4. Latest episodes — grouped by day ---------- */
.latest-group + .latest-group{margin-top:clamp(36px,4vw,56px)}
.latest-group__head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:18px}
.latest-group__title{font:800 clamp(22px,2vw,28px)/1 var(--font-display);font-variation-settings:"opsz" 48,"wdth" var(--display-wdth);letter-spacing:var(--track-display);color:var(--t1)}
.latest-group__meta{font:600 11px/1 var(--font-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--t3)}
.latest-group__rule{flex:1 1 60px;align-self:center;height:1px;min-width:40px;background:linear-gradient(90deg,var(--line-2),transparent)}
.latest-group .episode-grid{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}

/* ---------- 5. Genre tiles (/turler) ---------- */
.genre-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 var(--sp-9)}
.genre-index > li{min-width:0;display:flex}
.genre-card{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;min-height:176px;padding:16px 18px 14px;border-radius:var(--r-md);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1);color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base)}
.genre-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(240px 150px at 100% 0,rgba(var(--violet-rgb),.2),transparent 70%);transition:opacity var(--dur-base);opacity:.85}
.genre-index > li:nth-child(3n+2) .genre-card::before{background:radial-gradient(240px 150px at 100% 0,rgba(var(--pink-rgb),.13),transparent 70%)}
.genre-index > li:nth-child(3n) .genre-card::before{background:radial-gradient(240px 150px at 100% 0,rgba(var(--lilac-rgb),.12),transparent 70%)}
.genre-card__index{font:800 12px/1 var(--font-display);letter-spacing:.06em;color:var(--nardo-200)}
.genre-card__name{margin-top:10px;font:800 clamp(22px,1.9vw,28px)/1 var(--font-display);font-variation-settings:"opsz" 48,"wdth" var(--display-wdth);letter-spacing:var(--track-display);color:var(--t1);overflow-wrap:anywhere}
.genre-card__desc{font:500 13px/1.45 var(--font-body);color:var(--t3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.genre-card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px dashed rgba(var(--lilac-rgb),.16);font:600 12.5px/1.2 var(--font-body);color:var(--t2);font-variant-numeric:tabular-nums}
.genre-card__foot i{font-style:normal;color:var(--t3);margin:0 2px}
.genre-card__go{width:34px;height:34px;flex:none;border-radius:var(--r-round);display:grid;place-items:center;border:1px solid var(--line-2);color:var(--t2);transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast)}
.genre-card__go svg{width:16px;height:16px;transition:transform var(--dur-fast)}
.genre-card.is-empty .genre-card__name{color:var(--t2)}
.genre-card.is-empty .genre-card__foot{color:var(--t3)}
.genre-card:focus-visible{outline-offset:3px;border-radius:var(--r-md)}
@media (hover:hover) and (pointer:fine){
  .genre-card:hover{transform:translateY(-4px);background:var(--s2);box-shadow:inset 0 0 0 1px var(--accent-line),var(--shadow-1)}
  .genre-card:hover::before{opacity:1}
  .genre-card:hover .genre-card__go{background:var(--accent-soft);border-color:var(--accent-line);color:var(--t1)}
  .genre-card:hover .genre-card__go svg{transform:translateX(2px)}
}

/* ---------- 6. Year index (/yillar) — decade rows of year tiles ---------- */
.year-index{display:grid;gap:12px;margin:0 0 var(--sp-9)}
.year-index__decade{display:grid;grid-template-columns:176px minmax(0,1fr);gap:14px 28px;align-items:start;padding:20px 0 8px;border-top:1px dashed rgba(var(--lilac-rgb),.14)}
.year-index__decade:first-child{border-top:0;padding-top:0}
.year-index__label{padding-top:6px;font:800 30px/1 var(--font-display);font-variation-settings:"opsz" 96,"wdth" var(--display-wdth);letter-spacing:var(--track-display);color:var(--t1)}
.year-index__label small{display:block;margin-top:10px;font:600 10.5px/1 var(--font-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--t3)}
.year-index__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.year-index__grid > li{min-width:0}
.year-index__tile{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;height:76px;padding:0 16px;border-radius:var(--r-md);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),color var(--dur-fast),transform var(--dur-base) var(--ease-out)}
.year-index__tile b{font:800 32px/.9 var(--font-display);font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.year-index__tile small{font:600 10.5px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--nardo-200)}
.year-index__tile.is-current{color:var(--t1);box-shadow:inset 0 0 0 1px var(--accent-line)}
.year-index__tile.is-current::before{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--grad-line)}
@media (hover:hover) and (pointer:fine){
  .year-index__tile:hover{background:var(--s2);color:var(--t1);box-shadow:inset 0 0 0 1px var(--accent-line);transform:translateY(-2px)}
  .year-index__tile:hover b{background:var(--grad-shine);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* ---------- 7. Calendar (/takvim) ---------- */
.week-nav{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-round);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1);min-width:0}
.week-nav__step{width:36px;height:36px;flex:none;border-radius:var(--r-round);display:grid;place-items:center;color:var(--t2);transition:background var(--dur-fast),color var(--dur-fast)}
.week-nav__step svg{width:18px;height:18px}
.week-nav__step:hover{background:var(--s3);color:var(--t1)}
.week-nav__range{flex:1 1 auto;padding:0 12px;text-align:center;font:600 13.5px/1 var(--font-body);color:var(--t1);white-space:nowrap;font-variant-numeric:tabular-nums}
.week-nav__today{flex:none}
/* day jump strip (≤1023, where the week no longer fits one row): 7 anchors to the day cards, today accented;
   44px days 8px apart (the whole week fits from ~388px; narrower, the strip scrolls — see ≤560) */
.calendar-jump{display:none}
.calendar-jump ol{display:flex;gap:8px}
.calendar-jump li{flex:1 0 44px;min-width:0}
.calendar-jump a{position:relative;display:grid;place-items:center;align-content:center;gap:4px;height:56px;border-radius:var(--r-md);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1);color:var(--t2);font-variant-numeric:tabular-nums;transition:background var(--dur-fast),color var(--dur-fast)}
.calendar-jump a span{font:600 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.calendar-jump a b{font:800 20px/.9 var(--font-display);font-variation-settings:"opsz" 96,"wdth" 75}
.calendar-jump a.is-empty{background:transparent;box-shadow:inset 0 0 0 1px var(--line-1);color:var(--t3)}
.calendar-jump a[aria-current]{color:var(--t1);background:linear-gradient(180deg,rgba(var(--violet-rgb),.16),transparent),var(--s1);box-shadow:inset 0 0 0 1px var(--accent-line)}
.calendar-jump a[aria-current]::before{content:"";position:absolute;left:10px;right:10px;top:0;height:2px;border-radius:0 0 2px 2px;background:var(--grad-line)}
.calendar-jump a[aria-current] span{color:var(--nardo-200)}
/* the week frame is a size container: columns follow the space the week really gets (rail open/closed, tablet…) */
.calendar-frame{container:calweek/inline-size;margin:4px 0 var(--sp-9)}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:start}
.calendar-day{position:relative;container:calday/inline-size;min-width:0;display:flex;flex-direction:column;border-radius:var(--r-md);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1);overflow:hidden}
.calendar-day.is-empty{background:transparent;box-shadow:none;border:1px dashed var(--line-2)}
.calendar-day.is-today{background:linear-gradient(180deg,rgba(var(--violet-rgb),.12),transparent 180px),var(--s1);box-shadow:inset 0 0 0 1px var(--accent-line)}
.calendar-day.is-today::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-line)}
.calendar-day__head{display:flex;align-items:center;gap:10px;min-width:0;padding:14px 12px 12px 14px;border-bottom:1px dashed rgba(var(--lilac-rgb),.14)}
.calendar-day.is-empty .calendar-day__head{border-bottom-color:transparent;padding-bottom:6px}
.calendar-day__date{flex:none;font:800 30px/.9 var(--font-display);font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:-0.01em;color:var(--t1);font-variant-numeric:tabular-nums}
.calendar-day__label{display:grid;gap:3px;min-width:0;flex:1 1 auto}
.calendar-day__name{font:700 13.5px/1.1 var(--font-body);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-day__label small{font:500 11.5px/1.1 var(--font-body);color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-day__head .badge{flex:none}
.calendar-day.is-today .calendar-day__date{background:var(--grad-shine);-webkit-background-clip:text;background-clip:text;color:transparent}
.calendar-day.is-past .calendar-day__date,.calendar-day.is-past .calendar-day__name{color:var(--t3)}
.calendar-day__none{padding:0 14px 14px;font:500 13px/1.4 var(--font-body);color:var(--t3)}
.calendar-day__list{display:grid;gap:2px;padding:6px}
.calendar-item{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;min-height:44px;padding:6px;border-radius:var(--r-sm);color:inherit;transition:background var(--dur-fast)}
.calendar-item__art{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-xs);overflow:hidden;background:var(--s3)}
.calendar-item__art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.1);pointer-events:none}
.calendar-item__art img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.calendar-item__tag{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-round);background:rgba(var(--scrim-rgb),.82);box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.14);font:700 10.5px/1 var(--font-body);letter-spacing:.03em;color:var(--t1);white-space:nowrap;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
.calendar-item.is-episode .calendar-item__tag{color:var(--nardo-100)}
.calendar-item__text{display:grid;gap:3px;min-width:0}
.calendar-item__text strong{font:600 13.5px/1.3 var(--font-body);color:var(--t1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;transition:color var(--dur-fast)}
.calendar-item__text small{font:500 12px/1.3 var(--font-body);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-item:focus-visible{outline-offset:1px;border-radius:var(--r-sm)}
/* narrow day columns (7-up grid): tile-like head, art stacked above text */
@container calday (max-width: 230px){
  .calendar-day__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;padding:14px 12px 12px}
  .calendar-day__label{grid-column:1/-1;grid-row:2}
  .calendar-day__head .badge{grid-column:2;grid-row:1;align-self:center}
  .calendar-item{grid-template-columns:minmax(0,1fr);gap:8px;padding:6px 6px 8px}
  .calendar-day__list{gap:4px}
}
/* 7-up needs ~134px per day; below that 3-up (+ jump strip), 2-up, then one column. Sunday (7th) spans the last row. */
@container calweek (max-width: 999px){
  .calendar-jump{display:block;margin-bottom:16px}
  .calendar{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calendar > .calendar-day:nth-child(7){grid-column:1/-1}
  .calendar > .calendar-day:nth-child(7) .calendar-day__list{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
}
@container calweek (max-width: 859px){
  .calendar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container calweek (max-width: 519px){
  .calendar{grid-template-columns:minmax(0,1fr)}
  .calendar-day.is-empty{flex-direction:row;align-items:center;justify-content:space-between}
  .calendar-day.is-empty .calendar-day__head{padding-bottom:14px;flex:1 1 auto}
  .calendar-day.is-empty .calendar-day__none{padding:0 14px 0 0;flex:none}
  .calendar-item{grid-template-columns:112px minmax(0,1fr)}
}
@media (hover:hover) and (pointer:fine){
  .calendar-item:hover{background:var(--s-raised)}
  .calendar-item:hover .calendar-item__text strong{color:var(--nardo-100)}
  .calendar-item:hover .calendar-item__art img{transform:scale(1.05)}
}

/* ---------- 8. Collections ---------- */
/* 8a. card — ticket stub: art (cover or fanned posters) + perforated plate */
.collection-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-md);color:inherit;scroll-snap-align:start;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.collection-card:focus-visible{outline:2px solid var(--nardo-300);outline-offset:4px}
.collection-card__art{position:relative;flex:none;aspect-ratio:16/9;border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;background:radial-gradient(120% 95% at 50% 118%,rgba(var(--violet-rgb),.42),transparent 62%),radial-gradient(60% 70% at 100% 0,rgba(var(--pink-rgb),.12),transparent 70%),var(--s2)}
.collection-card__art::after{content:"";position:absolute;inset:0;border:1px solid rgba(var(--lilac-rgb),.1);border-bottom:0;border-radius:inherit;pointer-events:none;z-index:var(--z-card-ui);transition:border-color var(--dur-base)}
.collection-card__art > img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.collection-card__stack{--n:4;position:absolute;inset:0}
.collection-card__stack img{--k:0;--o:calc(var(--k) - (var(--n) - 1) / 2);position:absolute;left:50%;bottom:-14%;width:30%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-xs);box-shadow:0 0 0 1px rgba(var(--scrim-rgb),.9),var(--shadow-1);transform-origin:50% 130%;transform:translateX(-50%) rotate(calc(var(--o) * 11deg));z-index:calc(10 - var(--k));transition:transform var(--dur-base) var(--ease-out)}
.collection-card__art .badge{position:absolute;left:10px;top:10px;z-index:var(--z-card-ui);pointer-events:none}
.collection-card .card-body{padding:12px 14px 14px}
.collection-card__kicker{font:600 10.5px/1 var(--font-body);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--nardo-200);margin-bottom:7px}
.collection-card .card-title{font:700 17px/1.2 var(--font-display);font-variation-settings:"opsz" 24,"wdth" 88;letter-spacing:-0.005em}
/* two-line blurb: height:auto lifts the one-line card-meta box (app.css) so the clamp (and its ellipsis) shows */
.collection-card .card-body > .card-meta{grid-column:1/-1;margin-top:6px;height:auto;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.45}
@media (hover:hover) and (pointer:fine){
  .collection-card:hover,.collection-card:focus-visible{transform:translateY(-5px);box-shadow:var(--glow-2)}
  .collection-card:hover .collection-card__art::after{border-color:var(--accent-line)}
  .collection-card:hover .card-body{background:var(--s3)}
  .collection-card:hover .collection-card__art > img{transform:scale(1.04)}
  .collection-card:hover .collection-card__stack img{transform:translateX(-50%) rotate(calc(var(--o) * 16deg)) translateY(-4%)}
}
.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 20px}
.collection-grid > *{min-width:0}

/* 8b. collection page — framed cover screen (inset, never under the header) */
.collection-crumbs,.catalog-crumbs{padding-top:clamp(22px,2.6vw,36px)}
.collection-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(340px,40vw,440px);margin-top:4px;border-radius:var(--r-xl);background:radial-gradient(640px 360px at 0 100%,rgba(var(--violet-rgb),.22),transparent 70%),var(--s1);box-shadow:inset 0 0 0 1px var(--line-1)}
.collection-banner::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(var(--lilac-rgb),.1);pointer-events:none;z-index:3}
.collection-banner__media{position:absolute;inset:0 0 0 28%;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent 0,black 46%);mask-image:linear-gradient(90deg,transparent 0,black 46%)}
.collection-banner__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.75}
.collection-banner__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--scrim-rgb),.85),rgba(var(--scrim-rgb),0) 60%)}
.collection-banner__fan{--n:4;position:absolute;right:clamp(28px,4vw,64px);bottom:-18%;width:clamp(260px,26vw,360px);height:78%;z-index:1;pointer-events:none}
.collection-banner__fan img{--k:0;--o:calc(var(--k) - (var(--n) - 1) / 2);position:absolute;left:50%;bottom:0;width:44%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-sm);box-shadow:0 0 0 1px rgba(var(--scrim-rgb),.9),var(--shadow-2);transform-origin:50% 135%;transform:translateX(-50%) rotate(calc(var(--o) * 12deg));z-index:calc(10 - var(--k))}
.collection-banner__body{position:relative;z-index:2;max-width:min(640px,58%);padding:clamp(24px,3.6vw,48px)}
.collection-banner__body .eyebrow{display:flex;align-items:center;gap:10px;color:var(--nardo-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collection-banner__body .eyebrow::before{content:"";width:28px;height:1px;flex:none;background:var(--grad-line)}
.collection-banner__title{margin-top:14px;overflow-wrap:anywhere}
.collection-banner__text{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--t2);max-width:56ch;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.collection-banner__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.collection-banner__meta li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-round);background:rgba(var(--scrim-rgb),.55);box-shadow:inset 0 0 0 1px var(--line-2);font:600 12.5px/1 var(--font-body);color:var(--t2);white-space:nowrap}
.collection-banner__meta svg{width:14px;height:14px;color:var(--nardo-200)}
.collection-banner .share{margin-top:18px}
.collection-empty{margin:var(--section-gap) 0 var(--sp-9)}

/* 8c. ranked list — numbered stubs, top three in shine */
.collection-rank{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:30px 18px}
.collection-rank__item{min-width:0;display:flex;flex-direction:column}
.collection-rank__num{display:flex;align-items:center;gap:10px;margin-bottom:10px;font:800 22px/1 var(--font-display);font-variation-settings:"opsz" 96,"wdth" 75;letter-spacing:.01em;color:var(--t3)}
.collection-rank__num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.collection-rank__item.is-top .collection-rank__num{color:transparent;background:var(--grad-shine);-webkit-background-clip:text;background-clip:text}
.collection-rank__item.is-top .collection-rank__num::after{background:linear-gradient(90deg,var(--accent-line),transparent)}
.collection-rank__item .card{flex:1}
.collection-rank__note{margin-top:10px;padding-left:10px;border-left:2px solid var(--accent-line);font:italic 500 13px/1.5 var(--font-body);color:var(--t2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 9. Person profile ---------- */
.person-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"portrait head" "portrait rest";column-gap:clamp(24px,3.4vw,44px);align-items:start;margin-top:4px;padding:clamp(22px,3.2vw,40px);border-radius:var(--r-xl);background:radial-gradient(420px 300px at 0 0,rgba(var(--violet-rgb),.2),transparent 70%),radial-gradient(520px 260px at 100% 100%,rgba(var(--pink-rgb),.08),transparent 70%),var(--s1);box-shadow:inset 0 0 0 1px var(--line-1)}
.person-hero__portrait{grid-area:portrait;align-self:center;width:clamp(128px,13vw,176px);aspect-ratio:1;padding:3px;border-radius:var(--r-round);background:var(--grad-line);box-shadow:var(--shadow-1)}
.person-hero__portrait img{width:100%;height:100%;border-radius:inherit;object-fit:cover;background:var(--s2);border:4px solid var(--s1)}
.person-hero__head{grid-area:head;min-width:0;align-self:end}
.person-hero__head .eyebrow{display:flex;align-items:center;gap:10px;color:var(--nardo-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-hero__head .eyebrow::before{content:"";width:28px;height:1px;flex:none;background:var(--grad-line)}
.person-hero__head .h1{margin-top:12px;overflow-wrap:anywhere}
.person-hero__rest{grid-area:rest;min-width:0}
.person-hero__facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.person-hero__facts li{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 10px;border-radius:var(--r-round);background:rgba(var(--lilac-rgb),.04);box-shadow:inset 0 0 0 1px var(--line-2);min-width:0;max-width:100%}
.person-hero__facts svg{width:16px;height:16px;flex:none;color:var(--nardo-200)}
.person-hero__facts li > span{display:grid;gap:1px;min-width:0;font:600 13.5px/1.15 var(--font-body);color:var(--t1);overflow:hidden;text-overflow:ellipsis}
/* line-height 1.3 keeps the Turkish capital diacritics (Ğ breve, İ dot) inside the clipping span */
.person-hero__facts small{font:600 10.5px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.bio{margin-top:18px;max-width:72ch}
.bio__text{font-size:15.5px;line-height:1.65;color:var(--t2);max-width:none}
/* clamped from the first paint when scripts run (no collapse shift after load); catalog.js reveals the toggle */
@media (scripting: enabled){ .bio:not(.is-expanded) .bio__text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} }
.bio__toggle{display:inline-flex;align-items:center;gap:6px;height:36px;margin-top:6px;padding:0;background:none;border:0;font:600 13.5px/1 var(--font-body);color:var(--accent);transition:color var(--dur-fast)}
.bio__toggle svg{width:16px;height:16px;transition:transform var(--dur-base) var(--ease-out)}
.bio__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.bio__toggle:hover{color:var(--accent-hover)}
.catalog-works .section-head{flex-wrap:wrap}
.catalog-empty{margin:var(--section-gap) 0 var(--sp-9)}

/* ---------- 10. Search page ---------- */
/* the heading carries the user's term: from 768px it stays one line with the result count beside it, so a late
   web-font swap can't change its line count or push the count onto a second line (CLS). Only the term shortens
   (ellipsis); the closing quote + "için sonuçlar" always show. Clip box padded for descenders and İ/Ç marks. */
@media (min-width: 768px){
  .search-page .page-head__title{flex-wrap:nowrap}
  .search-page .page-head__title .h1{display:flex;min-width:0;white-space:nowrap}
  .search-page__q{min-width:0;overflow:hidden;text-overflow:ellipsis;padding-block:.14em .2em;margin-block:-.14em -.2em}
  .search-page__suffix{flex:none}
}
.search-page__form{position:relative;display:flex;align-items:center;gap:14px;height:68px;margin:0 0 12px;padding:0 8px 0 22px;border-radius:var(--r-lg);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow var(--dur-fast),background var(--dur-fast)}
.search-page__form:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent-line),0 0 0 4px rgba(var(--violet-rgb),.14)}
.search-page__form > svg{width:22px;height:22px;flex:none;color:var(--nardo-200)}
.search-page__form input[type="search"]{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:500 19px/1 var(--font-body);color:var(--t1);outline:0}
.search-page__form input[type="search"]::placeholder{color:var(--t3)}
.search-page__form input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-page__form .btn{flex:none;height:50px;padding:0 26px}
.search-page__results > .section:first-child{margin-top:clamp(8px,1.5vw,20px)}
.search-page__none{max-width:none;padding:22px 20px;border-radius:var(--r-md);border:1px dashed var(--line-2);font:500 14px/1.4 var(--font-body);color:var(--t3)}
.search-page .search-actor-hint{margin:0 0 12px}
.search-page__actors{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:28px 18px}
.search-page__actors > li{min-width:0}
.search-page__actors .person-card{height:100%}
.search-page__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:var(--section-gap) 0 var(--sp-9);padding:16px 18px;border-radius:var(--r-lg);background:var(--s1);box-shadow:inset 0 0 0 1px var(--line-1)}
.search-page__cta > svg{width:20px;height:20px;flex:none;color:var(--nardo-200)}
.search-page__cta p{flex:1 1 280px;min-width:0;max-width:none;font:600 14.5px/1.45 var(--font-body);color:var(--t1)}
.search-page__cta p span{display:block;font-weight:500;font-size:13.5px;color:var(--t3)}
.search-page__empty{margin:8px 0 var(--sp-9)}
.search-page__request{margin-top:14px}
.search-page__request .btn{margin-top:0;max-width:100%;gap:0}
.search-page__request .btn svg{margin-right:9px}
/* a long search term shortens with an ellipsis instead of pushing the button out of the card; the clip box is
   padded past the button's tight line box so capital İ/Ç/Ş marks are not cut (margins cancel the padding). The
   closing quote + "için istek gönder" sit outside it (as in the h1), so the label never loses its closing quote. */
.search-page__term{min-width:0;overflow:hidden;text-overflow:ellipsis;padding-block:.25em;margin-block:-.25em}
.search-page__request .search-page__suffix{flex:none}

/* ---------- 11. Touch targets + no focus zoom ---------- */
@media (pointer:coarse){
  .field-inline,.filter-bar__toggle{height:44px}
  .field-inline .select,.field-inline .input{height:44px}
  .week-nav__step{width:44px;height:44px}
  .catalog-rail .chip,.catalog-active .chip,.catalog-active__clear{min-height:44px}
  .catalog-active__clear{display:inline-flex;align-items:center}
  .bio__toggle{height:44px}
}
/* iOS zooms into controls under 16px: the borderless pill controls follow the foundation's 16px rule */
@media (pointer:coarse),(max-width: 767px){
  .field-inline .select,.field-inline .input{font-size:16px}
}

/* ---------- 12. Responsive (ladder: ≤1279 · ≤1023 · ≤767 · ≤560 · ≤374 · phone landscape) ---------- */
/* sticky toolbar (laptop + desktop; touch screens scroll it away, see the touch block below). Only a one-row bar is
   pinned: once it stacks (below) catalog.js adds .is-stacked and the ~104px bar scrolls away with the page, as it
   does on touch — pinned under the top bar it covered close to a quarter of a 1280×800 / 1366×768 laptop screen */
@media (min-width: 1024px){
  .filter-bar{position:sticky;top:calc(var(--header-h) + 10px)}
  .filter-bar.is-stacked{position:relative;top:auto}
}
/* fine pointer ≥1024: once the toolbar's own width can't hold everything (with web-font AND fallback metrics) it
   stacks — search + actions on top, pills on a full row (no search: pills, then actions). Thresholds follow the
   field count only (≈40px above what the fallback-font toolbar needs): 1060px for ≤6 pills + search or 7 pills
   alone, 1200px for .is-long (7+ pills + search, set in components/filter-bar). */
@media (min-width: 1024px) and (hover:hover) and (pointer:fine){
  @container fbar (max-width: 1059px){
    .filter-bar__row{flex-wrap:wrap;row-gap:8px}
    .filter-bar__strip{order:3;flex:1 1 100%}
    .filter-bar:not(.has-search) .filter-bar__strip{order:0}
    .filter-bar .field-inline.is-search{flex:1 1 0;max-width:none}
  }
  @container fbar (min-width: 1060px) and (max-width: 1199px){
    .filter-bar.is-long .filter-bar__row{flex-wrap:wrap;row-gap:8px}
    .filter-bar.is-long .filter-bar__strip{order:3;flex:1 1 100%}
    .filter-bar.is-long:not(.has-search) .filter-bar__strip{order:0}
    .filter-bar.is-long .field-inline.is-search{flex:1 1 0;max-width:none}
  }
}
/* tablet widths and touch screens (16px pills): the title search + actions share the top row and the pills get the
   whole bar width below (no title field → one row). Same stacked shape as the narrow desktop toolbar above.
   On touch ≥1024 that two-row bar is not pinned: stuck under the top bar it would cover a quarter of a landscape
   tablet (1024×768) while the grid scrolls — like the <1024 tablet shell, it scrolls away with the page. */
@media (min-width: 561px) and (max-width: 1023px),(min-width: 1024px) and (pointer:coarse),(min-width: 1024px) and (hover:none){
  .filter-bar{position:relative;top:auto}
  .filter-bar.has-search .filter-bar__row{flex-wrap:wrap;row-gap:8px}
  .filter-bar.has-search .filter-bar__strip{order:3;flex:1 1 100%}
  .filter-bar.has-search .field-inline.is-search{flex:1 1 0;max-width:none}
}
/* no `field-sizing` (Firefox, older Safari): every select is as wide as its longest option, so the one-line strip
   would hide pills from mouse users — there the pills wrap instead (the Chromium toolbar above is untouched) */
@supports not (field-sizing: content){
  @media (min-width: 561px) and (hover:hover) and (pointer:fine){
    .filter-bar__row{flex-wrap:wrap;row-gap:8px}
    .filter-bar__strip{order:3;flex:1 1 100%}
    .filter-bar__fields{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
    .filter-bar__fields > .is-sort{position:static;outline:0}
    .filter-bar:not(.has-search) .filter-bar__strip{order:0;flex:1 1 0}
    .filter-bar .field-inline.is-search{flex:1 1 0;max-width:none}
  }
}
/* ≤1279: 4-up genre tiles → 3-up (a lone last tile spans the row instead of dangling); collection cards may go
   narrower so tablets fit three and auto-fit stretches a short list across the row instead of leaving holes */
@media (max-width: 1279px){
  .field-inline.is-search{flex:0 1 240px}
  .collection-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
  .genre-index{grid-template-columns:repeat(3,minmax(0,1fr))}
  .genre-index > li:last-child:nth-child(3n+1){grid-column:1/-1}
  .collection-banner__body{max-width:min(600px,64%)}
}
/* ≤1023 (tablet shell): stacked cover screen / decades; chip rails + day jump strip bleed to the screen edge */
@media (max-width: 1023px){
  .calendar-jump{margin:0 calc(-1*max(var(--gutter),var(--safe-r))) 16px calc(-1*max(var(--gutter),var(--safe-l)))}
  .calendar-jump ol{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r));scroll-padding-inline:max(var(--gutter),var(--safe-l))}
  .calendar-jump ol::-webkit-scrollbar{display:none}
  .catalog-rail-wrap{margin-inline:calc(-1*max(var(--gutter),var(--safe-l))) calc(-1*max(var(--gutter),var(--safe-r)))}
  .catalog-rail{margin-inline:0;padding-inline:max(var(--gutter),var(--safe-l)) max(var(--gutter),var(--safe-r));scroll-padding-inline:max(var(--gutter),var(--safe-l));-webkit-mask-image:none;mask-image:none}
  .year-index__decade{grid-template-columns:minmax(0,1fr);gap:14px}
  .year-index__label{display:flex;align-items:baseline;gap:12px;padding-top:0}
  .year-index__label small{margin-top:0}
  .collection-banner{flex-direction:column;align-items:stretch;min-height:0}
  .collection-banner__media{position:relative;inset:auto;height:clamp(180px,42vw,300px);z-index:0;-webkit-mask-image:linear-gradient(180deg,black 40%,transparent);mask-image:linear-gradient(180deg,black 40%,transparent)}
  .collection-banner__media::after{display:none}
  .collection-banner__fan{display:none}
  .collection-banner__body{max-width:none;margin-top:clamp(-110px,-14vw,-60px);padding-top:0}
  .person-hero{grid-template-areas:"portrait head" "rest rest";align-items:center}
  .person-hero__portrait{width:112px;align-self:center}
  .person-hero__head{align-self:center}
}
@media (max-width: 767px){
  .page-head__aside,.page-head > .tabs{flex:1 1 100%}
  .page-head__aside{flex-wrap:wrap;row-gap:8px}
  .page-head__aside > .tabs{flex:1 1 auto;width:100%}
  .catalog-tabs a{flex:1 1 0;justify-content:center;padding:0 10px}
  /* the week pill never squeezes below its content (steps + range): "Bu hafta" drops to its own row instead */
  .week-nav{flex:1 1 auto;min-width:max-content}
  .genre-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .genre-index > li:last-child:nth-child(3n+1){grid-column:auto}
  .genre-index > li:last-child:nth-child(odd){grid-column:1/-1}
}
/* phone: toolbar = search + "Filtreler" toggle (disclosure); fields open as a 2-column grid of stacked cells */
@media (max-width: 560px){
  .page-head{padding-top:18px}
  .page-head__title{gap:8px 12px}
  .result-count{height:26px;padding:0 10px;font-size:12px}
  .filter-bar{padding:8px;border-radius:var(--r-md);margin-bottom:22px}
  .filter-bar__row{flex-wrap:wrap}
  .field-inline.is-search{flex:1 1 0;min-width:0;max-width:none}
  .filter-bar__strip{flex:1 1 100%}
  .filter-bar__step{display:none}
  .filter-bar__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}
  /* micro label on top, the select covers the whole cell: no dead label zone, long values still fit at 320px */
  .filter-bar__fields .field-inline{display:block;width:auto;height:56px;padding:0;border-radius:var(--r-md)}
  .filter-bar__fields .field-inline > span{position:absolute;left:14px;top:12px;z-index:1;pointer-events:none}
  .filter-bar__fields .field-inline .select{position:absolute;inset:0;width:100%;max-width:none;height:100%;margin:0;padding:20px 30px 0 14px;field-sizing:fixed;border-radius:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filter-bar__fields .field-inline::after{top:auto;bottom:18px;margin-top:0}
  .filter-bar__fields > .field-inline:last-child:nth-child(odd){grid-column:1/-1}
  .filter-bar__actions{flex:1 1 100%;margin-left:0;padding-left:0}
  .filter-bar__actions .btn{flex:1 1 0;height:44px}
  .filter-bar.is-collapsible:not(.is-open) .filter-bar__strip,.filter-bar.is-collapsible:not(.is-open) .filter-bar__actions{display:none}
  .filter-bar.is-collapsible:not(.is-open) .filter-bar__row{flex-wrap:nowrap}
  /* no title field (search page): the folded toolbar is just the toggle, no panel around it */
  .filter-bar.is-collapsible:not(.is-open):not(:has(.is-search)){padding:0;background:transparent;box-shadow:none}
  .catalog-active{margin-bottom:20px}
  .genre-card{min-height:156px;padding:14px 14px 12px}
  .genre-card__desc{font-size:12.5px}
  .genre-card__foot{font-size:12px}
  .genre-card__go{width:30px;height:30px}
  .year-index__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .year-index__tile{height:64px;padding:0 12px}
  .year-index__tile b{font-size:26px}
  .week-nav__today{flex:none}
  .latest-group__head{margin-bottom:14px}
  /* day strip: 7 days of ≥44px, 8px apart, fill the row when they fit (≥388px); narrower they are sized from the
     strip width so the screen edge cuts the 6th day in half (5.5 in view, ≥48px) — a fixed 44px day would end
     flush with the edge at 320 (Sunday hidden, no cue) or leave a 3px gutter at 375. The ×1000 term switches between
     the two sizes without a breakpoint (min() picks it only while --fit < 44px). Today is kept in view by catalog.js */
  .calendar-jump li{--fit:calc((100% - 48px) / 7);flex:0 0 max(var(--fit),min(calc((100% + max(var(--gutter),var(--safe-r)) - 40px) / 5.5),calc(44px + (44px - var(--fit)) * 1000)))}
  .latest-group .episode-grid{grid-template-columns:minmax(0,1fr)}
  .collection-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .collection-banner{border-radius:var(--r-lg)}
  .collection-banner__body{padding:0 18px 22px}
  .collection-banner__body .eyebrow{white-space:normal;align-items:flex-start;line-height:1.4}
  .collection-banner__body .eyebrow::before{margin-top:.7em}
  .collection-banner__text{font-size:15px;-webkit-line-clamp:5}
  .collection-banner .share-label{display:none}
  .collection-rank{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .collection-rank__num{font-size:19px;margin-bottom:8px}
  .person-hero{padding:20px 18px;border-radius:var(--r-lg);column-gap:16px}
  .person-hero__portrait{width:88px;padding:2px}
  .person-hero__portrait img{border-width:3px}
  .person-hero__head .h1{margin-top:8px;font-size:clamp(28px,8vw,36px)}
  .person-hero__facts{margin-top:16px}
  .person-hero__facts li{padding-right:14px}
  .search-page__form{height:58px;padding:0 6px 0 16px;gap:10px;border-radius:var(--r-md)}
  .search-page__form input[type="search"]{font-size:16.5px}
  .search-page__form .btn{height:46px;padding:0 18px}
  .search-page__actors{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:22px 12px}
}
@media (min-width: 561px){
  .filter-bar__toggle{display:none}
}
/* ≤374: genre tile footers keep the counts on one line (the decorative arrow goes); a tighter "Filtreler" toggle
   (with a count badge: no chevron — the open state still reads from its pressed look) and title field keep the
   whole "Başlıkta ara…" placeholder visible at 320; the collection share row (6 × 44px with the device-share
   button) splits into two even rows of three instead of 5 + 1 */
@media (max-width: 374px){
  .genre-card__go{display:none}
  .genre-card{padding-inline:12px}
  .filter-bar__toggle{padding:0 10px;gap:6px}
  .filter-bar__toggle:has(.filter-bar__badge)::after{display:none}
  .field-inline.is-search{padding:0 12px;gap:6px}
  .collection-banner .share{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px}
}
/* phone landscape (short viewport): keep the cover screen and jump strip compact so content starts above the fold */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px){
  .collection-banner__media{height:150px}
  .collection-banner__body{margin-top:-56px}
  .calendar-jump a{height:48px}
}

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .genre-card,.year-index__tile,.collection-card,.collection-card__art > img,.collection-card__stack img,.calendar-item__art img{transition:none}
  .genre-card:hover,.year-index__tile:hover,.collection-card:hover,.collection-card:focus-visible{transform:none}
  .collection-card:hover .collection-card__art > img,.calendar-item:hover .calendar-item__art img{transform:none}
}