/* Kök Finans — application layer.
   Everything the design system does not ship: the classes that replace the UI
   kit's inline styles, plus the mobile drawer. Token-driven, no literal colours. */

/* Categories are rows now, so their colours arrive inline from
   category_style(); the grid only has to cope with however many exist. */
.kf-pillars{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---------- Utilities ---------- */
.kf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.kf-skip{position:absolute;inset-inline-start:var(--space-5);top:-64px;z-index:80;background:var(--surface-card);color:var(--text-strong);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);text-decoration:none;transition:top var(--duration-fast) var(--ease-standard)}
.kf-skip:focus{top:var(--space-4)}
.kf-count{font-size:var(--text-caption);color:var(--text-muted)}
.kf-empty{color:var(--text-muted);font-size:var(--text-body-sm);padding:var(--space-10) 0}

/* ---------- Flash ---------- */
.kf-flash{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4) var(--space-6);border-radius:var(--radius-sm);font-size:var(--text-body-sm);background:var(--status-positive-soft);color:var(--status-positive);border-inline-start:3px solid var(--status-positive)}
.kf-flash[data-tone=critical]{background:var(--status-critical-soft);color:var(--status-critical);border-inline-start-color:var(--status-critical)}

/* ---------- Header ---------- */
.kf-head__burger{display:none}
.kf-drawer{display:none;border-top:1px solid var(--border-hairline);background:var(--surface-page);padding:var(--space-6) var(--gutter-page) var(--space-7)}
.kf-drawer[hidden]{display:none}
.kf-drawer__nav{display:flex;flex-direction:column}
.kf-drawer__nav a{padding:var(--space-4) 0;font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--border-hairline)}
.kf-drawer__nav a.is-active{color:var(--text-accent)}
.kf-nav__count{margin-inline-start:var(--space-2);font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-subtle)}
.kf-drawer__search{margin-top:var(--space-6)}
.kf-head__search .kf-input-wrap,.kf-drawer__search .kf-input-wrap{width:100%}

/* The mono seal draws in currentColor, so the lockup sets its own ink. The UI
   kit did this with an inline style; here it belongs to the variant. */
/* The lockup's colour is keyed to its GROUND, not to the variant's name.
   --text-strong is scope-aware: ink on parchment, parchment inside .kf-dark —
   so the mono cuts, which are painted with currentColor, come out right on any
   surface. The previous rules matched .kf-logo--mono, a class built by string
   concatenation from the variant name in logo(), so renaming a variant silently
   stopped them matching with no error anywhere. The tagline needs no rule at
   all: its own --text-muted is redefined by .kf-dark to the same value. */
.kf-logo{color:var(--text-strong)}

/* The trailing action in a section heading never shrinks below its label. */
.kf-sechead__a{flex:none}

/* The secondary button sits on the espresso hero, so it borrows the inverse border. */
.kf-btn--on-dark{color:var(--parchment-100);border-color:var(--border-inverse)}
.kf-btn--on-dark:hover:not(:disabled){background:rgba(247,237,212,.08);border-color:var(--parchment-200);color:var(--parchment-50)}

/* ---------- Home ---------- */
.kf-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}
.kf-hero__player{display:block;text-decoration:none}
.kf-section--tight{padding-top:0}
.kf-section--bottom{padding-bottom:var(--space-12)}
.kf-grid--spaced{margin-top:var(--space-8)}
.kf-filters .kf-tabs--pill{flex-wrap:wrap}
.kf-tabs--pill .kf-tab{text-decoration:none}

/* Tabs here are real links to real URLs, not a scripted tab widget, so the
   active one carries aria-current. These mirror the design system's
   [aria-selected=true] rules exactly. */
.kf-tab[aria-current=page]{color:var(--text-strong);border-bottom-color:var(--coin-500);font-weight:var(--weight-semibold)}
.kf-tabs--pill .kf-tab[aria-current=page]{background:var(--surface-inverse);color:var(--parchment-100);border-color:var(--surface-inverse)}

