/* tayfcet · vitrin (Dalga 1, 2026-10-14). Loaded on the Turkish home page only (content/site.mjs FEATURES.tr), after site.css.
   Parts: 1 dock · 3 Adalar · 4 archive list and grid, preview panel · 5 Goz at layer · 6 assistant.
   Neumorphism (the .neo class and --neo-* tokens come from the brand tokens) is only on small controls: the dock buttons, the
   Liste | Izgara switch, the filter chips, the arrows of the Goz at layer, the island medallions, the assistant's quick replies.
   Hidden "before" states exist only under .ready (set by site.js when motion is allowed), as in site.css. */

/* ---------- 1. dock: Ses and Sor, bottom right (spec 5.4) ---------- */
.dock { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dock-b { position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: var(--neo-r-hap); cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; }
.dock-b[hidden] { display: none; }
.dock-b .ti { width: 22px; height: 22px; grid-area: 1 / 1; }
.dock-ses .ti-on { display: none; }
.dock-ses[aria-pressed="true"] .ti-on { display: block; }
.dock-ses[aria-pressed="true"] .ti-off { display: none; }
/* the switch is told by its icon, its label colour and a dot (never by the shadow alone) */
.dock-dot { position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--color-tayf-blue-700); opacity: 0; transform: scale(.4); transition: opacity .15s var(--ease-fade), transform .25s var(--ease-emph); }
.dock-ses[aria-pressed="true"] .dock-dot { opacity: 1; transform: none; }
.dock-tip { position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); color: var(--color-ink); font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .15s var(--ease-fade), transform .25s var(--ease-emph); }
.dock-b:is(:hover, :focus-visible) .dock-tip { opacity: 1; transform: none; }
html.menu-open .dock, html.ytp-on .dock, html.ara-on .dock, html.gz-on .dock { opacity: 0; visibility: hidden; transition: opacity .15s var(--ease-fade), visibility 0s .15s; }
html.ready .dock { animation: dockIn .55s var(--ease-emph) .8s backwards; }
@keyframes dockIn { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 767px) { .dock { right: 14px; gap: 10px; } .dock-tip { display: none; } html.sor-on .dock { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.ready .dock { animation: none; } .dock-dot, .dock-tip { transition: none; } }
@media print { .dock { display: none; } }

/* ---------- 3. Adalar (spec 5.1.b): seven islands on the 60 degree grid, one link each ----------
   2-3-2 rows half a cell apart; the bridges are hairlines on the 0, 60 and 120 degree axes (a plain SVG under the cards).
   Cards: white, round, hairline, --shadow-1; the sharp corner triangle turns 60 degrees on hover; the icon sits on a 48 px
   neumorphic medallion (Kimlik's own island carries the mark and the four colour dots instead, which keeps the neumorphic
   count on one screen at eight: six medallions and the two dock buttons). Only transform and opacity move. */
.adalar { --ada-h: 56.2; }
.ada-wrap { position: relative; margin-top: clamp(8px, 2vw, 24px); }
.ada-br { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ada-br line { stroke: var(--color-ink-200, #D9E5EB); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .25s var(--ease-emph); }
.ada-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.ada { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 100%; padding: 20px 20px 34px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink); transition: transform .25s var(--ease-emph), border-color .25s var(--ease-emph), box-shadow .25s var(--ease-emph); }
.ada-big { grid-column: 1 / -1; }
.ada:is(:hover, :focus-visible) { transform: translateY(-2px); border-color: var(--color-tayf-blue-600); box-shadow: var(--shadow-2); }
.ada:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.ada-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; }
.ada-ic .ti { width: 22px; height: 22px; }
.ada:is(:hover, :focus-visible) .ada-ic { transform: translateY(-2px); box-shadow: var(--neo-kabar); color: var(--color-tayf-blue-700); }
.ada-mk { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.ada-mark { width: 76px; height: auto; display: block; }
.ada-dots { display: flex; gap: 6px; }
.ada-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.ada-t { font: 700 clamp(22px, 2.1vw, 30px)/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.ada-big .ada-t { font-size: clamp(30px, 2.8vw, 40px); }
.ada-x { font: 400 15px/1.45 var(--font-text); color: var(--ink-2); max-width: 30ch; }
.ada-deg { position: absolute; left: 20px; bottom: 12px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); }
.ada-tri { position: absolute; right: 16px; top: 16px; width: 14px; height: 12px; background: var(--color-mint); clip-path: polygon(50% 0, 100% 100%, 0 100%); transition: transform .25s var(--ease-emph); }
.ada:is(:hover, :focus-visible) .ada-tri { transform: rotate(60deg); }
.ada-short { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; }
.ada-sh { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--teal); font: 600 15px/1 var(--font-text); cursor: pointer; transition: border-color .25s var(--ease-emph), color .25s var(--ease-emph); }
.ada-sh:hover, .ada-sh:focus-visible { border-color: var(--color-tayf-blue-600); color: var(--btn-h); }
.ada-sh .ti { width: 18px; height: 18px; }
/* the hex layout: from 1024 px; below it two columns (Kimlik across the top), the bridges hidden */
@media (min-width: 1024px) {
  .ada-wrap { aspect-ratio: 1000 / 578; }
  .ada-br { display: block; }
  .ada-map { position: absolute; inset: 0; display: block; }
  .ada { position: absolute; left: calc(var(--cx) * 1% - 11.75%); top: calc((var(--cy) * 225 + 64) / 578 * 100% - 11.1%); width: 23.5%; height: 22.2%; padding: 18px 18px 32px; justify-content: flex-start; min-height: 0; }
  .ada-big { left: calc(var(--cx) * 1% - 13.5%); top: calc((var(--cy) * 225 + 64) / 578 * 100% - 14.4%); width: 27%; height: 28.8%; padding: 22px 22px 34px; }
  .ada-wrap:has(.ada[data-i="1"]:is(:hover, :focus-visible)) .ada-br line[data-n~="1"],
  .ada-wrap:has(.ada[data-i="2"]:is(:hover, :focus-visible)) .ada-br line[data-n~="2"],
  .ada-wrap:has(.ada[data-i="3"]:is(:hover, :focus-visible)) .ada-br line[data-n~="3"],
  .ada-wrap:has(.ada[data-i="4"]:is(:hover, :focus-visible)) .ada-br line[data-n~="4"],
  .ada-wrap:has(.ada[data-i="5"]:is(:hover, :focus-visible)) .ada-br line[data-n~="5"],
  .ada-wrap:has(.ada[data-i="6"]:is(:hover, :focus-visible)) .ada-br line[data-n~="6"],
  .ada-wrap:has(.ada[data-i="7"]:is(:hover, :focus-visible)) .ada-br line[data-n~="7"] { stroke: var(--color-tayf-blue-600); }
}
@media (prefers-reduced-motion: reduce) { .ada, .ada-tri, .ada-br line { transition: none; } .ada:is(:hover, :focus-visible) { transform: none; } .ada:is(:hover, :focus-visible) .ada-ic { transform: none; } }
html.ready .ada-map.born:not(.in) > .ada { transition-property: transform, opacity; }
@media (max-width: 767px) { .ada { padding: 16px 14px 32px; } .ada-deg { left: 14px; } .ada-x { font-size: 14px; } .ada-t { font-size: 21px; } .ada-big .ada-t { font-size: 32px; } }

/* ---------- 4. archive: list view, preview panel, Liste | Izgara switch (spec 5.2.a) ----------
   The list is a view of the same works as the grid (one row per work, the name leads). Hover and keyboard focus give the same
   state. The sharp reading triangle (it points right, it is a reading mark and not a play button) slides in; the name turns
   tayf blue; the others fade by colour only (ink 700, 4.84:1), never by opacity. The preview panel is sticky on the right: a
   poster that cross-fades in 150 ms, and after 250 ms of rest one shared muted video (one at a time, 150 ms after leaving it
   stops and its source is dropped). The row's own colour pair (--pt, --pa) paints the triangle and the panel's 2 px frame. */
#arsiv .alist-wrap { display: none; }
#arsiv[data-view="liste"] .alist-wrap { display: grid; }
#arsiv[data-view="liste"] .grid { display: none; }
#arsiv .sec-head { position: relative; }
.vsw { display: inline-flex; gap: 10px; margin: 18px 0 18px; }
.vsw button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--neo-r-hap); font: 600 14px/1 var(--font-text); cursor: pointer; }
.vsw button::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--color-tayf-blue-700); opacity: 0; transform: scale(.4); transition: opacity .15s var(--ease-fade), transform .25s var(--ease-emph); }
.vsw button[aria-pressed="true"]::before { opacity: 1; transform: none; }
@media (min-width: 768px) { .vsw { position: absolute; right: 0; top: 10px; margin: 0; } }
.alist-wrap { grid-template-columns: minmax(0, 1fr) 360px; column-gap: clamp(24px, 3.2vw, 44px); align-items: start; }
.alist { list-style: none; margin: 0; padding: 0; }
.arow { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 30px; align-items: center; column-gap: 18px; min-height: 96px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); transition: border-color .25s var(--ease-emph); }
.arow-li:last-child .arow { border-bottom: 1px solid var(--line); }
.ar-th { display: none; }
.ar-n { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); }
.ar-t { display: block; font: 700 clamp(30px, 3.2vw, 46px)/1.04 var(--font-display); letter-spacing: -.01em; color: var(--ink); transition: color .25s var(--ease-emph); }
.ar-sub { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.ar-m, .ar-cats { font: 500 12px/1.35 var(--font-mono); letter-spacing: .04em; color: var(--teal); }
.ar-cats { color: var(--color-ink-700); }
.ar-y { font: 500 13px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.ar-src { display: inline-flex; gap: 5px; }
.ar-src i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); font: 600 10px/1 var(--font-mono); letter-spacing: 0; font-style: normal; color: var(--teal); }
.ar-go { width: 16px; height: 18px; background: var(--pa, var(--color-tayf-blue-600)); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; transform: translateX(-12px); transition: transform .42s var(--ease-emph), opacity .05s linear; justify-self: end; }
.arow:is(:hover, :focus-visible) { border-top-color: var(--color-tayf-blue-600); }
.arow:is(:hover, :focus-visible) .ar-t { color: var(--teal); }
.arow:is(:hover, :focus-visible) .ar-go { opacity: 1; transform: none; }
.arow:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 4px; }
/* the others step back by colour (never by opacity: that would break the contrast); the rule reaches siblings only, never the whole list */
.arow-li:hover ~ .arow-li .ar-t, .arow-li:focus-within ~ .arow-li .ar-t, .arow-li:has(~ .arow-li:is(:hover, :focus-within)) .ar-t { color: var(--color-ink-700); }
.apanel { position: sticky; top: 112px; width: 360px; }
.ap-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--pt, var(--color-mint-100)); border: 2px solid var(--pa, var(--line)); box-shadow: var(--shadow-2); transition: border-color .25s var(--ease-emph); }
.ap-i, .ap-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s var(--ease-fade); }
.ap-i.on, .ap-v.on { opacity: 1; }
.ap-tri { position: absolute; right: 12px; top: 12px; width: 14px; height: 12px; background: var(--pa, var(--color-mint)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ap-cap { display: flex; flex-direction: column; gap: 4px; margin: 12px 4px 0; }
.ap-t { font: 700 18px/1.2 var(--font-display); color: var(--ink); }
.ap-m { font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--teal); }
/* grid view (Collider's cell: the square, the name on the left, a flat pill on the right; chips are hidden) */
.card-go { display: none; }
#arsiv[data-view="izgara"] .card .chips { display: none; }
#arsiv[data-view="izgara"] .card-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
#arsiv[data-view="izgara"] .card-text h3 { grid-column: 1; grid-row: 1; }
#arsiv[data-view="izgara"] .card-text .card-meta { grid-column: 1 / -1; grid-row: 2; }
#arsiv[data-view="izgara"] .card-go { display: inline-flex; grid-column: 2; grid-row: 1; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-tayf-blue-700); color: var(--color-tayf-blue-700); font: 600 13px/1 var(--font-text); transition: background-color .25s var(--ease-emph), color .25s var(--ease-emph); }
#arsiv[data-view="izgara"] .card:is(:hover, :focus-visible) .card-go { background: var(--color-tayf-blue-700); color: #fff; }
@media (max-width: 1099px) { .alist-wrap { grid-template-columns: minmax(0, 1fr) 300px; } .apanel { width: 300px; } .ar-src { display: none; } }
@media (max-width: 767px) {
  #arsiv[data-view="liste"] .alist-wrap { display: block; }
  .apanel { display: none; }
  .arow { grid-template-columns: 56px minmax(0, 1fr) 24px; column-gap: 14px; min-height: 80px; }
  .ar-n, .ar-y, .ar-src, .ar-cats { display: none; }
  .ar-th { display: block; width: 56px; height: 56px; border-radius: var(--radius-md); overflow: hidden; background: var(--pt, var(--color-mint-100)); }
  .ar-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ar-t { font-size: 24px; }
  .ar-go { opacity: .8; transform: none; width: 12px; height: 14px; }
}
@media (hover: none) { .ar-go { opacity: .8; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ar-go, .ar-t, .arow, .ap-i, .ap-v, .vsw button::before { transition: none; } }

/* ---------- 5. Goz at (quick look) layer (spec 5.2.b): a round white panel, two columns, born from the work's link ----------
   A native modal <dialog>. The veil is the mint-white ground at 72 % with an 8 px blur (250 ms). Left: the main picture (16:9, the loop
   plays over it after the panel has settled) and up to two more frames. Right: kicker, name, role, year, client and agency, the
   summary (3 lines), tools, the verified Kaynaklar, "Vakayı aç" (primary) and "Kapat". The three round controls at the top
   (previous, next, close) are the layer's neumorphic controls. A phone gets a bottom sheet (handle, one column, media on top). */
.gz { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; display: none; color: var(--ink); }
.gz[open] { display: grid; place-items: center; }
.gz::backdrop { background: rgba(243, 248, 247, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s var(--ease-emph); }
.gz.in::backdrop { opacity: 1; }
.gz-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 0; width: min(960px, calc(100vw - 48px)); max-height: min(560px, calc(100vh - 48px)); min-height: min(440px, calc(100vh - 48px)); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); border: 1px solid var(--line); overflow: hidden; outline: none; }
.gz-handle { display: none; }
.gz-media { display: flex; flex-direction: column; gap: 12px; padding: 20px 0 20px 20px; min-width: 0; }
.gz-main { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--pt, var(--color-mint-100)); }
.gz-img, .gz-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gz-vid { opacity: 0; transition: opacity .25s var(--ease-fade); }
.gz-vid.on { opacity: 1; }
.gz-th { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.gz-th li { width: 76px; }
.gz-th button { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--pt, var(--color-mint-100)); cursor: pointer; opacity: .75; transition: opacity .15s var(--ease-fade), border-color .25s var(--ease-emph); }
.gz-th button[aria-current="true"] { border-color: var(--pa, var(--color-tayf-blue-600)); opacity: 1; }
.gz-th button:hover { opacity: 1; }
.gz-th button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.gz-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gz-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 72px 28px 24px 28px; min-width: 0; overflow-y: auto; }
.gz-k { margin: 0 0 10px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.gz-t { margin: 0; font: 700 clamp(28px, 2.6vw, 38px)/1.04 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.gz-r { margin: 12px 0 0; font: 600 16px/1.35 var(--font-text); color: var(--ink); }
.gz-meta { margin: 4px 0 0; font: 500 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--teal); }
.gz-sum { margin: 14px 0 0; font: 400 15px/1.5 var(--font-text); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gz-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.gz-chips li { font: 500 12px/1 var(--font-text); padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.gz-src { margin-top: 14px; }
.gz-src[hidden], .gz-chips[hidden] { display: none; }
.gz-srk { margin: 0 0 6px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.gz-srl { display: flex; flex-wrap: wrap; gap: 6px; }
.gz-act { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; }
.gz-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--color-tayf-blue-700); color: #fff; font: 600 16px/1 var(--font-text); transition: background-color .25s var(--ease-emph); }
.gz-open:hover, .gz-open:focus-visible { background: var(--color-tayf-blue-800); }
.gz-open .ti { width: 18px; height: 18px; }
.gz-close2 { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 15px/1 var(--font-text); cursor: pointer; }
.gz-close2:hover { border-color: var(--color-tayf-blue-600); }
.gz-nav { position: absolute; right: 16px; top: 16px; display: flex; align-items: center; gap: 10px; }
.gz-pos { margin-right: 4px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); }
.gz-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--neo-r-hap); cursor: pointer; }
.gz-b[hidden] { display: none; }
.gz-b .ti { width: 20px; height: 20px; }
html.gz-on { overflow: hidden; }
@media (max-width: 767px) {
  .gz[open] { place-items: end center; }
  .gz-panel { grid-template-columns: minmax(0, 1fr); width: 100%; max-height: 92vh; min-height: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .gz-handle { display: block; position: sticky; top: 0; z-index: 3; justify-self: center; width: 72px; height: 28px; margin-bottom: -28px; touch-action: none; cursor: grab; background: none; }
  .gz-handle::after { content: ''; position: absolute; left: 14px; right: 14px; top: 12px; height: 4px; border-radius: 4px; background: var(--color-ink-300); }
  .gz-media { padding: 40px 16px 0; }
  .gz-th li { width: 64px; }
  .gz-side { padding: 18px 16px 20px; overflow: visible; }
  .gz-nav { top: 44px; right: 24px; }
  .gz-nav .gz-pos { display: none; }
  .gz-nav { z-index: 2; }
  .gz-b { width: 40px; height: 40px; }
  .gz-media .gz-main { margin-top: 0; }
  .gz-act { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gz::backdrop, .gz-vid, .gz-th button, .gz-open { transition: none; } }
.gz-media { justify-content: center; }
.gz-th li { width: 92px; }
@media (max-width: 767px) { .gz-media { justify-content: flex-start; } .gz-th li { width: 64px; } }