.kf-series{align-items:flex-start;text-decoration:none;color:inherit}
.kf-series__title{display:block;font-family:var(--font-display);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-strong);letter-spacing:var(--tracking-snug)}
.kf-series:hover .kf-series__title{color:var(--coin-700)}
.kf-series__desc{display:block;font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed);margin-top:var(--space-3)}
.kf-series__count{display:block;font-size:var(--text-caption);color:var(--text-subtle);margin-top:var(--space-4)}
.kf-series__stat{display:block;margin-top:var(--space-5)}

.kf-cta__form .kf-input{width:260px}

/* ---------- VideoCard text column ---------- */
.kf-video__text{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.kf-video__thumb{display:block}
/* Narrower than the design system's 190px: these row cards sit in the 330px
   sidebar, where 190px leaves the title no measure to wrap in. */
.kf-video--row .kf-video__thumb{width:150px}

/* ---------- Footer ---------- */
.kf-foot a{display:inline-flex;align-items:center;gap:var(--space-2)}
.kf-foot__ext{font-size:.85em;color:var(--bark-400)}
.kf-foot a:hover .kf-foot__ext{color:inherit}
.kf-foot__blurb{font-size:var(--text-body-sm);color:var(--bark-300);margin-top:var(--space-5);max-width:var(--measure-narrow);line-height:var(--leading-relaxed)}

/* ---------- Video detail ---------- */
.kf-crumbs__row{padding-top:var(--space-7)}
.kf-detail__badges{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7)}
.kf-detail__badges a.kf-badge{text-decoration:none}
.kf-detail__badges a.kf-badge:hover{background:var(--surface-sunken)}
.kf-detail__title{margin-top:var(--space-5)}
.kf-detail__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6);font-size:var(--text-caption);color:var(--text-muted)}
.kf-detail__tools{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-3)}
.kf-detail__panel{margin-top:var(--space-8)}
/* Buttons set display:inline-flex, which would otherwise win over [hidden]. */
.kf-detail [hidden]{display:none}
/* "Kopyala" menu: a <details> dropdown, closed by site.js on outside click/Escape. */
.kf-menu{position:relative}
.kf-menu>summary{list-style:none}
.kf-menu>summary::-webkit-details-marker{display:none}
.kf-menu__caret{transition:transform var(--duration-fast) var(--ease-standard)}
.kf-menu[open] .kf-menu__caret{transform:rotate(180deg)}
.kf-menu__list{position:absolute;z-index:20;top:calc(100% + var(--space-2));inset-inline-start:0;min-width:180px;display:flex;flex-direction:column;padding:var(--space-2);background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-card);box-shadow:var(--shadow-md)}
.kf-menu__item{display:block;width:100%;padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-body);font:inherit;font-size:var(--text-caption);text-align:start;cursor:pointer;transition:var(--transition-color)}
.kf-menu__item:hover{background:var(--action-quiet-hover)}
.kf-menu__item:focus-visible{outline:none;box-shadow:var(--ring-focus)}
/* "Paylaş" without a share sheet copies the link and shows a tick for a moment. */
.kf-share__done,[data-share].is-done .kf-icon:first-child{display:none}
[data-share].is-done .kf-share__done{display:inline-block}
.kf-tabs{margin-top:var(--space-8);flex-wrap:wrap}
.kf-tabs .kf-tab{text-decoration:none}
.kf-prose__lead{font-size:var(--text-lead);color:var(--text-body)}
.kf-prose__time{font-family:var(--font-mono);font-size:var(--text-caption);color:var(--text-subtle);margin-inline-end:var(--space-5)}
.kf-prose__note{font-size:var(--text-caption);color:var(--text-muted);margin-top:var(--space-6)}
.kf-prose__empty{color:var(--text-muted)}
.kf-srclist__t{color:var(--text-body)}
.kf-tagcloud{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.kf-tagcloud .kf-tag{text-decoration:none}
/* Folding facet: the same caret and summary treatment as the chapter list. */
.kf-fold__head{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;list-style:none}
.kf-fold__head::-webkit-details-marker{display:none}
.kf-fold__head:focus-visible{box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
.kf-fold__n{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-subtle)}
.kf-fold__caret{margin-inline-start:auto;color:var(--text-subtle);font-size:15px;transition:transform var(--duration-fast) var(--ease-standard)}
.kf-fold[open] .kf-fold__caret{transform:rotate(180deg)}
.kf-fold__head:hover .kf-fold__caret{color:var(--text-body)}
.kf-fold > :not(summary){margin-top:var(--space-5)}
.kf-detail__tags{margin-top:var(--space-9)}
.kf-side__list{display:flex;flex-direction:column;gap:var(--space-6)}
/* A series long enough to need a meta line of its own wraps rather than spills. */
.kf-video__meta{flex-wrap:wrap}
/* Series playlist in the video sidebar: every episode in order, this one marked. */
.kf-playlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kf-playlist__item{display:flex;align-items:baseline;gap:var(--space-4);padding:var(--space-4) var(--space-3);border-bottom:1px solid var(--border-hairline);color:var(--text-body);text-decoration:none;font-size:var(--text-body-sm);line-height:var(--leading-snug)}
.kf-playlist li:last-child .kf-playlist__item{border-bottom-color:transparent}
.kf-playlist__item:hover{color:var(--text-accent)}
.kf-playlist__n{flex:none;min-width:1.5em;font-family:var(--font-mono);font-size:var(--text-body);font-weight:var(--weight-regular);color:var(--text-subtle);text-align:end}
.kf-playlist__title{flex:1;min-width:0}
.kf-playlist__dur{flex:none;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-subtle)}
.kf-playlist__item[aria-current]{background:var(--surface-accent-soft);border-radius:var(--radius-sm);border-bottom-color:transparent;color:var(--text-strong);font-weight:var(--weight-medium)}
.kf-playlist__item[aria-current] .kf-playlist__n{color:var(--coin-600);font-weight:var(--weight-semibold)}
.kf-player__bar .kf-iconbtn{color:inherit}

/* ---------- Library ---------- */
.kf-lib__head{padding-top:var(--space-10)}
.kf-lib__bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);margin-bottom:var(--space-7)}
.kf-lib__sort{width:190px}
.kf-lib__total{margin-top:var(--space-10);font-size:var(--text-caption);color:var(--text-subtle);border-top:1px solid var(--border-hairline);padding-top:var(--space-6)}
.kf-facet--last{border-bottom:0}
.kf-facet__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}

/* ---------- About ---------- */
.kf-about__lead{margin-top:var(--space-7)}
.kf-pillar{text-decoration:none;color:inherit;transition:var(--transition-lift),border-color var(--duration-fast) var(--ease-standard)}
.kf-pillar:hover{transform:var(--lift-hover);box-shadow:var(--shadow-md);border-color:var(--border-default)}
.kf-pillar__t{font-family:var(--font-display);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-strong)}
.kf-pillar__d{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed)}
.kf-card__text{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed)}
/* The seal and the form read as one left-aligned group: the seal takes its
   natural width, the form is capped to a comfortable measure, and the pair is
   justified to the start of the container rather than spread across it. */
.kf-about__foot{display:grid;grid-template-columns:auto minmax(0,var(--container-reading));gap:var(--space-11);align-items:start;justify-content:start}
.kf-about__seal{display:flex;justify-content:flex-start}
/* p is margin-zero in base.css, so without this the mail button sits on the
   section heading's hairline. Same step the grids use after a heading. */
.kf-contact{margin-top:var(--space-8)}
.kf-form{display:flex;flex-direction:column;gap:var(--space-6)}
.kf-form__submit{align-self:flex-start}

/* ---------- 404 ---------- */
.kf-404{padding-block:var(--space-13) var(--space-12)}
.kf-404 h1{margin-top:var(--space-5)}
.kf-404__lead{margin-top:var(--space-6)}
.kf-404__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* On a phone the bar sits over the content the whole way down the page, and
     at 92% the page showed through it. Opaque here, plus the house shadow so it
     reads as a layer floating above the page rather than a tinted pane. The
     ink-on-parchment contrast is why this is a shadow and not a dark overlay:
     the logo and nav are bark-800, so darkening the bar itself would bury them. */
  .kf-head{background:var(--surface-page);backdrop-filter:none;box-shadow:var(--shadow-md)}
  .kf-head__burger{display:inline-flex}
  .kf-drawer:not([hidden]){display:block}
  .kf-head__search{display:none}
  .kf-about__foot{grid-template-columns:1fr}
  .kf-about__seal{justify-content:flex-start}
  .kf-cta{grid-template-columns:1fr}
  .kf-side{position:static;max-height:none}
  .kf-side__scroll{flex:none;min-height:0;overflow-y:visible}
  .kf-lib{gap:var(--space-8)}
}
@media (max-width:720px){
  .kf-grid2,.kf-pillars{grid-template-columns:1fr}
  .kf-hero__title{font-size:var(--text-display-md)}
  .kf-about__hero h1{font-size:var(--text-display-lg)}
  .kf-detail__tools{margin-inline-start:0;width:100%}
  .kf-cta__form{flex-direction:column;align-items:stretch}
  .kf-cta__form .kf-input{width:100%}
  .kf-video--row{flex-direction:column}
  .kf-video--row .kf-video__thumb{width:100%}
  .kf-lib__sort{width:150px}
  .kf-foot__grid{gap:var(--space-8)}
}

/* ---------- YouTube ----------
   Real poster frames finally exist, so the design system's imagery note
   applies: grade them warm and slightly desaturated rather than showing raw
   YouTube stills against the parchment. */
.kf-video__thumb img,
.kf-hero__poster,
.kf-player__poster{filter:saturate(.92) sepia(.05) contrast(1.02)}

.kf-hero__player{display:block;position:relative}
.kf-hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kf-hero__play{z-index:3}

/* The player facade: poster, scrim, one gold play button. */
.kf-player--yt{position:relative;display:block;cursor:pointer}
.kf-player__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kf-player--yt::after{content:"";position:absolute;inset:0;background:var(--scrim-full);opacity:.55;pointer-events:none;transition:opacity var(--duration-base) var(--ease-standard)}
.kf-player--yt:hover::after{opacity:.35}
.kf-player__start{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-decoration:none}
.kf-player__btn{width:68px;height:68px;border-radius:var(--radius-circle);background:var(--coin-500);color:var(--bark-900);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:var(--shadow-md);transition:transform var(--duration-base) var(--ease-out),background-color var(--duration-fast) var(--ease-standard)}
.kf-player--yt:hover .kf-player__btn{transform:scale(1.06);background:var(--coin-400)}
.kf-player__start:focus-visible .kf-player__btn{box-shadow:var(--ring-focus)}
.kf-player__dur{position:absolute;inset-block-end:var(--space-5);inset-inline-end:var(--space-5);z-index:2;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--parchment-100);background:rgba(27,18,12,.72);padding:3px 7px;border-radius:var(--radius-xs)}
.kf-player__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.kf-player.is-playing::after{display:none}

.kf-detail__yt{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--text-link);text-decoration:none}
.kf-detail__yt:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}

/* ---------- Library: grouped by series ---------- */
.kf-lib__group{text-decoration:none;gap:var(--space-3)}
/* Pressed state matches the design system's active pill: inverse ground, no colour flash. */
.kf-lib__group[aria-pressed=true]{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--parchment-100)}
.kf-lib__group[aria-pressed=true]:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--parchment-50)}

.kf-group + .kf-group{margin-top:var(--space-10)}
.kf-group__head{display:flex;align-items:baseline;gap:var(--space-4);font-family:var(--font-display);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-strong);letter-spacing:var(--tracking-snug);border-bottom:1px solid var(--border-hairline);padding-bottom:var(--space-4);margin:0 0 var(--space-7)}
.kf-group__head a{color:inherit;text-decoration:none}
.kf-group__head a:hover{color:var(--coin-700)}
.kf-group__n{font-family:var(--font-display);color:var(--coin-500);font-size:var(--text-title);line-height:1}
.kf-group__head--loose{color:var(--text-muted)}
.kf-group__count{margin-inline-start:auto;font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-regular);color:var(--text-subtle)}
.kf-group__toggle{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -4px -4px 0;padding:0;border:0;background:none;color:var(--text-subtle);font-size:15px;cursor:pointer;border-radius:var(--radius-xs)}
.kf-group__toggle:hover{color:var(--text-body)}
.kf-group__toggle:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.kf-group__caret{transition:transform var(--duration-fast) var(--ease-standard)}
.kf-group__toggle[aria-expanded=false] .kf-group__caret{transform:rotate(-90deg)}
/* A collapsed group is just its heading line, so the stack of them stays tight. */
/* .kf-grid2 sets display:grid, which would otherwise win over [hidden]. */
.kf-group__body[hidden]{display:none}
.kf-group.is-collapsed .kf-group__head{margin-bottom:0}
.kf-group.is-collapsed + .kf-group{margin-top:var(--space-6)}

/* ---------- Chapter list: collapsible, scrollable, clickable ---------- */
.kf-chaptersbox{border-bottom:1px solid var(--border-hairline);padding-bottom:var(--space-5)}
.kf-chaptersbox__head{display:flex;align-items:center;gap:var(--space-3);cursor:pointer;list-style:none;padding-bottom:var(--space-4)}
.kf-chaptersbox__head::-webkit-details-marker{display:none}
.kf-chaptersbox__head h5{margin:0}
.kf-chaptersbox__n{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-subtle)}
.kf-chaptersbox__caret{margin-inline-start:auto;color:var(--text-subtle);font-size:15px;transition:transform var(--duration-fast) var(--ease-standard)}
.kf-chaptersbox[open] .kf-chaptersbox__caret{transform:rotate(180deg)}
.kf-chaptersbox__head:hover .kf-chaptersbox__caret{color:var(--text-body)}
.kf-chaptersbox__head:focus-visible{box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}

/* A long chapter list scrolls inside the sidebar instead of pushing it down. */
/* Bölümler and the related-videos box scroll the same way: a bounded box with a
   thin rail, so a long list never pushes the sticky sidebar past the viewport.
   An item cut in half at the bottom edge is the affordance — it says there is
   more below. */
.kf-chapters,.kf-playlist,.kf-side__scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bark-200) transparent}
.kf-chapters{max-height:19rem}
.kf-playlist{max-height:15rem;padding-inline-end:var(--space-3)}
.kf-chapters::-webkit-scrollbar,.kf-playlist::-webkit-scrollbar,.kf-side__scroll::-webkit-scrollbar{width:6px}
.kf-chapters::-webkit-scrollbar-thumb,.kf-playlist::-webkit-scrollbar-thumb,.kf-side__scroll::-webkit-scrollbar-thumb{background:var(--bark-200);border-radius:var(--radius-pill)}
.kf-chapters::-webkit-scrollbar-track,.kf-playlist::-webkit-scrollbar-track,.kf-side__scroll::-webkit-scrollbar-track{background:transparent}
/* The sticky sidebar is pinned to the viewport rather than left to grow: a
   column taller than the screen cannot stay stuck, which is what forced you to
   scroll the page to reach the videos at all. */
.kf-side{max-height:calc(100vh - 96px - var(--space-8))}
.kf-chaptersbox{flex:0 0 auto}
/* Diğer videolar takes whatever height the boxes above leave and scrolls
   inside that — so it is as long as the window allows and never pushes the
   column past the fold. min-height keeps it usable when they are long; the
   padding keeps the rail off the cards' right edge. */
.kf-side__scroll{flex:1 1 auto;min-height:10rem;display:flex;flex-direction:column;gap:var(--space-8);padding-inline-end:var(--space-3)}
.kf-chapters li{cursor:default}
.kf-chapters li a{display:flex;gap:var(--space-5);width:100%;color:inherit;text-decoration:none;cursor:pointer}
.kf-chapters li a:hover{color:var(--text-accent)}
.kf-chapters li a[aria-current]{color:var(--text-accent)}
.kf-chapters li a[aria-current] b{color:var(--coin-600)}

/* ---------- Summary: headings and inline marks ----------
   The page's <h1> is the video title, so a summary's own top level is an <h2>
   and its sub-headings are <h3> — the same scale the design system sets, one
   step apart. */
.kf-prose h2{font-size:var(--text-display-sm);margin:var(--space-10) 0 var(--space-5);letter-spacing:var(--tracking-tight)}
.kf-prose h2:first-child,.kf-prose h3:first-child{margin-top:0}
.kf-prose strong{font-weight:var(--weight-semibold);color:var(--text-strong)}
.kf-prose em{font-style:italic}
.kf-prose code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-sunken);border:1px solid var(--border-hairline);border-radius:var(--radius-xs);padding:1px 5px}
.kf-prose a{text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- PDF documents ----------
   A document is a sheet of paper, not a 16:9 frame: portrait A4, a couple of
   sheets peeking out behind it, so a grid of them reads as a shelf of papers at
   a glance beside the video thumbnails. */
.kf-lib__kinds{margin:var(--space-8) 0 0}
.kf-lib__kinds .kf-tab{display:inline-flex;align-items:center;gap:var(--space-3)}
.kf-lib__kinds .kf-tab[aria-current=page] .kf-tab__count{color:var(--parchment-300)}

.kf-docgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10) var(--grid-gap)}

.kf-doc{display:flex;flex-direction:column;gap:var(--space-6);text-decoration:none;color:inherit;transition:var(--transition-lift)}
.kf-doc:hover{transform:var(--lift-hover)}
.kf-doc__sheet{position:relative;display:block;margin:0 8px 8px 0;isolation:isolate}
/* The two sheets behind: offset down-right, a shade darker each. */
.kf-doc__sheet::before,.kf-doc__sheet::after{content:"";position:absolute;inset:0;border-radius:var(--radius-xs);border:1px solid var(--border-hairline);z-index:-1}
.kf-doc__sheet::before{transform:translate(4px,4px);background:var(--parchment-200)}
.kf-doc__sheet::after{transform:translate(8px,8px);background:var(--parchment-300);z-index:-2}
.kf-doc__cat{position:absolute;inset-block-start:var(--space-4);inset-inline-start:var(--space-4);z-index:2}
/* A drawn cover has the konu's band down its spine; the badge starts past it. */
.kf-doc__sheet--drawn .kf-doc__cat{inset-inline-start:calc(5% + var(--space-4))}
.kf-doc__type{position:absolute;inset-block-end:var(--space-4);inset-inline-end:var(--space-4);z-index:2;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.06em;color:var(--parchment-100);background:rgba(27,18,12,.72);padding:2px 6px;border-radius:var(--radius-xs)}
.kf-doc__text{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.kf-doc__title{font-family:var(--font-display);font-size:var(--text-title);font-weight:var(--weight-semibold);color:var(--text-strong);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug)}
.kf-doc:hover .kf-doc__title{color:var(--coin-700)}
.kf-doc__sum{font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kf-doc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);font-size:var(--text-caption);color:var(--text-subtle)}
.kf-doc__videos{display:inline-flex;align-items:center;gap:var(--space-2)}
.kf-doc__videos .kf-icon{font-size:10px}

/* The cover. Its text is sized in container units, so one piece of markup is
   legible at 40px in the sidebar and at full width on a phone. */
.kf-doccover{container-type:inline-size;position:relative;display:flex;flex-direction:column;aspect-ratio:1/1.414;overflow:hidden;border-radius:var(--radius-xs);border:1px solid var(--border-hairline);background:var(--parchment-50);box-shadow:var(--shadow-sm)}
/* The girih, barely there, over the parchment. */
.kf-doccover::before{content:"";position:absolute;inset:0;background:url("../patterns/girih-tile.svg") center/90px repeat;opacity:.07;pointer-events:none}
/* The konu's colour: a band down the spine and a hairline across the top. */
.kf-doccover::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:5%;background:var(--kf-tone)}
.kf-doccover__title{position:relative;margin:auto 10cqi 0 15cqi;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(4px,9.5cqi,30px);line-height:1.12;letter-spacing:-.01em;color:var(--bark-800);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.kf-doccover__rule{position:relative;display:block;width:22cqi;height:max(1px,.8cqi);margin:7cqi 0 0 15cqi;background:var(--kf-tone)}
.kf-doccover__foot{position:relative;display:flex;align-items:center;gap:3cqi;margin:auto 10cqi 9cqi 15cqi;font-family:var(--font-body);font-size:clamp(3px,4.2cqi,11px);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.kf-doccover__foot .kf-logo__mark{width:9cqi;height:9cqi;flex:none}
/* Card-sized on a phone: the seal alone, so the PDF tag has the corner. */
@container (max-width:220px){
  .kf-doccover__foot span{display:none}
}
/* Too small to read: keep the colour and the rule, drop the words. */
@container (max-width:90px){
  .kf-doccover__title{-webkit-line-clamp:3;font-size:11cqi;color:transparent;background:repeating-linear-gradient(var(--bark-300) 0 1.5px,transparent 1.5px 9px);border-radius:1px}
  .kf-doccover__foot{visibility:hidden}
}
.kf-doccover--image{background:var(--parchment-200)}
.kf-doccover--image::before,.kf-doccover--image::after{content:none}
.kf-doccover--image img{width:100%;height:100%;object-fit:cover;display:block}

/* Video cards say when a PDF goes with the episode. */
.kf-video__pdf{position:absolute;inset-block-end:var(--space-4);inset-inline-start:var(--space-4);z-index:2;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--bark-800);background:var(--parchment-100);padding:2px 6px;border-radius:var(--radius-xs)}
.kf-video__pdf .kf-icon{font-size:11px}

/* Video page sidebar: the documents for this episode. */
.kf-sidedocs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kf-sidedocs__item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline)}
.kf-sidedocs__item:last-child{border-bottom:0}
.kf-sidedocs__link{display:flex;align-items:center;gap:var(--space-5);flex:1;min-width:0;color:inherit;text-decoration:none}
.kf-sidedocs__cover{width:40px;flex:none}
.kf-sidedocs__cover .kf-doccover{box-shadow:var(--shadow-xs)}
.kf-sidedocs__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.kf-sidedocs__title{font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-strong);line-height:var(--leading-snug)}
.kf-sidedocs__link:hover .kf-sidedocs__title{color:var(--text-accent)}
.kf-sidedocs__meta{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-subtle)}

/* Document page. */
.kf-dochead{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--space-9);align-items:start}
.kf-dochead__cover .kf-doccover{box-shadow:var(--shadow-md)}
.kf-dochead .kf-detail__badges{margin-top:0}
.kf-dochead__sum{margin:var(--space-6) 0 0;font-size:var(--text-body);color:var(--text-body);line-height:var(--leading-relaxed);max-width:62ch}
.kf-dochead__actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7)}
.kf-docviewer{margin-top:var(--space-9);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);background:var(--parchment-200);box-shadow:var(--shadow-md);overflow:hidden}
.kf-docviewer object{display:block;width:100%;height:min(80vh,1100px)}
.kf-docviewer__fallback{margin:0;padding:var(--space-9);font-size:var(--text-body-sm);color:var(--text-muted)}
.kf-switch:has(input:disabled){opacity:.45;cursor:not-allowed}
.kf-side__note{margin:0;font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-relaxed)}

@media (max-width:1000px){
  .kf-docgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .kf-docgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-9) var(--space-6)}
  .kf-doc__title{font-size:var(--text-body-lg)}
  /* Phones rarely render an embedded PDF; the cover and the two buttons stand in. */
  .kf-docviewer{display:none}
  .kf-dochead{grid-template-columns:1fr;gap:var(--space-7)}
  .kf-dochead__cover{max-width:240px}
}