/* tayfcet · portfolio and web brand book. Built on the brand tokens (/brand/tokens/tayfcet.css, loaded first and copied from the brand book at build time). Light grounds only: white and mint-white. Petrol text, dark mint small text, dark tayf blue buttons. Gabarito, Figtree, JetBrains Mono, Caveat. Round containers, sharp triangles, 60° grid. Motion: EMPH cubic-bezier(.2,0,0,1); type rises vertically, containers and brand geometry move on the 0/60/120° axes (MOTION.md 3 and 5). Hidden "before" states exist only under .ready (set by site.js when motion is allowed), so the page is complete without JS, with reduced motion and in a headless capture. */ :root { color-scheme: light; --ground: var(--color-mint-white); --surface: var(--color-white); --ink: var(--color-ink); /* round 5: the ink is #00445A (tokens --color-ink); petrol #00445A is retired */ --ink-2: var(--color-ink-800); --teal: var(--color-tayf-blue-700); /* labels: the tokens' text accent */ --btn: var(--color-tayf-blue-700); --btn-h: var(--color-tayf-blue-800); --line: var(--color-mint-200); --line-2: var(--color-mint-100); /* one brand gradient (Kurallar 26): the logo gradient on the mark, on the word and as the white logo's ground */ --tayf: var(--gradient-brand); --tayf-word: var(--gradient-brand); --tayf-deep: var(--gradient-brand); /* the white logo's ground: the logo gradient at 135deg, so lime is only the top-left corner and the mark sits on the mint-to-blue half (SPEC 2.1, 02_logo/kilitler/kilit-sayfasi.png) */ --tayf-tile: linear-gradient(135deg, #D7E55F 0%, #89D8B4 35%, #65B8DA 70%, #798DCB 100%); --page-ground: var(--ground); --emph: cubic-bezier(.2, 0, 0, 1); --exit: cubic-bezier(.3, 0, 1, 1); --wrap: var(--layout-content-max); --margin: var(--layout-margin); --inner: min(calc(100% - 2 * var(--margin)), var(--wrap)); --nav-h: 72px; --sec: var(--layout-section-pad); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M0 .5H52M0 45.5H52M0 90L52 0M0 0L52 90' stroke='%23D3EDE6' fill='none'/%3E%3C/svg%3E"); } @media (max-width: 767px) { :root { --nav-h: 60px; --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='52'%3E%3Cpath d='M0 .5H30M0 26.5H30M0 52L30 0M0 0L30 52' stroke='%23D3EDE6' fill='none'/%3E%3C/svg%3E"); } } /* ---------- round 5: themes for the brand book pages (Açık default, Loş, Gece) ---------- Loş: mint-grey grounds, off-white surfaces, ink text; the logo still on light grounds. Gece: the night tokens (tokens/tayfcet.css: #0B1716, #142220), light text. The logo never stands on the night ground unless kimlik.js's LOGO_ON_NIGHT is true (html.logo-night): the chapters that show the mark large keep a lit stage (html[data-stage="light"]), and the header and footer marks sit on a small light disc. Light objects (paper, cards, the simulated apps) keep light tokens inside them. */ :root { --k-white: #FFFFFF; --k-mint: #F3F8F7; --k-lat: #C9E7DE; --on-btn: #fff; } html[data-tema="los"] { --color-white: #F4F8F7; --color-mint-white: #DDE7E6; --color-mint-100: #D0DEDB; --color-mint-200: #BCD0CC; --ground: #DDE7E6; --surface: #F4F8F7; --line: #BCD0CC; --line-2: #D0DEDB; --ink-2: #22495A; --teal: #185E79; --btn: #185E79; --btn-h: #14506A; --k-white: #E7EFEE; --k-mint: #DDE7E6; --k-lat: #B9D3CD; --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M0 .5H52M0 45.5H52M0 90L52 0M0 0L52 90' stroke='%23C3D6D2' fill='none'/%3E%3C/svg%3E"); } html[data-tema="gece"] { color-scheme: dark; --color-white: #142220; --color-mint-white: #0B1716; --color-mint-100: #18302D; --color-mint-200: #21423E; --ground: #0B1716; --surface: #142220; --ink: #EAF4F1; --ink-2: #B7CBC7; --teal: #84D3B9; --btn: #8CCBE6; --btn-h: #B3DDEE; --on-btn: #0B1716; --line: #21423E; --line-2: #18302D; --k-white: #101D1B; --k-mint: #0B1716; --k-lat: #1F3B37; --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M0 .5H52M0 45.5H52M0 90L52 0M0 0L52 90' stroke='%231B3532' fill='none'/%3E%3C/svg%3E"); --shadow-1: 0 10px 24px -14px rgba(0, 0, 0, .7); } /* the lit stage in Gece: the chapter that shows the mark large is light again (the same tokens as Açık) */ html[data-tema="gece"][data-stage="light"]:not(.logo-night) { color-scheme: light; --color-white: #FFFFFF; --color-mint-white: #F3F8F7; --color-mint-100: #EAF4F1; --color-mint-200: #C9E7DE; --ground: #F3F8F7; --surface: #FFFFFF; --ink: #00445A; --ink-2: #2C5A6E; --teal: #1D6F8C; --btn: #1F6F93; --btn-h: #185C7A; --on-btn: #fff; --line: #C9E7DE; --line-2: #EAF4F1; --k-white: #FFFFFF; --k-mint: #F3F8F7; --k-lat: #C9E7DE; } html[data-tema="gece"] body { transition: background-color .9s var(--emph), color .5s var(--emph); } /* light objects keep light tokens inside (paper, cards, simulated interfaces, the previews) */ html[data-tema="gece"] :is(.sim, .axp-card, .ax-mail, .rf-t, .mo-close, .pv-art, .ax-desk, .lb-bar, .sb-lock-stage, .sb-wall .sb-a) { --ink: #00445A; --ink-2: #2C5A6E; --teal: #1D6F8C; --btn: #1F6F93; --on-btn: #fff; --surface: #FFFFFF; --line: #C9E7DE; --color-mint-100: #EAF4F1; --color-mint-200: #C9E7DE; --color-mint-white: #F3F8F7; --ground: #F3F8F7; color: var(--ink); } html[data-tema="gece"]:not(.logo-night) .sb-lock-stage { background: #F3F8F7; border-radius: 24px; padding: 24px; } /* the small marks of the header and the footer on a light disc in Gece */ html[data-tema="gece"]:not(.logo-night) :is(.brand taf-logo, .sb-row .sb-logo:not(.sb-cube), .sb-q .sb-logo:not(.sb-cube), .foot .brand-mark) { background: #F3F8F7; border-radius: 12px; padding: 4px; box-sizing: content-box; } /* tur 13 final check: the white-on-clear marks (bi'dizi, KAFAdan) were inverted together with their disc, black on black; on the night ground they show as they are, no disc and no inversion. The MaxArtHub cube floats without a disc too */ html[data-tema="gece"]:not(.logo-night) :is(.sb-row, .sb-q) .sb-logo.mono-invert { background: none; filter: none; } /* the switch */ .tema { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; transition: border-color .25s var(--emph), color .25s var(--emph); } .tema:hover { border-color: var(--teal); color: var(--teal); } .tema-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 0 0) left / 0% 100% no-repeat; } .tema[data-on="los"] .tema-dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .tema[data-on="gece"] .tema-dot { background: currentColor; } @media (max-width: 560px) { .tema-t { display: none; } .tema { padding: 9px; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); } body { margin: 0; background: var(--page-ground); transition: background-color .9s var(--emph); color: var(--ink); font: 400 var(--text-body-size)/1.6 var(--font-text); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin: 0; text-wrap: balance; } p { margin: 0 0 1em; } button { font: inherit; color: inherit; } ::selection { background: var(--color-mint-200); color: var(--ink); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: var(--inner); margin-inline: auto; } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 10px 14px; border-radius: 999px; font-weight: 600; } .skip:focus { left: 8px; } .ti { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; } /* ---------- labels, buttons, chips ---------- */ .label { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; font: var(--text-label-weight) var(--text-label-size)/var(--text-label-leading) var(--font-mono); letter-spacing: var(--text-label-tracking); text-transform: uppercase; color: var(--teal); } .label::before { content: ''; width: 7px; height: 8px; flex: none; background: var(--color-mint); clip-path: polygon(0 0, 100% 50%, 0 100%); } .label .sep { opacity: .7; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--btn); background: var(--btn); color: var(--on-btn, #fff); font: var(--text-button-weight) var(--text-button-size)/1.2 var(--font-text); cursor: pointer; transition: background-color .25s var(--emph), border-color .25s var(--emph), color .25s var(--emph), transform .25s var(--emph); } .btn:hover { background: var(--btn-h); border-color: var(--btn-h); transform: translateY(-2px); } .btn:active { transform: scale(.98); } .btn .ti { width: 18px; height: 18px; } .btn.ghost { background: transparent; color: var(--btn); } .btn.ghost:hover { background: rgba(29, 111, 140, .07); color: var(--btn-h); } .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; } .chips li { font: 500 13px/1 var(--font-text); padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } .tri { display: inline-block; width: 12px; height: 10.4px; flex: none; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--tayf); } .seg { display: flex; flex-wrap: wrap; gap: 8px; } .seg button { font: 600 14px/1 var(--font-text); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .25s var(--emph), color .25s var(--emph), border-color .25s var(--emph); } .seg button:hover { border-color: var(--teal); } .seg button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } /* ---------- brand devices: tayf light, triangle lattice, gradient hairline ---------- */ .aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aura i { position: absolute; border-radius: 50%; } /* Light on the diagonal (Kurallar 28, 2026-10-11): yellow top-left, blue bottom-right. Light rule (Kurallar 24): glow may surround the logo and the headlines, never cover them, so each pool's centre sits on its corner (`translate` composes with the drift animation's `transform`) and pages with text in a corner flatten that pool into the free edge band. */ .aura i:nth-child(1) { width: 58%; aspect-ratio: 1.3; left: 0; top: 0; translate: -50% -50%; background: var(--gradient-aura-lime); } .aura i:nth-child(2) { width: 62%; aspect-ratio: 1.3; right: 0; bottom: 0; translate: 50% 50%; background: var(--gradient-aura-cyan); } /* round 8: the glows float: a slow closed loop (28 s and 37 s, a few per cent of their size, transform only), paused off screen (site.js .paused), still with reduced motion */ .motion .aura i { animation: auraFloat 28s ease-in-out infinite; will-change: transform; } .motion .aura i:nth-child(2) { animation-duration: 37s; animation-delay: -15s; animation-direction: reverse; } @keyframes auraFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(3%, 2%) scale(1.03); } 50% { transform: translate(1.5%, 4.5%) scale(.985); } 75% { transform: translate(-2.5%, 2%) scale(1.02); } } /* home hero and Kimlik intro: the copy holds the top-left, so the yellow pool is a low band along the top edge and the blue one sits behind the reel's corner (hero) or on the empty right edge (intro) */ .hero .aura i:nth-child(1), .k-intro .aura i:nth-child(1) { width: 70%; aspect-ratio: 4.2; translate: -38% -62%; } .hero .aura i:nth-child(2) { width: 52%; translate: 38% 30%; } @media (max-width: 760px) { .hero .aura i:nth-child(1) { width: 130%; aspect-ratio: 3; translate: -42% -72%; } } .k-intro .aura i:nth-child(2) { width: 48%; top: 30%; bottom: auto; translate: 52% -40%; } /* Ground-colour core behind a logo: solid over the mark plus its clear space (one cell), fading out beyond it, so no aura bleeds into the mark. Same build as 07_uygulamalar/_ortak/uygulama.css [data-glass]::before. */ .k-logo-stage taf-logo, .k-lock-stage, .story-stage { --core: var(--surface); } .k-logo-stage taf-logo { isolation: isolate; } .k-logo-stage taf-logo::before { content: ''; position: absolute; inset: -60%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--core) 0%, var(--core) 76%, color-mix(in srgb, var(--core) 50%, transparent) 88%, transparent 100%); } .k-lock-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 46% 60% at 50% 50%, var(--core) 62%, color-mix(in srgb, var(--core) 50%, transparent) 80%, transparent 100%); } /* the lockup (z-index 1, below) follows the ::before in tree order, so it paints over the core; the aura (z-index 0) stays under both */ /* tayf-story.js now puts its light pools in the corners (light rule, 2026-10-11); the site adds the core over them. */ .story-stage { isolation: isolate; } .story-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 34% 42% at 50% 47%, var(--core) 58%, transparent 100%); } .story-stage > div { z-index: -2; } /* Glass gloss: the components draw it at 22 % (light rule). Below 240 px (nav, tiles) no gloss at all. */ taf-logo[mode="nav"] .gl { fill-opacity: 0; } .paused, .paused * { animation-play-state: paused !important; } .lattice { position: absolute; inset: 0; pointer-events: none; background-image: var(--lattice); background-position: var(--margin) 0; -webkit-mask-image: linear-gradient(30deg, transparent 32%, #000 88%); mask-image: linear-gradient(30deg, transparent 32%, #000 88%); } .hairline { position: absolute; top: 0; right: 0; left: calc((100% - var(--inner)) / 2); height: 2px; background: var(--tayf); } /* ---------- header ---------- */ .top { position: sticky; top: 0; z-index: 50; height: var(--nav-h); view-transition-name: top; } .top::before { content: ''; position: absolute; inset: 0; background: rgba(243, 248, 247, .95); -webkit-backdrop-filter: saturate(1.2) blur(16px); backdrop-filter: saturate(1.2) blur(16px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .3s var(--emph); } .top.scrolled::before, .menu-open .top::before { opacity: 1; } .top-in { position: relative; height: 100%; width: var(--inner); margin-inline: auto; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); } .brand { --mw: 80px; display: flex; align-items: center; margin-right: auto; border-radius: 8px; } .brand taf-logo { width: calc(var(--mw) * 1.06); margin: calc(var(--mw) * -.03); flex: none; cursor: pointer; } .brand .wm { display: block; flex: none; overflow: visible; } taf-logo { display: inline-block; vertical-align: middle; } taf-logo > .fb { display: block; width: 100%; height: auto; overflow: visible; } taf-logo:defined > .fb { display: none; } .nav ul { display: flex; gap: clamp(16px, 2.2vw, 32px); list-style: none; margin: 0; padding: 0; } .nav a { position: relative; display: block; padding: 8px 0; font: 500 15px/1 var(--font-text); } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--emph); } .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); } .nav a[aria-current] { color: var(--teal); } .lang { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: border-color .25s var(--emph), color .25s; } .lang:hover { border-color: var(--teal); color: var(--teal); } .menu-btn { display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; } .menu-btn .ico { position: relative; display: block; width: 20px; height: 20px; } .menu-btn .ti { position: absolute; inset: 0; width: 20px; height: 20px; } .menu-btn .ti:last-child, .menu-btn[aria-expanded="true"] .ti:first-child { display: none; } .menu-btn[aria-expanded="true"] .ti:last-child { display: inline-block; } .progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tayf); transform: scaleX(0); transform-origin: left; pointer-events: none; } .menu { position: fixed; z-index: 49; top: calc(var(--nav-h) + 8px); left: var(--margin); right: var(--margin); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 12px 24px 20px; } .menu[hidden] { display: none; } .menu ul { list-style: none; margin: 0; padding: 0; } .menu li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 26px/1.15 var(--font-display); letter-spacing: -.01em; } .menu li a[aria-current] { color: var(--teal); } .menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 18px 0 0; font-size: 15px; color: var(--teal); } .motion .menu { transition: opacity .42s var(--emph), transform .42s var(--emph); } .motion .menu:not(.open) { opacity: 0; transform: translate(12px, -20.8px); transition: opacity .25s var(--exit), transform .25s var(--exit); } .motion .menu li { transition: opacity .42s var(--emph), transform .42s var(--emph); transition-delay: calc(120ms + var(--d) * 70ms); } .motion .menu:not(.open) li { opacity: 0; transform: translateY(12px); transition-delay: 0ms; } @media (max-width: 960px) { .nav { display: none; } .menu-btn { display: grid; } /* without JS the menu button cannot open its panel: the links sit in a second row instead */ .no-js .menu-btn { display: none; } .no-js .nav { display: block; position: absolute; top: 100%; left: 0; right: 0; margin: 0 calc(-1 * var(--margin)); padding: 4px var(--margin) 8px; overflow-x: auto; background: var(--ground); border-bottom: 1px solid var(--line); } } @media (max-width: 767px) { .brand { --mw: 64px; } } /* ---------- home hero ---------- */ .hero { position: relative; padding: clamp(40px, 8vh, 104px) 0 0; overflow: clip; } .hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .hero-copy { grid-column: 1 / span 6; } .reel { grid-column: 7 / -1; } .avail { margin-bottom: clamp(20px, 3vh, 32px); } .avail::before { display: none; } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0 4px rgba(72, 182, 163, .18); } .hero-title { font: 700 clamp(52px, 7.4vw, 124px)/.94 var(--font-display); letter-spacing: -.035em; margin: 0; } .hero-title .line { display: block; } .hero-title .line-b { color: var(--teal); } .hero-title .w, .case-title .w, .k-title .w { display: inline-block; white-space: nowrap; } .hero-title .l, .case-title .l, .k-title .l { display: inline-block; } .enter .hero-title .l, .enter .case-title .l, .enter .k-title .l { animation: letterIn .55s var(--emph) both; animation-delay: calc(min(var(--i) * 30ms, 600ms) + 80ms); } @keyframes letterIn { from { opacity: 0; transform: translateY(70%); filter: blur(10px); } } .hero-who { display: flex; align-items: baseline; gap: 10px; font: 500 13px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: clamp(24px, 3.4vh, 40px) 0 14px; } .hero-who b { font: 600 17px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink); } /* the name is the headline: Gabarito's weight axis answers the pointer, letter by letter (site.js sets --wg) */ .hero-title .l { font-variation-settings: "wght" var(--wg, 700); transition: font-variation-settings .5s var(--emph); } .hero-title .line-b { padding-left: .5em; } .hero .lede, .lede { font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); max-width: 36ch; margin: 0; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; } .award-link { display: inline-flex; align-items: baseline; gap: 10px; max-width: 34ch; font: 500 15px/1.45 var(--font-text); color: var(--teal); } .award-link .tri { transform: translateY(1px); } .award-link:hover span { text-decoration: underline; text-underline-offset: 3px; } .enter .hero-copy > :nth-child(n+3) { animation: rise .55s var(--emph) both; animation-delay: calc(520ms + var(--k, 0) * 70ms); } .enter .hero-copy > :nth-child(4) { --k: 1; } .enter .hero-copy > :nth-child(5) { --k: 2; } .enter .avail { animation: rise .55s var(--emph) .1s both; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } } @media (max-width: 960px) { .hero-in { display: block; } .hero-in .reel { margin-top: 44px; } .hero-title { font-size: clamp(46px, 9.4vw, 88px); } } /* the reel: project loops cut with the 60° wipe, a progress hairline under the frame */ .reel { margin: 0; position: relative; } .enter .reel { animation: wipeIn .8s var(--emph) .35s both; } @keyframes wipeIn { from { clip-path: polygon(0 0, 0 0, -32.5% 100%, -32.5% 100%); } to { clip-path: polygon(0 0, 132.5% 0, 100% 100%, -32.5% 100%); } } .screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--color-mint-100); box-shadow: var(--shadow-3); } .screen .still, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .screen video { opacity: 0; } .screen video.under { opacity: 1; z-index: 1; } .screen video.live { opacity: 1; z-index: 2; } .screen video.wipe { animation: cut60 .7s var(--emph) both; } @keyframes cut60 { from { clip-path: polygon(0 0, 0 0, -32.5% 100%, -32.5% 100%); } to { clip-path: polygon(0 0, 132.5% 0, 100% 100%, -32.5% 100%); } } @keyframes cut60sq { from { clip-path: polygon(0 0, 0 0, -57.8% 100%, -57.8% 100%); } to { clip-path: polygon(0 0, 157.8% 0, 100% 100%, -57.8% 100%); } } .screen-link { position: absolute; inset: 0; z-index: 5; border-radius: var(--r-lg); } .reel-bar { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: 16px 2px 0; font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--teal); } .clip-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 15px/1.3 var(--font-text); letter-spacing: 0; color: var(--ink); } .clip-name > span { display: inline-block; } .clip-name > .swap { animation: rise .42s var(--emph) both; } .clip-client { text-align: right; max-width: 28ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 560px) { .clip-client { display: none; } .reel-bar { grid-template-columns: auto auto minmax(0, 1fr); } } /* pause / play for the reel (WCAG 2.2.2); the play glyph is the counter triangle (SPEC 2.8) */ .reel-toggle { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--btn); cursor: pointer; transition: background-color .25s var(--emph), color .25s var(--emph), border-color .25s var(--emph); } .reel-toggle:hover { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .reel-toggle .ti { grid-area: 1 / 1; width: 13px; height: 13px; } .reel-toggle .ti:last-child, .reel-toggle[aria-pressed="true"] .ti:first-child { display: none; } .reel-toggle[aria-pressed="true"] .ti:last-child { display: inline-block; } .clip-progress { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; } .clip-progress::after { content: ''; position: absolute; inset: 0; background: var(--tayf); transform: scaleX(0); transform-origin: left; } .clip-progress.going::after { animation: progress var(--dur, 3.4s) linear both; } @keyframes progress { to { transform: scaleX(1); } } /* every cover, moving slowly along 0° */ .strip { position: relative; z-index: 1; margin-top: clamp(48px, 8vh, 96px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .strip-track { display: flex; gap: 12px; width: max-content; } .motion .strip-track { animation: slide 130s linear infinite; } .strip:hover .strip-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } .strip-item { position: relative; flex: none; width: clamp(140px, 13vw, 200px); aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--pt); } .strip-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); opacity: .82; transition: filter .5s var(--emph), opacity .5s var(--emph), transform .7s var(--emph); } .strip-item:hover img { filter: none; opacity: 1; transform: scale(1.05); } .strip-item span { position: absolute; left: 8px; right: 8px; bottom: 8px; width: max-content; max-width: calc(100% - 16px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); font: 600 12px/1.3 var(--font-text); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--emph), transform .25s var(--emph); } .strip-item:hover span { opacity: 1; transform: none; } /* ---------- sections ---------- */ .sec { padding-top: var(--sec); scroll-margin-top: var(--nav-h); } .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); } .sec-head > .label { grid-column: 1 / span 3; align-self: start; padding-top: .9em; } .sec-main { grid-column: 4 / -1; } .sec-title { font-size: clamp(34px, 22px + 2.6vw, 62px); line-height: 1.02; max-width: 20ch; } .sec-text { margin: 18px 0 0; max-width: 54ch; font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); } @media (max-width: 860px) { .sec-head { display: block; } .sec-head > .label { padding-top: 0; margin-bottom: 14px; } } /* awards */ .award-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .award a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: transform .25s var(--emph), border-color .25s var(--emph), box-shadow .25s var(--emph); } .award a:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--shadow-2); } .award-top { display: flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } /* round 12: the award levels in the award's own metals (crystal, silver, bronze), not the brand gradient */ .lvl-kristal .tri { background: linear-gradient(160deg, #F2FBFD 0%, #B9E1EE 45%, #6FB2CB 100%); } .lvl-gumus .tri { background: linear-gradient(160deg, #F1F4F5 0%, #B8C3C7 45%, #7F8E94 100%); } .lvl-bronz .tri { background: linear-gradient(160deg, #F0CDA4 0%, #C08A55 45%, #8A5A2E 100%); } .award b { font: 700 clamp(20px, 1.8vw, 26px)/1.1 var(--font-display); letter-spacing: -.01em; margin-top: clamp(20px, 3vw, 40px); } .award .cat { color: var(--ink-2); font-size: 16px; line-height: 1.4; } .award .client { margin-top: auto; padding-top: 20px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--teal); } @media (max-width: 1000px) { .award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .award-grid { gap: 10px; } .award a { padding: 16px; } } /* cards */ .card { display: block; position: relative; } .card-media { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--pt, var(--color-mint-100)); aspect-ratio: 4 / 3; transition: box-shadow .5s var(--emph); } .card-media img, .card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--emph), opacity .4s var(--emph); } .card-media video { opacity: 0; } .card.playing .card-media video { opacity: 1; } .card:hover .card-media { box-shadow: 0 28px 56px -28px var(--pa, rgba(0, 68, 90, .3)); } .card:hover .card-media img, .card:hover .card-media video { transform: scale(1.03); } .card-text { padding: 16px 2px 0; } .card-idx { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); } .swatch { width: 9px; height: 10.4px; flex: none; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--pa); } .card h3 { display: inline; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.18; letter-spacing: -.01em; background: linear-gradient(var(--teal), var(--teal)) 0 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--emph); } .card:hover h3 { background-size: 100% 2px; } .card-meta { margin: 8px 0 0; font: 500 12px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--teal); } .featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 24px); } .featured .card.wide { grid-column: span 2; } /* the works that wait for their turn in the featured feed (site.js, pull to refresh) */ .featured > .card[hidden] { display: none; } .featured .card.wide .card-media { aspect-ratio: 21 / 9; border-radius: var(--r-lg); } .featured .card h3 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.08; } .featured .card:nth-child(3n+3) { margin-top: clamp(0px, 7vw, 96px); } @media (max-width: 760px) { .featured { grid-template-columns: 1fr; } .featured .card.wide { grid-column: auto; } .featured .card.wide .card-media { aspect-ratio: 4 / 3; } .featured .card:nth-child(3n+3) { margin-top: 0; } } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 44px 24px; } .grid.small { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } .grid.small .card h3 { font-size: 20px; } .card.hide { display: none; } .filters { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .filters button { position: relative; z-index: 1; font: 500 14px/1 var(--font-text); padding: 10px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .25s var(--emph), color .25s var(--emph), border-color .25s var(--emph); } .filters button sup { margin-left: 5px; font: 500 10px/1 var(--font-mono); vertical-align: 4px; color: var(--teal); transition: color .25s var(--emph); } .filters button:hover { border-color: var(--teal); } .filters button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .filters button[aria-pressed="true"] sup { color: rgba(255, 255, 255, .8); } /* with JS the pressed colour is a pill that glides from button to button */ .f-pill { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--btn); opacity: 0; pointer-events: none; transition: transform .5s var(--emph), width .5s var(--emph), height .5s var(--emph), opacity .2s; } .filters.pilled .f-pill { opacity: 1; } .filters.pilled button[aria-pressed="true"] { background: transparent; border-color: transparent; } .f-count { margin: 14px 0 0; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .f-count b { display: inline-block; min-width: 2ch; color: var(--ink); font-weight: 600; } .card-play { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--btn); box-shadow: var(--shadow-1); transition: opacity .3s var(--emph), transform .3s var(--emph); } .card-play .ti { width: 16px; height: 16px; } .card.playing .card-play { opacity: 0; transform: scale(.8); } /* ---------- pointer details (fine pointers only, set up by site.js): a label that follows the cursor over media, and magnetic buttons that lean toward it ---------- */ .cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); font: 600 13px/1 var(--font-text); opacity: 0; scale: .6; transition: opacity .25s var(--emph), scale .35s var(--emph); will-change: transform; } .cursor::before { content: ''; width: 8px; height: 9.2px; background: var(--tayf); clip-path: polygon(0 0, 100% 50%, 0 100%); } .cursor.on { opacity: 1; scale: 1; } /* on video the cue is the hidden play button: the logo's counter, pointing up (SPEC 2.8) */ .cursor.watch::before { width: 9.2px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .magnet { will-change: transform; } .magnet > * { transition: transform .35s var(--emph); } /* brand band: every client once, along 0° */ .band { padding-top: var(--sec); overflow: hidden; } .band-track { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); width: max-content; margin-top: 22px; padding-left: var(--margin); } .motion .band-track { animation: slide 70s linear infinite; } .band:hover .band-track { animation-play-state: paused; } .band-track span { font: 700 clamp(30px, 4.6vw, 68px)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--color-ink-600); white-space: nowrap; transition: color .25s var(--emph); } .band-track span:hover { color: var(--ink); } .band .sep { width: 13px; height: 15px; flex: none; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--color-mint); } /* contact: the deck's chapter slide (07_uygulamalar/sunum, slide 2): a big gradient numeral on white, and one 60° cut that opens a mint-white lattice field on the right. The cut runs through a lattice vertex at the bottom, so the edge is a lattice line. Under the pointer the lattice lines brighten in a small circle (lines only, no glow behind text). */ .contact { position: relative; overflow: hidden; margin-top: var(--sec); padding: clamp(56px, 9vw, 128px) 0 var(--sec); background: var(--surface); scroll-margin-top: var(--nav-h); } .c-field { position: absolute; top: 0; bottom: 0; left: 58%; width: 100%; overflow: hidden; background: var(--ground); transform: skewX(-30deg); transform-origin: 0 100%; } .c-lattice { position: absolute; inset: 0 -60% 0 0; transform: skewX(30deg); transform-origin: 0 100%; background-image: var(--lattice); background-position: 0 100%; } .c-lit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpath d='M0 .5H52M0 45.5H52M0 90L52 0M0 0L52 90' stroke='%2384CBBC' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(circle 180px at var(--mx, -999px) var(--my, -999px), #000 0, transparent 100%); mask-image: radial-gradient(circle 180px at var(--mx, -999px) var(--my, -999px), #000 0, transparent 100%); } @media (max-width: 767px) { .c-lit { background-image: none; } } .ready .c-field { transition: clip-path 1.1s var(--emph) .1s; clip-path: inset(0 0 0 0); } .ready .contact:not(.in) .c-field { clip-path: inset(0 0 0 100%); } .contact-in { position: relative; z-index: 1; } .c-num { width: clamp(220px, 34vw, 520px); margin: clamp(4px, 1vw, 16px) 0 0 -.06em; } .big-num { display: block; width: 100%; height: auto; overflow: visible; } .big-num text { font: 700 400px/1 var(--font-display); letter-spacing: -.05em; } .contact-title { font-size: clamp(42px, 6vw, 96px); line-height: .98; letter-spacing: -.035em; margin: clamp(-24px, -1.6vw, -8px) 0 0; max-width: 12ch; } .contact-sub { font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); max-width: 40ch; margin: 20px 0 28px; } .mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; } .mail { display: inline-block; font: 600 clamp(24px, 3.4vw, 48px)/1.15 var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; padding-bottom: 6px; background: linear-gradient(var(--teal), var(--teal)) 0 100% / 0 3px no-repeat; transition: background-size .35s var(--emph); } .mail:hover { background-size: 100% 3px; } .copy-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 500 13px/1 var(--font-text); color: var(--teal); cursor: pointer; transition: border-color .25s var(--emph), color .25s var(--emph); } .copy-mail:hover { border-color: var(--teal); color: var(--ink); } .copy-mail .ti { width: 16px; height: 16px; } .copy-mail.done { border-color: var(--teal); color: var(--ink); } .contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; } .c-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; } .c-social-k { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-right: 4px; } @media (max-width: 760px) { .c-field { left: 74%; } .c-num { width: min(62vw, 300px); } } /* footer */ .foot { position: relative; background: var(--ground); padding: clamp(48px, 7vw, 80px) 0 40px; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .8fr); gap: 32px 24px; align-items: start; } .foot-lockup { justify-self: start; border-radius: 8px; } .foot-lockup img { width: 224px; height: auto; } .foot-line { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 0; font-size: 16px; } .foot-line a { transition: color .25s var(--emph); } .foot-line a:hover { color: var(--btn); } .foot-line .sep, .menu-foot .sep { color: var(--teal); } /* the crew: sub-brand logos in one calm row, monochrome until hovered or focused (colour, or for the white logos full ink) */ .foot-subs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.95fr); gap: 20px 24px; align-items: center; margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); } .foot-subs-head { display: grid; gap: 12px; } .foot-subs-line { display: grid; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .fsl-text { max-width: 30ch; } .sb-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; } .sb-row a { display: grid; place-items: center; height: 56px; padding: 4px 6px; border-radius: 10px; } .sb-row .sb-logo { width: auto; height: auto; max-height: 48px; max-width: 112px; } .sb-logo { transition: filter .45s var(--emph), opacity .45s var(--emph), transform .45s var(--emph); } .sb-logo.mono-ink { filter: none; } .sb-logo.mono-invert { filter: invert(1) grayscale(1) brightness(.2); } .sb-row a:hover .sb-logo, .sb-row a:focus-visible .sb-logo, .sb-row a:hover .sb-cube, .sb-row a:focus-visible .sb-cube { transform: translateY(-2px); } /* MaxArtHub: its hero cube, small, floating like on its own site (4.8 s bob) */ .sb-cube { display: block; width: auto; animation: cubeBob 4.8s ease-in-out infinite; transition: transform .45s var(--emph); filter: none !important; overflow: visible; } /* the cube image carries its own glow around it (the cube itself is about two thirds of the image), so it is set a little larger than a flat logo would be, and no box around it clips it */ .sb-row .sb-cube { height: 64px; max-height: none; max-width: none; margin: -8px 0; } .sb-art .sb-cube { max-height: none; height: 100px; } .sb-wall .sb-item:first-child .sb-art .sb-cube { height: clamp(200px, 22vw, 300px); max-height: none; } .sbc-logo.sb-cube { max-height: none; height: clamp(150px, 15vw, 210px); } .pv-logo.sb-cube { height: 64px; } @keyframes cubeBob { 50% { translate: 0 -4px; } } @media (prefers-reduced-motion: reduce) { .sb-cube { animation: none; } } .sb-text { font: 700 18px/1 var(--font-display); color: var(--ink-2); } @media (max-width: 860px) { .foot-subs { grid-template-columns: 1fr; } .sb-row { justify-content: flex-start; } } @media (max-width: 480px) { .sb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; } .sb-row .sb-logo { max-height: 40px; max-width: 100%; } } .foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(40px, 6vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; } .foot-base p { margin: 0; } .fine { max-width: 62ch; color: var(--teal); order: 1; } .credit { order: 2; font-weight: 600; } @media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-lockup { grid-column: 1 / -1; } } @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } .foot-lockup img { width: 190px; } } /* ---------- case page: light page, the project colour lives in a contained stage and a small accent ---------- */ .case-head { padding-top: clamp(28px, 6vh, 72px); } .back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font: 500 14px/1 var(--font-text); color: var(--teal); } .back .ti { width: 18px; height: 18px; transition: transform .25s var(--emph); } .back:hover .ti { transform: translateX(-4px); } .case-head .chips { margin: 0; } .case-title { font-size: clamp(42px, 7.2vw, 112px); line-height: .98; letter-spacing: -.035em; margin: 22px 0 0; max-width: 15ch; } .case-head .lede { margin-top: 24px; max-width: 46ch; } .case-stage { margin-top: clamp(32px, 5vh, 56px); padding: clamp(16px, 4.4vw, 72px); border-radius: var(--r-xl); background: var(--pt); display: grid; place-items: center; } .case-stage img { width: min(100%, calc(72vh * var(--ar, 1.333))); border-radius: var(--r-md); box-shadow: 0 30px 60px -30px rgba(0, 68, 90, .35); } .enter .case-stage { animation: wipeIn .9s var(--emph) .3s both; } .case-info { padding-top: clamp(40px, 6vh, 72px); } .meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; border-top: 1px solid var(--line); } .meta div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); } .meta dt { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .meta dd { margin: 6px 0 0; font-weight: 600; } .award-chips { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px; } .award-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; } .award-chips span:last-child { color: var(--ink-2); } .case-intro { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.5; max-width: 60ch; margin: 40px 0 0; } .source { margin: 18px 0 0; font: 500 12px/1.5 var(--font-mono); color: var(--teal); } .case-body { margin-top: clamp(48px, 8vh, 96px); } .case-sec { margin-bottom: clamp(72px, 11vh, 128px); scroll-margin-top: calc(var(--nav-h) + 16px); } .case-sec-head { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 20px; max-width: 980px; margin-bottom: 32px; } .case-sec-head .num { grid-row: span 3; padding-top: 10px; font: 500 14px/1 var(--font-mono); color: var(--teal); } .case-sec-head h2 { font-size: clamp(30px, 4vw, 52px); } .case-meta { margin: 12px 0 14px; font: 500 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--teal); } .case-text { font-size: 18px; max-width: 62ch; margin: 0; } @media (max-width: 620px) { .case-sec-head { grid-template-columns: 1fr; } .case-sec-head .num { grid-row: auto; padding: 0 0 10px; } } .media { display: grid; gap: clamp(12px, 1.6vw, 22px); } .m { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--pt, var(--color-mint-100)); } .m img, .m video { width: 100%; } .mrow { display: grid; gap: clamp(12px, 1.6vw, 22px); align-items: start; } .mrow.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mrow.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mrow.n1 .m { max-width: 520px; margin: 0 auto; width: 100%; } @media (max-width: 620px) { .mrow.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .embed .ratio { position: relative; aspect-ratio: 16 / 9; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .facade { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--pt, var(--color-mint-100)); overflow: hidden; border-radius: var(--r-md); } .facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--emph); } .facade:hover img { transform: scale(1.03); } .facade .play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--btn); box-shadow: var(--shadow-3); transition: transform .25s var(--emph), background-color .25s; } .facade .play .ti { width: 30px; height: 30px; } .facade:hover .play { transform: scale(1.06); background: #fff; } .facade-title { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 600 14px/1.3 var(--font-text); text-align: left; } .behance { margin: 40px 0 0; } /* next project: the next project's tinted stage and its cover */ .next { margin-top: var(--sec); background: var(--surface); border-top: 1px solid var(--line); } .next-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; align-items: center; padding-block: clamp(48px, 8vh, 96px); } .next b { display: block; margin-top: 14px; font: 700 clamp(32px, 5vw, 72px)/1.02 var(--font-display); letter-spacing: -.025em; } .next-arrow { display: inline-grid; margin-top: 18px; color: var(--btn); } .next-arrow .ti { width: 36px; height: 36px; transition: transform .35s var(--emph); } .next-in:hover .next-arrow .ti { transform: translateX(8px); } .next-media { display: block; padding: clamp(12px, 2vw, 24px); border-radius: var(--r-lg); background: var(--pt); } .next-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; transition: transform .6s var(--emph); } .next-in:hover .next-media img { transform: scale(1.03); } @media (max-width: 760px) { .next-in { grid-template-columns: 1fr; } } /* ========================================================================================================= Kimlik: the web brand book as one scroll story (Kurallar 31). No stage, no card: the page is the stage. Two layers live behind the text: .k-ground (the page colour, fixed, z -1) and the mark layer (.k-scene, fixed, drawn by kimlik.js, painted before the chapters so all type sits over it). Base rules below are the calm, static page (no JS, reduced motion); everything under .k-live is the scrubbed story kimlik.js runs. ========================================================================================================= */ .page-kimlik { background: var(--color-mint-white); } .page-kimlik .top::before { background: color-mix(in srgb, var(--kg, #F3F8F7) 97%, transparent); } .k-ground { position: fixed; inset: 0; z-index: -1; background: var(--kg, var(--color-mint-white)); transition: background-color .5s var(--emph); pointer-events: none; } .k-flood { position: absolute; inset: 0; background: var(--tayf-tile); opacity: 0; } /* while the page scrolls nothing takes the pointer (kimlik.js sets .k-scrolling on until 160 ms after the last scroll): no hover work and no hit-testing of the live layers under a resting cursor */ /* round 11: only the heavy live layers stop taking the pointer while the page scrolls (a rule on every element restyled the whole page twice per scroll gesture) */ html.k-scrolling :is(iframe, .mo-stage, .lg-hit, .ic-list, .k-anchor, .td-canvas) { pointer-events: none !important; } .k-scene { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none; contain: strict; } .k-3d-layer { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; } .k-ch { position: relative; padding-top: var(--sec); scroll-margin-top: var(--nav-h); } .k-head { max-width: 40rem; } .k-head .label { margin-bottom: 16px; } .k-h { font-size: clamp(34px, 20px + 2.8vw, 64px); line-height: 1.02; letter-spacing: -.03em; } .k-tx { margin: 16px 0 0; max-width: 46ch; font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); } .k-hint { margin: 14px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .k-anchor { position: relative; } .k-anchor > .fb { display: block; width: 100%; height: auto; overflow: visible; } .k-live .k-anchor > .fb { visibility: hidden; } .anchor-alias { position: absolute; top: calc(-1 * var(--nav-h)); } .k-rules { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } /* round 5: the rules, drawn */ .rf { margin: 0 0 14px; height: 196px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; } .rf-t { position: relative; flex: 1 1 0; min-width: 0; height: 120px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; } .rf-t > svg { width: 64%; height: auto; display: block; } .rf-t em { position: absolute; left: 8px; bottom: 6px; font: 500 10px/1.2 var(--font-mono); letter-spacing: .04em; font-style: normal; color: var(--teal); white-space: nowrap; } .rf-g-white { background: #fff; } .rf-g-mint { background: var(--color-mint-white); } .rf-g-tayf { background: var(--tayf-tile); border-color: transparent; } .rf-wide { flex-basis: 100%; height: 196px; } .rf-0 .rf-t { height: 196px; } .rf-1 .rf-t > svg { width: 38%; position: absolute; right: 9%; top: 50%; translate: 0 -50%; } .rf-1 .rf-half { position: absolute; left: 48%; top: 0; bottom: 0; border-left: 1px dashed rgba(255,255,255,.75); } .rf-1 em { color: #fff; left: auto; right: 10px; } .rf-1 em.rf-lime { left: 10px; right: auto; top: 8px; bottom: auto; color: var(--color-ink, #00445A); } .rf-space { flex-basis: 100%; height: 120px; } .rf-space > svg { width: auto; height: 100px; } .rf-clear { fill: none; stroke: var(--teal); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } .rf-box { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .rf-cell { fill: var(--color-mint-200); stroke: var(--teal); stroke-width: 1; vector-effect: non-scaling-stroke; } .rf-mins { display: flex; align-items: flex-end; gap: 18px; height: 68px; padding: 0 2px; } .rf-min { display: grid; justify-items: start; gap: 6px; } .rf-min em { font: 500 10px/1.2 var(--font-mono); letter-spacing: .04em; font-style: normal; color: var(--teal); white-space: nowrap; } .rf-m64 { width: 64px; height: auto; display: block; } .rf-m96 { width: 96px; height: auto; display: block; } .rf-3 .rf-t { flex-basis: 100%; height: 60px; } .rf-3 .rf-t > svg { width: auto; height: 34px; } .rf-3 .rf-t > svg.rf-stretch { width: 46%; height: 22px; } .rf-3 .rf-under { grid-template-rows: auto auto; align-content: center; gap: 2px; } .rf-3 .rf-under > svg { height: 26px; } .rf-3 .rf-under small { font: 600 9px/1 var(--font-display); color: var(--ink); letter-spacing: .02em; } .rf-3 .rf-line > svg path { fill: none; stroke: var(--teal); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .rf-3 .rf-t em { left: auto; right: 8px; top: 50%; bottom: auto; translate: 0 -50%; } .rf-no::after { content: ''; position: absolute; left: 10%; right: 34%; top: 50%; height: 1.5px; background: var(--ink); rotate: -14deg; border-radius: 1px; } .k-rules li { border-top: 1px solid var(--line); padding-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .k-rules b { display: block; margin-bottom: 6px; font: 600 17px/1.3 var(--font-display); color: var(--ink); } @media (max-width: 960px) { .k-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .k-rules { grid-template-columns: 1fr; } } /* ---------- 01 the opening: big type on the bare page; a light line below the title is the scroll cue ---------- */ .k-op { min-height: 100svh; padding-top: 0; overflow: clip; } .k-op-in { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto 1fr; min-height: calc(100svh - var(--nav-h)); } .k-op-top { min-height: calc(50svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 24px; } .k-title { font-size: clamp(50px, 8.4vw, 136px); line-height: .94; letter-spacing: -.04em; margin: 18px 0 0; max-width: 11ch; } /* round 7: the wordmark inside the title (the lockup's lower-case "tayfcet": Gabarito 700, its own tracking, the logo gradient across the whole word); it arrives as one piece, the letters of the rest follow */ .k-title .k-wm { font-family: Gabarito, var(--font-display); font-weight: 700; letter-spacing: var(--wm-ls, -.02em); background: var(--wm-g, var(--tayf)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .04em .08em 0; margin-bottom: -.08em; } .enter .k-title .k-wm { animation: letterIn .7s var(--emph) both; animation-delay: 60ms; } .k-op-low { padding-top: 12svh; max-width: 40rem; } .k-lede { margin: 0; max-width: 40ch; } .k-ver { margin: 18px 0 0; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } /* the chapter menu (round 5: the first, fuller design, adapted to three pages): a column per page, rows on hairlines */ .k-index { align-self: end; padding: clamp(32px, 6vh, 56px) 0 28px; } .ki-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: start; } .ki-p { margin: 0; border-bottom: 1.5px solid var(--ink); } .ki-p a { display: flex; align-items: baseline; gap: 10px; padding: 0 0 10px; font: 700 clamp(19px, 1vw + 10px, 24px)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); } .ki-p .n { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); } .ki-g ol { list-style: none; margin: 0; padding: 0; } .ki-g li a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 600 15px/1.3 var(--font-text); color: var(--ink); transition: color .25s var(--emph); } .ki-g li .n { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); } .ki-g li .ti { width: 16px; height: 16px; color: var(--btn); opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--emph), transform .25s var(--emph); } .ki-g li a:hover, .ki-g li a:focus-visible, .ki-p a:hover { color: var(--btn); } .ki-g li a:hover .ti, .ki-g li a:focus-visible .ti { opacity: 1; transform: none; } .ki-g:not(.on) li a { color: var(--ink-2); } .ki-g:not(.on) .ki-p { border-bottom-color: var(--line); } @media (max-width: 860px) { .ki-cols { grid-template-columns: minmax(0, 1fr); } .ki-g li a { padding: 10px 0; font-size: 14px; } } /* pages 2 and 3: their own head, then the chapters */ .k-pg { position: relative; padding-top: calc(var(--nav-h) + clamp(32px, 8vh, 96px)); } .k-pg-h { margin: 18px 0 0; font: 700 clamp(48px, 7.2vw, 120px)/.95 var(--font-display); letter-spacing: -.04em; } .k-pg .k-lede { margin-top: clamp(16px, 3vh, 28px); } /* the pager at the end of each page */ .k-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(72px, 10vw, 140px); margin-bottom: clamp(48px, 6vw, 88px); padding-top: 28px; border-top: 1px solid var(--line); } .kp { display: grid; gap: 12px; color: var(--ink); } .kp-next { justify-items: end; text-align: right; } .kp b { display: inline-flex; align-items: center; gap: 14px; font: 700 clamp(28px, 3.4vw, 60px)/1.02 var(--font-display); letter-spacing: -.03em; transition: color .25s var(--emph); } .kp .ti { width: .7em; height: .7em; color: var(--btn); transition: transform .3s var(--emph); } .kp:hover b, .kp:focus-visible b { color: var(--btn); } .kp-next:hover .ti { transform: translateX(6px); } .kp-prev:hover .ti { transform: translateX(-6px); } @media (max-width: 560px) { .k-pager { grid-template-columns: minmax(0, 1fr); } .kp-next { justify-items: start; text-align: left; } } /* review fix (2026-10-13): the section clips its aura; the light fades out before the clip, so no hard edge shows */ .k-op .aura { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 92%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 92%); } .k-op .aura i:nth-child(1) { width: 70%; aspect-ratio: 4.2; translate: -38% -62%; } .k-op .aura i:nth-child(2) { width: 48%; top: auto; bottom: 0; translate: 52% 40%; } /* the mark's place while the story is pinned; the opening keeps the very same box on screen (round 13: the opening shows the mark; without JS it is the still mark in the same place) */ .k-op { --aw: min(46vw, 680px); } .k-live { --aw: min(50vw, 740px); } .k-op-in > .k-anchor { position: absolute; right: 0; width: var(--aw); aspect-ratio: 200 / 103.923; top: calc(54vh - var(--nav-h) - var(--aw) * .51962 * .5556); pointer-events: none; } .k-live .st-pin > .k-anchor { display: block; position: absolute; right: calc((100vw - var(--inner)) / 2); width: var(--aw); aspect-ratio: 200 / 103.923; top: calc(54vh - var(--aw) * .51962 * .5556); } .k-op-low { padding-top: 14vh; } /* round 13: the English title's first line ("The tayfcet") is wider than the Turkish one; beside the mark it is sized to the column left of the mark so the two never touch */ @media (min-width: 861px) { .k-op .k-title:lang(en) { font-size: min(clamp(50px, 8.4vw, 136px), calc((min(100vw - 2 * var(--margin), var(--wrap)) - var(--aw) - 56px) / 4.9)); } } @media (max-width: 860px) { .k-op, .k-live { --aw: calc(100vw - 2 * var(--margin)); } /* phones: the mark sits in the flow between the title and the text, a little smaller; the story's place is higher up */ .k-op-in > .k-anchor { position: relative; right: auto; top: auto; width: min(100%, 300px); margin: clamp(22px, 4.5svh, 40px) 0 0; } .k-live .st-pin > .k-anchor { top: calc(var(--nav-h) + 9vh); } .k-op-top { min-height: 0; padding-top: clamp(28px, 7svh, 64px); } .k-op-low { padding-top: clamp(22px, 4.5svh, 40px); } } /* round 13: the bottom of the first screen says there is more: the next chapter's name over a running line of light and a plain "scroll down"; the chapter menu folds into one button beside it */ .k-op-in { grid-template-rows: auto auto auto 1fr; } .k-op-foot { align-self: end; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; padding: clamp(28px, 5vh, 56px) 0 clamp(22px, 4vh, 40px); } .k-cue { display: inline-grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 16px; justify-self: start; color: var(--ink); max-width: 40rem; } .k-cue-line { position: relative; display: block; width: 14px; min-height: 100%; } .k-cue-line::before { content: ''; position: absolute; left: 6px; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--line); } .k-cue-line i { position: absolute; left: 6px; top: 0; width: 2px; height: 40%; border-radius: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 55%, rgba(255, 255, 255, 0)); box-shadow: 0 0 0 1px rgba(56, 163, 165, .35), 0 0 12px 3px rgba(101, 184, 218, .4); opacity: 0; } .motion .k-cue-line i { animation: cueRun 2.8s cubic-bezier(.45, 0, .2, 1) infinite; } @keyframes cueRun { 0% { transform: translateY(-20%); opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { transform: translateY(160%); opacity: 0; } } .k-cue-t { display: grid; gap: 8px; padding: 2px 0; } .k-cue-k { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .k-cue-k .sep { opacity: .7; } .k-cue-h { font: 700 clamp(26px, 1.4vw + 17px, 40px)/1.05 var(--font-display); letter-spacing: -.025em; transition: color .3s var(--emph); } .k-cue-s { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--font-text); color: var(--btn); } .k-cue-s .ti { width: 18px; height: 18px; } .motion .k-cue-s .ti { animation: cueBob 1.4s var(--emph) infinite alternate; } @keyframes cueBob { from { transform: translateY(-1px); } to { transform: translateY(4px); } } .k-cue:hover .k-cue-h, .k-cue:focus-visible .k-cue-h { color: var(--btn); } .k-fold-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: 600 15px/1 var(--font-text); transition: border-color .25s var(--emph); } .k-fold-btn:hover { border-color: var(--teal); } .k-fold-n { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .k-fold-btn .ti { width: 16px; height: 16px; color: var(--btn); transition: rotate .3s var(--emph); } .k-fold-btn[aria-expanded="true"] .ti { rotate: 180deg; } .k-op-idx { grid-column: 1 / -1; } /* the open menu is a card over the mark layer (the folding mark stays behind it, never through the list) */ .k-op-idx { padding-top: clamp(16px, 2.5vh, 24px); } .k-op-idx .k-index { padding: clamp(18px, 3vh, 30px) clamp(18px, 2.4vw, 36px) clamp(10px, 2vh, 20px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 28px 60px -36px rgba(0, 68, 90, .32); } .motion .k-op-idx .ki-g { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--emph), transform .45s var(--emph); } .motion .k-op-idx .ki-g:nth-child(2) { transition-delay: 70ms; } .motion .k-op-idx .ki-g:nth-child(3) { transition-delay: 140ms; } .motion .k-op-idx.in .ki-g { opacity: 1; transform: none; } .no-js .k-op-idx[hidden] { display: block; } .no-js .k-fold-btn { display: none; } @media (max-width: 860px) { .k-op-foot { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } .k-fold-btn { justify-self: start; } } @media (prefers-reduced-motion: reduce) { .k-cue-line i, .k-cue-s .ti { animation: none; } .k-cue-line i { opacity: 1; top: 30%; } } /* ---------- 02 the story ---------- */ .st-grid { padding-top: 8px; } .st-beats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 40px; max-width: 46rem; } .st-n { margin: 0 0 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); } .st-n span { color: var(--ink); } .st-h { font-size: clamp(30px, 18px + 2.4vw, 56px); line-height: 1.02; letter-spacing: -.03em; } .st-p { margin: 14px 0 0; max-width: 32ch; font-size: clamp(18px, 14px + .5vw, 22px); line-height: 1.5; } .st-cap { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 0; max-width: 42ch; font: 500 13px/1.7 var(--font-mono); letter-spacing: .02em; color: var(--teal); } .st-sw i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .st-count { margin: 6px 0 0; font: 700 clamp(56px, 6vw, 104px)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .st-count span { background: var(--tayf); -webkit-background-clip: text; background-clip: text; color: transparent; } .st-still { margin: 16px 0 0; } .st-still .k-lt { display: block; width: min(320px, 70vw); height: auto; } .st-row { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 10px; } .st-row span { display: grid; justify-items: center; gap: 6px; font: 700 20px/1 var(--font-display); } .st-row .k-lt { width: auto; height: 64px; } .st-bar { display: none; } .st-pin > .k-anchor { width: min(520px, 100%); margin: 48px auto 0; } .k-live .k-story { padding-top: 0; } .k-live .st-pin { position: relative; height: 100vh; overflow: hidden; } .k-live .st-grid { position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 24px; padding: clamp(16px, 3vh, 36px) 0 clamp(20px, 4vh, 40px); pointer-events: none; } .k-live .st-grid a, .k-live .st-grid button { pointer-events: auto; } .k-live .st-head { grid-column: 1 / span 5; grid-row: 1; } .k-live .st-head .k-h { font-size: clamp(22px, 12px + 1.3vw, 34px); } .k-live .st-head .k-tx { display: none; } .k-live .st-beats { grid-column: 1 / span 5; grid-row: 2; align-self: center; margin: 0; gap: 0; } /* wide screens: the beats hang just under the line of light (54vh, see .k-anchor), so the light never crosses the copy */ /* round 5: the beats sit left of the mark, vertically centred in the pin, on a wider measure (all of them fit at 1280 and 1440) */ @media (min-width: 861px) { .k-live { --aw: min(46vw, 680px); } .k-live .st-beats { grid-column: 1 / -1; grid-row: 1 / -1; position: absolute; left: 0; top: clamp(72px, 12vh, 120px); bottom: clamp(36px, 6vh, 64px); width: calc(100% - var(--aw) - clamp(32px, 4vw, 64px)); display: grid; align-items: center; } .k-live .st-beat { align-self: center; } .k-live .st-p { max-width: 40ch; } .k-live .st-cap { max-width: 56ch; } .k-live .st-h { font-size: clamp(40px, 14px + 3.2vw, 80px); } } .k-live .st-beat { grid-area: 1 / 1; opacity: 0; will-change: opacity, transform; } .k-live .st-beat:first-child { opacity: 1; } .k-live .st-h { font-size: clamp(40px, 16px + 3.6vw, 88px); line-height: .98; letter-spacing: -.035em; } .k-live .st-still { display: none; } .k-live .st-bar { display: block; grid-column: 1 / span 4; grid-row: 3; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .k-live .st-bar i { display: block; height: 100%; background: var(--tayf); transform: scaleX(var(--sp, 0)); transform-origin: left; } @media (max-width: 860px) { .k-live .st-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; padding-bottom: 24px; } .k-live .st-head { grid-column: 1; grid-row: 1; } /* review fix (2026-10-13): the cue promises "Logo nereden çıktı?", so phones show the story's title too */ .k-live .st-head .k-h { font-size: clamp(24px, 6.4vw, 30px); margin-top: 4px; } .k-live .st-beats { grid-column: 1; grid-row: 3; align-self: end; } .k-live .st-bar { grid-column: 1; grid-row: 4; margin-top: 18px; } .k-live .st-h { font-size: clamp(34px, 9.6vw, 48px); } .k-live .st-p { font-size: 17px; max-width: none; } .k-live .st-count { font-size: 48px; } .k-live .st-cap { font-size: 12px; } } /* ---------- 03 the logo: on the bare page, a technical drawing around it ---------- */ .lg-pin > .k-anchor { width: min(640px, 100% - 2 * var(--margin) - 64px); margin: 72px auto 120px; } .dims { position: absolute; inset: 0; pointer-events: none; } .dim { position: absolute; display: flex; align-items: center; gap: 8px; margin: 0; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); white-space: nowrap; opacity: var(--dp, 1); transition: opacity .3s var(--emph); } .dim i { position: absolute; background: var(--color-mint-200); } .k-anchor { container-type: inline-size; } /* the drawing: width above the mark, height on its right, the 60° at its left vertex, the callouts below */ .dim-w { left: 0; right: 0; top: -34px; justify-content: center; height: 14px; } .dim-w i { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(var(--dp, 1)); } .dim-w i::before, .dim-w i::after { content: ''; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--color-mint-200); } .dim-w i::before { left: 0; } .dim-w i::after { right: 0; } .dim-w b { position: relative; padding: 0 10px; background: var(--k-mint, var(--color-mint-white)); font-weight: 500; } .dim-h { top: 0; bottom: 0; left: calc(100% + 22px); width: 14px; } .dim-h i { top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(var(--dp, 1)); } .dim-h i::before, .dim-h i::after { content: ''; position: absolute; left: -6px; width: 13px; height: 1px; background: var(--color-mint-200); } .dim-h i::before { top: 0; } .dim-h i::after { bottom: 0; } .dim-h b { position: absolute; left: 22px; top: 50%; translate: 0 -50%; font-weight: 500; } .dim-a { right: calc(100% + 14px); top: calc(33.3% - 8px); } .dim-a b, .dim-c b { font-weight: 500; } /* leaders: from a point on the mark down past its bottom edge (cqw = 1% of the mark's width; its height is 51.96cqw) */ .dim-c { left: 10%; top: 46.2cqw; display: block; } .dim-c::before, .dim-p::before { content: ''; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } .dim-c i { left: 0; top: 0; width: 1px; height: calc(5.8cqw + 30px); transform-origin: top; transform: scaleY(var(--dp, 1)); } .dim-c b { position: absolute; left: -2px; top: calc(5.8cqw + 36px); } .dim-p { left: 40%; top: 28.9cqw; display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; pointer-events: auto; color: var(--btn); white-space: nowrap; } .dim-p::before { background: var(--btn); } .dim-p i { left: 0; top: 0; width: 1px; height: calc(23.1cqw + 30px); background: var(--btn); opacity: .5; transform-origin: top; transform: scaleY(var(--dp, 1)); } .dim-p b, .dim-p span { position: absolute; left: -2px; font-weight: 600; } .dim-p b { top: calc(23.1cqw + 36px); } .dim-p span { top: calc(23.1cqw + 54px); font-weight: 500; color: var(--teal); text-transform: none; letter-spacing: .02em; font-size: 12px; } .dim-p:focus-visible { outline: none; } .dim-p:focus-visible b { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 2px; } .lg-hit { display: none; } .k-fold { display: none; } .k-live .k-fold { display: block !important; position: absolute !important; left: 0; top: 0; width: 100%; opacity: 0; pointer-events: none; } .k-live .k-logo { padding-top: 0; } .k-live .lg-pin { position: relative; height: 100vh; overflow: hidden; } .k-live .lg-grid { position: relative; z-index: 1; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); } .k-live .lg-grid .k-head { max-width: 26rem; } .k-live .lg-pin > .k-anchor { position: absolute; margin: 0; right: calc((100vw - var(--inner)) / 2 + 48px); width: min(46vw, 680px); top: calc(50% + var(--nav-h) / 2 - min(46vw, 680px) * .26); } .k-live .lg-hit { display: block; position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 12px; } .k-live .dim-p { z-index: 2; } /* round 5: the cells' and the play button's callouts only while the mark shows what they name */ .k-live .dim-c { opacity: var(--dc, 0); transition: none; } .k-live .dim-c i { transform: scaleY(var(--dc, 0)); } .k-live .dim-p { opacity: var(--dq, 0); transition: none; } .k-live .dim-p i { transform: scaleY(var(--dq, 0)); } @media (max-width: 600px) { .dim-c, .dim-a, .dim-h { display: none; } } @media (max-width: 860px) { .k-live .lg-pin > .k-anchor { right: auto; left: calc(var(--margin) + 8px); width: calc(100vw - 2 * var(--margin) - 44px); top: 52%; } .k-live .lg-grid .k-hint { display: none; } .dim-h b { left: 16px; writing-mode: vertical-rl; translate: 0 -50%; } } /* ---------- the mark in 3D: a canvas on the page, turned by hand (kimlik.js) ---------- */ .td-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .td-grid > .k-head { grid-column: 1 / span 4; } .td-stage { grid-column: 5 / -1; position: relative; height: clamp(340px, 64vh, 680px); } .td-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; border-radius: 12px; } .td-canvas.grab { cursor: grabbing; } .td-canvas:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } /* the mark is sized by the stage's height too, so its turned outline and the contact shadow under it always fit */ .td-stage > .k-anchor { position: absolute; left: 50%; top: 44%; width: min(78%, 640px, clamp(340px, 64vh, 680px) * 1.05); translate: -50% -50%; pointer-events: none; } .td-on > .k-anchor > .fb { visibility: hidden; } .td-hint { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .k-live .k-3d { min-height: 100vh; display: grid; align-content: center; } .k-live .td-canvas { opacity: 0; } @media (max-width: 860px) { .td-grid > .k-head, .td-stage { grid-column: 1 / -1; } .td-stage { height: clamp(300px, 56vh, 520px); margin-top: 16px; } .td-stage > .k-anchor { width: min(86%, clamp(300px, 56vh, 520px) * 1.05); } } /* the letters component (tayf-harfler.js) in the story's word beat: on the right of the beat's text, over the page */ .k-harfler { display: none; } .k-live .k-harfler { display: block !important; position: absolute !important; z-index: 1; right: calc((100vw - var(--inner)) / 2); top: 50%; width: min(52vw, 800px); translate: 0 -40%; opacity: 0; pointer-events: none; } /* narrow screens: the beat's text gives the row the room it needs (the beat keeps to the bottom of the pin) */ @media (max-width: 860px) { .k-live .k-harfler { right: var(--margin); width: calc(100vw - 2 * var(--margin)); top: calc(var(--nav-h) + 6vh); translate: none; } } /* ---------- 04 lockups: the mark moves aside and the word types in beside or under it ---------- */ .lk-box { position: relative; margin-top: 40px; } .lk-box > .k-anchor, .lk-word { display: none; } .lk-static { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; margin: 0; } .lk-static img { width: auto; height: clamp(72px, 10vw, 120px); } /* round 5: the earlier pill buttons are back (the segmented control of the first version), with the step number */ .lk-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .lk-steps button { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #fff); cursor: pointer; font: 600 14px/1 var(--font-text); color: var(--ink); transition: background-color .25s var(--emph), color .25s var(--emph), border-color .25s var(--emph); } .lk-steps button .n { font: 500 11px/1 var(--font-mono); color: var(--teal); transition: color .25s var(--emph); } .lk-steps button:hover { border-color: var(--teal); } .lk-steps button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .lk-steps button[aria-pressed="true"] .n { color: rgba(255,255,255,.78); } .lk-cap { margin: 10px 0 0; max-width: 56ch; font-size: 16px; color: var(--ink-2); min-height: 3em; } .k-live .k-lock { padding-top: 0; } .k-live .lk-pin { position: relative; height: 100vh; overflow: hidden; } .k-live .lk-grid { position: relative; height: 100%; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); display: flex; flex-direction: column; } .k-live .lk-box { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(12px, 3vh, 32px)); bottom: 140px; margin: 0; } .k-live .lk-ui { margin-top: auto; position: relative; z-index: 1; } .k-live .lk-static { display: none; } .k-live .lk-box > .k-anchor { display: block; position: absolute; left: 0; top: 0; width: 200px; aspect-ratio: 200 / 103.923; } .k-live .lk-word { display: block; position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; } .lk-in { display: inline-block; background: var(--tayf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .02em; } .lk-in .cut { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; } .k-live .lk-ui { padding-bottom: clamp(20px, 4vh, 44px); } .k-live .lk-steps { margin-top: 0; } /* ---------- 05 colourways: the page changes colour ---------- */ .cw-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; } .cw-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--line); } .cw-n { grid-column: 1; margin: 0; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--teal); } .cw-n span { color: var(--ink); } .cw-name { grid-column: 1; margin: 6px 0 0; font: 700 clamp(22px, 2.4vw, 34px)/1.1 var(--font-display); letter-spacing: -.02em; } .cw-hex { font: 500 14px/1 var(--font-mono); letter-spacing: 0; color: var(--teal); } .cw-note { grid-column: 1; margin: 6px 0 0; font-size: 16px; color: var(--ink-2); } .cw-still { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; padding: 28px; } .cw-still .fb { width: min(240px, 100%); height: auto; } .cw-g-mint { background: var(--color-mint-white); } .cw-g-white { background: #fff; } .cw-g-tayf { background: var(--tayf-tile); } .cw-pin > .k-anchor { display: none; } .k-live .k-ways { padding-top: 0; } .k-live .cw-pin, .k-live .cl-pin { position: relative; height: 100vh; overflow: hidden; } .k-live .cw-grid, .k-live .cl-grid { position: relative; z-index: 1; height: 100%; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); } .k-live .cw-grid .k-head, .k-live .cl-grid .k-head { max-width: 30rem; } .k-live .cw-steps { position: absolute; left: 0; bottom: clamp(32px, 9vh, 96px); display: grid; margin: 0; width: min(30rem, 100%); } .k-live .cw-step { grid-area: 1 / 1; display: block; border: 0; padding: 0; opacity: 0; } .k-live .cw-step:first-child { opacity: 1; } .k-live .cw-still { display: none; } .k-live .cw-name { font-size: clamp(28px, 3.4vw, 52px); } .k-live .cw-pin > .k-anchor, .k-live .cl-pin > .k-anchor { display: block; position: absolute; right: calc((100vw - var(--inner)) / 2 + 24px); width: min(44vw, 640px); aspect-ratio: 200 / 103.923; top: calc(50% + var(--nav-h) / 2 - min(44vw, 640px) * .26); } /* round 13: the colourways hold the mark smaller (it came in from the lockups far too large, as if coming at the viewer) */ .k-live .cw-pin > .k-anchor { width: min(36vw, 520px); top: calc(50% + var(--nav-h) / 2 - min(36vw, 520px) * .26); right: calc((100vw - var(--inner)) / 2 + 56px); } /* colour: the mark waits top right, beside the head (the band and the palette take the rest of the pin) */ .k-live .cl-pin > .k-anchor { width: min(34vw, 480px); top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); } @media (max-width: 860px) { .k-live .cw-grid .k-tx, .k-live .cl-grid .k-tx { font-size: 16px; } .k-live .cw-pin > .k-anchor { right: auto; left: var(--margin); width: calc(100vw - 2 * var(--margin)); top: 50%; } .k-live .cl-pin > .k-anchor { right: auto; left: 18vw; width: 64vw; top: 60%; } .k-live .cw-steps { bottom: 28px; } } /* ---------- 06 colour: the gradient melts into wide bands; the palette as full-bleed rows ---------- */ .cl-g { margin: 18px 0 0; max-width: 46ch; font-size: 16px; color: var(--ink-2); } .cl-g b { font-family: var(--font-display); color: var(--ink); } .cl-bands, .cl-rows { list-style: none; margin: 0; padding: 0; } .cl-bands { margin-top: 32px; } .cb { background: var(--c); } .cb .sw { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 4fr); align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 0 var(--margin); border: 0; background: none; text-align: left; cursor: copy; color: #0B1716; font: inherit; } @media (min-width: 1440px) { .cb .sw { padding-inline: calc((100vw - var(--wrap)) / 2); } } .cb.dark .sw { color: #fff; } .cb-name { font: 700 clamp(18px, 1.8vw, 26px)/1.1 var(--font-display); letter-spacing: -.01em; } .cb-hex { font: 500 14px/1 var(--font-mono); letter-spacing: .04em; } .cb-role { font-size: 15px; opacity: .8; } .cb-ok { position: absolute; right: var(--margin); top: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font: 600 13px/1 var(--font-text); opacity: 0; transform: translateY(-30%); transition: opacity .25s var(--emph), transform .25s var(--emph); } .cb-ok .ti { width: 16px; height: 16px; color: var(--teal); } .sw.copied .cb-ok { opacity: 1; transform: translateY(-50%); } .cb .sw:hover .cb-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .cb .sw:focus-visible { outline-offset: -6px; } .cl-stops-only { display: none; } /* compact palette (round 4): the main colours as one row of chips, the scales as thin strips; details on hover/focus */ .cl-pal { margin-top: clamp(24px, 4vh, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vh, 24px); } .cl-gt { margin: 0 0 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .cl-chips, .cs-row { list-style: none; margin: 0; padding: 0; } .cl-chips { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; } .cc { position: relative; display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: copy; color: var(--ink); font: inherit; } .cc-sw { display: block; height: clamp(36px, 6vh, 64px); border-radius: 10px; background: var(--c); transition: transform .25s var(--emph), box-shadow .25s var(--emph); } .cc.light .cc-sw { box-shadow: inset 0 0 0 1px var(--line); } .cc:hover .cc-sw, .cc:focus-visible .cc-sw { transform: translateY(-3px); box-shadow: 0 10px 18px -12px rgba(0, 68, 90, .45); } .cc.light:hover .cc-sw, .cc.light:focus-visible .cc-sw { box-shadow: inset 0 0 0 1px var(--line), 0 10px 18px -12px rgba(0, 68, 90, .45); } .cc-name { font: 600 13px/1.2 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-hex { font: 500 11px/1 var(--font-mono); letter-spacing: .03em; color: var(--ink-2); } .cc .cb-ok { right: 4px; top: 6px; transform: none; padding: 5px 8px; font-size: 11px; } .cc.copied .cb-ok { transform: none; } .cl-scales { display: grid; gap: 6px; } .cs { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; } .cs-name { font: 600 13px/1.2 var(--font-text); color: var(--ink); } .cs-row { display: flex; height: clamp(26px, 3.6vh, 34px); border-radius: 8px; overflow: hidden; } .cs-row li { flex: 1; transition: flex-grow .25s var(--emph); } .cs-s { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 0; border: 0; background: var(--c); cursor: copy; color: #0B1716; font: 500 10px/1 var(--font-mono); } .cs-s.dark { color: #fff; } .cs-hex { display: none; } .cs-row li:has(.cs-s:is(:hover, :focus-visible)) { flex-grow: 2.4; } .cs-s:is(:hover, :focus-visible) .cs-hex { display: inline; } .cs-s:focus-visible, .cc:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; z-index: 1; } .cs-s.copied { box-shadow: inset 0 0 0 2px #fff; } .cl-detail { margin: 0; min-height: 1.4em; font: 500 13px/1.4 var(--font-mono); color: var(--ink-2); } @media (max-width: 860px) { .cl-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .cc-name { font-size: 11px; } .cs { grid-template-columns: 76px minmax(0, 1fr); gap: 8px; } .cs-name { font-size: 12px; } .cs-st { font-size: 9px; } } @media (max-width: 420px) { .cc-name { display: none; } .cc-hex { font-size: 9.5px; } .cs-row li:not(:has(.cs-s:is(:hover, :focus-visible))) .cs-st { display: none; } } .cl-pin > .k-anchor { display: none; } .k-live .k-colour { padding-top: 0; } /* live: the pin holds the head, the gradient as one big band of its four stops, and the palette under it */ .k-live .cl-pin { display: flex; flex-direction: column; } .k-live .cl-pin .cl-grid { height: auto; flex: none; } .k-live .cl-bands { position: relative; display: flex; width: var(--inner); margin: clamp(16px, 3vh, 32px) auto 0; } .k-live .cl-bands .cb { flex: 1; min-width: 0; } @media (max-width: 560px) { .k-live .cb-stop .sw { padding: 10px; } .k-live .cb-stop .cb-name { font-size: 14px; overflow-wrap: anywhere; } .k-live .cb-stop .cb-hex { font-size: 9.5px; letter-spacing: 0; } } .k-live .cb-stop { transform-origin: 0 0; will-change: transform; visibility: hidden; } .k-live .cb-stop:first-child { border-radius: 14px 0 0 14px; } .k-live .cb-stop:last-child { border-radius: 0 14px 14px 0; } .k-live .cb-stop .sw { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; min-height: clamp(72px, 13vh, 150px); padding: 12px 16px; } .k-live .cb-stop .cb-ok { right: 10px; top: 12px; transform: none; } .k-live .cl-pal { opacity: 0; visibility: hidden; } .k-live .cb-stop .sw > span:not(.cb-ok) { opacity: var(--to, 1); } @media (max-width: 700px) { .cb .sw { grid-template-columns: minmax(0, 1fr) auto; } .cb-role { grid-column: 1 / -1; margin-top: -8px; padding-bottom: 10px; font-size: 13px; } .cb-stop .cb-role { display: none; } } /* ---------- 07 type: the wordmark grows into a giant specimen; the fonts as one typographic sequence ---------- */ .ty-giant { margin: 32px 0 0; text-align: center; line-height: 1; overflow: hidden; } .ty-word { display: inline-block; font: 700 clamp(88px, 22vw, 360px)/.9 var(--font-display); letter-spacing: var(--trk, -.04em); font-variation-settings: "wght" var(--wght, 700); padding: .04em .04em .08em; background: var(--tayf); -webkit-background-clip: text; background-clip: text; color: transparent; } .ty-word span { display: inline-block; } .ty-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 18px; } .ty-ctl .k-hint { margin: 0; font-size: 14px; } .spec-weight { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .spec-weight input { width: clamp(140px, 22vw, 260px); accent-color: var(--btn); } .spec-weight output { min-width: 3ch; color: var(--ink); font-variant-numeric: tabular-nums; } /* round 5: the specimens compact, one tight row per family: name and weights on the left, the sample on one line */ .ty-seq { list-style: none; margin-top: clamp(40px, 6vw, 72px); padding: 0; border-bottom: 1px solid var(--line); } .ty-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: clamp(14px, 1.6vw, 22px) 0; border-top: 1px solid var(--line); } .ty-meta { grid-column: 1 / span 3; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; } .ty-meta .label { grid-column: 1 / -1; } .ty-meta h3 { margin-top: 6px; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.01em; } .ty-w { margin: 0; font: 500 11px/1 var(--font-mono); color: var(--teal); } .ty-body { grid-column: 4 / -1; min-width: 0; } .ty-sample { margin: 0; overflow-wrap: anywhere; } .ty-0 .ty-sample { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; } .ty-1 .ty-sample { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 62ch; } .ty-2 .ty-sample { font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .02em; white-space: pre-wrap; color: var(--ink); } .ty-3 .ty-sample { width: max-content; font-size: clamp(48px, 5.4vw, 80px); line-height: 1; font-weight: 600; color: var(--btn); } .ty-glyphs { margin: 6px 0 0; font-size: 14px; letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ready .write { clip-path: inset(-25% 100% -25% -6%); transition: clip-path .9s var(--emph) .15s; } .ready .write.in { clip-path: inset(-25% -6% -25% -6%); } @media (max-width: 760px) { .ty-meta, .ty-body { grid-column: 1 / -1; } .ty-body { margin-top: 10px; } } .k-live .k-type { padding-top: 0; } .k-live .ty-pin { position: relative; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(16px, 4vh, 48px)); } .k-live .ty-giant { flex: 1; display: grid; place-items: center; margin: 0; } .k-live .ty-word { transform-origin: 50% 50%; will-change: transform; } .k-live .ty-ctl { padding-bottom: clamp(20px, 4vh, 40px); } /* ---------- 08 icons: on the points of the page's own lattice ---------- */ .ic-seg { margin-top: 22px; } .seg button { font: 600 14px/1 var(--font-text); padding: 11px 18px; } .ic-field { position: relative; margin-top: clamp(28px, 4vw, 48px); } .ic-lat { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; display: none; } .ic-lat path { fill: none; stroke: #BFE3DA; stroke-width: 1; } .ic-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 24px 8px; } .ic-list li { display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--ink); transition: color .2s var(--emph); } .ic-list li:hover { color: var(--btn); } .ico { width: 32px; height: 32px; } .ico-name { font: 500 11px/1.3 var(--font-mono); letter-spacing: .02em; color: var(--ink-2); } .k-live .ic-lat { display: block; } .k-live .ic-list { display: block; position: relative; } /* live: each li is a lattice point; the icon sits at the centroid of the up cell below it (2/3 of a row down), the rhombus (that cell and the empty down cell under it) is drawn but flat until hover: then it lifts 4 px with a soft shadow and a hairline of the logo gradient, and the name shows in the lower cell (tayf.emph, 250 ms) */ .ic-defs { position: absolute; } .ic-cell { display: none; } .k-live .ic-list li { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .35s var(--emph), transform .45s var(--emph), color .2s var(--emph); outline: none; } .k-live .ic-list li.on { opacity: 1; transform: none; } .k-live .ic-list li .ic-cell { display: block; position: absolute; left: calc(var(--S) / -2); top: 0; width: var(--S); height: calc(var(--h) * 2); overflow: visible; opacity: 0; transform: translateY(0); transition: opacity .25s var(--emph), transform .25s var(--emph), filter .25s var(--emph); pointer-events: none; } .k-live .ic-list li .ic-cell polygon { fill: var(--surface, #fff); stroke: url(#ic-edge); stroke-width: 1.2; } .k-live .ic-list li .ico { position: absolute; left: -16px; top: calc(var(--h) * 2 / 3 - 16px); width: 32px; height: 32px; padding: 0; background: none; transition: transform .25s var(--emph), color .2s var(--emph); } /* round 7: the name sits where the rhombus is widest (its middle, just under the icon), up to two balanced lines, so every label stays inside the diamond at every width (checked for all 40, TR and EN) */ .k-live .ic-list li .ico-name { position: absolute; left: 0; top: calc(var(--h) + 6px); translate: -50% -50%; width: max-content; max-width: calc(var(--S) * .62); white-space: normal; text-wrap: balance; overflow-wrap: anywhere; text-align: center; font-size: 9.5px; line-height: 1.15; letter-spacing: 0; opacity: 0; transition: opacity .25s var(--emph), transform .25s var(--emph); pointer-events: none; } /* the hit area is the rhombus itself (an invisible diamond on the li) */ .k-live .ic-list li::before { content: ''; position: absolute; left: calc(var(--S) / -2); top: 0; width: var(--S); height: calc(var(--h) * 2); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .k-live .ic-list li:is(:hover, :focus-visible) { z-index: 2; color: var(--btn); } .k-live .ic-list li:is(:hover, :focus-visible) .ic-cell { opacity: 1; transform: translateY(-4px); filter: drop-shadow(0 10px 14px rgba(0, 68, 90, .16)); } .k-live .ic-list li:is(:hover, :focus-visible) .ico { transform: translateY(-4px); } .k-live .ic-list li:is(:hover, :focus-visible) .ico-name { opacity: 1; transform: translateY(-4px); } @media (max-width: 560px) { .k-live .ic-list li .ico { left: -12px; top: calc(var(--h) * 2 / 3 - 12px); width: 24px; height: 24px; } .ico-name { font-size: 10px; } .k-live .ic-list li .ico-name { font-size: 8.5px; top: calc(var(--h) + 4px); } } /* ---------- 09 motion: the play triangle opens into the film, inline, no player box ---------- */ .mo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; } .mo-grid > .k-head { grid-column: 1 / -1; } .mo-stage { grid-column: 1 / span 9; position: relative; aspect-ratio: 16 / 9; } .mo-film { position: absolute; inset: 0; } .mo-film video { width: 100%; height: 100%; object-fit: cover; background: #fff; } .mo-stage > .k-anchor { display: none; } .mo-close { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); font: 600 13px/1 var(--font-text); color: var(--ink); cursor: pointer; } .mo-close[hidden] { display: none; } .mo-close .ti { width: 16px; height: 16px; } .k-ease { grid-column: 10 / -1; display: grid; align-content: start; gap: 12px; } .ease-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .ease-plot { width: 100%; max-width: 200px; height: auto; overflow: visible; } .ease-grid { fill: none; stroke: var(--line); stroke-width: 1; } .ease-lin { fill: none; stroke: var(--color-ink-400); stroke-width: 1.5; stroke-dasharray: 4 5; } .ease-curve { fill: none; stroke: var(--color-mint-200); stroke-width: 3; stroke-linecap: round; } .ease-done { fill: none; stroke: var(--color-tayf-blue-600); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--ep, 0)); } .ease-t { stroke: var(--color-tayf-blue-600); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; } .ease-dot { fill: var(--btn); stroke: #fff; stroke-width: 2; } .ease-lin-dot { fill: var(--color-ink-400); } .ease-time { margin: 0; font: 500 12px/1.5 var(--font-mono); letter-spacing: .02em; color: var(--teal); font-variant-numeric: tabular-nums; } .ease-time .et-now { color: var(--ink); } .k-dur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); } .k-dur dt { font: 600 14px/1.2 var(--font-mono); } .k-dur dd { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); } @media (max-width: 960px) { .mo-stage, .k-ease { grid-column: 1 / -1; } .k-ease { grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; } .k-ease > .label, .ease-text, .k-dur, .ease-time { grid-column: 2; } .ease-plot { grid-column: 1; grid-row: 1 / span 4; } } @media (max-width: 520px) { .k-ease { grid-template-columns: 1fr; } .k-ease > * { grid-column: auto !important; grid-row: auto !important; } .ease-plot { max-width: 150px; } } /* live: the film waits inside the triangle; pressed, the clip opens from the triangle to the full frame */ .k-live .mo-film { clip-path: var(--clip, polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)); opacity: var(--fo, 0); } .k-live .mo-stage > .k-anchor { display: block; position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 200 / 103.923; translate: -50% -50%; } .mo-tri { display: none; } .mo-morph { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: var(--tayf); clip-path: polygon(0 0, 0 0, 0 0); } .mo-morph b { position: absolute; inset: 0; background: #B3DFDE; opacity: var(--mc, 0); } .k-live .mo-tri { display: block; position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 2 / 1.7321; translate: -50% -42%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--tayf); opacity: 0; pointer-events: none; } .mo-play { position: absolute; left: 20%; right: 20%; top: 0; bottom: 0; padding: 0; border: 0; background: transparent; cursor: pointer; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .mo-play:focus-visible { outline: none; } .mo-stage:has(.mo-play:focus-visible) .k-anchor::after { content: ''; position: absolute; inset: -10px 14% -10px; border: 2px solid var(--teal); border-radius: 12px; } .mo-film[data-state="playing"] ~ .k-anchor, .mo-film[data-state="paused"] ~ .k-anchor { left: 0; top: 0; width: 100%; height: 100%; aspect-ratio: auto; translate: none; } .mo-film[data-state="playing"] ~ .k-anchor .mo-play, .mo-film[data-state="paused"] ~ .k-anchor .mo-play { left: 0; right: 0; clip-path: none; } /* ---------- 10 sound: compact chips ---------- */ .snd-groups { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 32px); } /* round 5: the chips sit on one clean grid: the group name in its own column, then equal columns for every chip, so the sound kit and the music line up row under row */ .snd-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 20px; align-items: start; } .snd-gt { margin: 0; padding-top: 11px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .snd-ct { margin-left: 8px; color: var(--ink-2); } .snd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } :is(.snd-btn, .mz-btn) { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 40px auto; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 12px 0 7px; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; color: var(--ink); transition: border-color .25s var(--emph), transform .25s var(--emph), box-shadow .25s var(--emph); } :is(.snd-btn, .mz-btn):hover { border-color: var(--teal); transform: translateY(-1px); } .snd.playing :is(.snd-btn, .mz-btn) { border-color: var(--btn); box-shadow: var(--shadow-1); } .snd-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ground); color: var(--btn); transition: background-color .25s var(--emph), color .25s var(--emph); } :is(.snd-btn, .mz-btn):hover .snd-ic, .snd.playing .snd-ic { background: var(--btn); color: var(--on-btn, #fff); } .snd-ic .ti { grid-area: 1 / 1; width: 10px; height: 10px; } .snd-ic .ti:last-child, .snd.playing .snd-ic .ti:first-child { display: none; } .snd.playing .snd-ic .ti:last-child { display: inline-block; } .snd-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 12px/1 var(--font-mono); color: var(--ink); white-space: nowrap; } .snd-len { font: 500 10.5px/1 var(--font-mono); color: var(--teal); white-space: nowrap; text-align: right; } .snd-wave { grid-column: 3; grid-row: 1; width: 40px; height: 16px; fill: var(--color-mint-200); } .snd-wave.lit { position: relative; grid-column: 3; grid-row: 1; width: 40px; fill: var(--btn); clip-path: inset(0 calc((1 - var(--sp, 0)) * 100%) 0 0); pointer-events: none; } :is(.snd-btn, .mz-btn) .snd-len { grid-column: 4; } .mz.loop .snd-len::after { content: ' \21BB'; } .snd-now { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 14px; color: var(--ink-2); } .snd-now .ti { width: 16px; height: 16px; color: var(--teal); } .snd-now.on .sn-t { color: var(--ink); } .k-music .k-head { margin-top: 0; } .k-ch.k-music { padding-top: clamp(24px, 4vw, 56px); } @media (max-width: 980px) { .snd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .snd-group { grid-template-columns: minmax(0, 1fr); gap: 6px; } .snd-gt { padding-top: 6px; } .snd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { :is(.snd-btn, .mz-btn) { grid-template-columns: 22px minmax(0, 1fr) auto; padding-right: 10px; } .snd-wave { display: none; } :is(.snd-btn, .mz-btn) .snd-len { grid-column: 3; } } /* ---------- 11 applications: a showcase, one full-bleed moment per live template ---------- */ .ap-show { list-style: none; margin: clamp(24px, 4vw, 48px) auto 0; padding: 0; width: var(--inner); display: grid; gap: clamp(40px, 6vw, 72px); } .app { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; align-items: end; } .app-frame { position: relative; grid-column: 2; grid-row: 1; width: min(100%, 60vh * var(--w) / var(--h)); aspect-ratio: var(--w) / var(--h); overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 rgba(0, 68, 90, .06), 0 30px 60px -36px rgba(0, 68, 90, .45); } .app-frame iframe { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); border: 0; transform: scale(var(--k, .25)); transform-origin: 0 0; background: #fff; } .app-cap { grid-column: 1; grid-row: 1; padding-bottom: 6px; } .app-n { gap: 6px; margin: 0 0 10px; } .app-n .n { color: var(--ink); } .app-t { margin: 0; font: 700 clamp(22px, 1.4vw + 12px, 34px)/1.1 var(--font-display); letter-spacing: -.02em; } .app-gt { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); } .app-meta { margin: 8px 0 0; font: 500 11px/1.4 var(--font-mono); color: var(--teal); } .app-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--btn); font: 600 14px/1 var(--font-text); cursor: zoom-in; transition: border-color .25s var(--emph); } .app-open .ti { width: 16px; height: 16px; } .app-open:hover { border-color: var(--teal); } .ap-foot { display: none; } .ap-prog { display: block; width: min(360px, 60%); height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; } .ap-prog i { display: block; height: 100%; background: var(--tayf); transform: scaleX(var(--gp, 0)); transform-origin: left; } @media (max-width: 860px) { .app { grid-template-columns: minmax(0, 1fr); } .app-frame, .app-cap { grid-column: 1; grid-row: auto; } .app-frame { width: min(100%, 70vh * var(--w) / var(--h)); } } /* live: one pin; the moments are stacked in a stage and kimlik.js plays them by scroll */ .k-live .k-apps { padding-top: 0; } .k-live .ap-pin { position: relative; height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + clamp(16px, 3vh, 36px)); } .k-live .ap-head { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + clamp(16px, 3vh, 36px)); z-index: 2; pointer-events: none; } .k-live .ap-show { position: relative; flex: 1; margin: 0 auto; display: block; container-type: size; } .k-live .app { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 48px); align-items: center; visibility: hidden; opacity: 0; pointer-events: none; } .k-live .app.on { visibility: visible; } .k-live .app.live { pointer-events: auto; } .k-live .app-frame { justify-self: center; width: min(100%, (100cqh - 24px) * var(--w) / var(--h)); max-height: calc(100cqh - 24px); transform-origin: 50% 60%; will-change: transform; } .k-live .app:not(.live) .app-frame iframe { pointer-events: none; } .k-live .app.fit-natural .app-frame { width: min(100%, calc(var(--w) * 1px)); max-height: none; transform-origin: 50% 50%; } .k-live .app.ctx-video .app-frame, .k-live .ax-mail .app-frame { width: 100%; } .k-live .ax-mail .app-frame { width: min(calc(100% - 56px), calc(var(--w) * 1px)); } .k-live .app.ctx-video .ax-video { width: min(860px, 56vw, (100cqh - 80px) * 16 / 9); } @media (max-width: 860px) { .k-live .app.ctx-video .ax-video { width: min(860px, calc(100vw - 2 * var(--margin)), (100cqh - 240px) * 16 / 9); } } .k-live .app-art { justify-self: center; align-self: center; will-change: transform; transform-origin: 50% 60%; } /* full-screen: the frame takes the whole stage (both columns), the caption becomes one line under it */ .k-live .app.fit-full { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; } .k-live .app.fit-full .app-frame { grid-column: 1; grid-row: 1; align-self: center; width: min(100%, (100cqh - 72px) * var(--w) / var(--h)); max-height: calc(100cqh - 72px); } .k-live .app.fit-full .app-cap { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; padding-bottom: 0; } .k-live .app.fit-full .app-cap .app-n { margin: 0; } .k-live .app.fit-full .app-t { font-size: clamp(18px, 1.4vw, 22px); } .k-live .app.fit-full .app-gt { display: none; } .k-live .app.fit-full .app-meta { margin: 0; } .k-live .app.fit-full .app-open { margin: 0 0 0 auto; height: 34px; } .k-live .app-cap { align-self: end; padding-bottom: clamp(8px, 4vh, 40px); } .k-live .ap-foot { display: block; padding: 10px 0 clamp(16px, 3vh, 32px); } @media (max-width: 860px) { .k-live .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; } .k-live .app-frame { grid-row: 1; align-self: center; width: min(100%, (100cqh - 200px) * var(--w) / var(--h)); max-height: calc(100cqh - 200px); } .k-live .app-cap { grid-row: 2; padding-bottom: 6px; } .k-live .app-gt, .k-live .app-meta { display: none; } .k-live .app-open { margin-top: 10px; height: 36px; } } /* round 5: natural scale. Small applications sit at their own pixel size in a context; full-screen ones fill the stage */ .app-art { grid-column: 2; grid-row: 1; justify-self: center; min-width: 0; max-width: 100%; } .fit-natural .app-frame { width: min(100%, calc(var(--w) * 1px)); max-height: none; } .ax { position: relative; } .ax-desk { padding: clamp(36px, 6vw, 80px) clamp(40px, 8vw, 120px); border-radius: 24px; background: radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, var(--color-mint-100, #EAF4F1) 70%); } .k-live .app .ax-desk .app-frame, .ax-desk .app-frame { width: calc(var(--w) * 1px); max-width: calc(100vw - 2 * var(--margin) - 32px); } .ax-desk .app-frame { border-radius: 4px; box-shadow: 0 1px 0 rgba(0, 68, 90, .08), 0 22px 30px -14px rgba(0, 68, 90, .38); } .ax-mail { width: min(640px, calc(100vw - 2 * var(--margin))); padding: 0 0 28px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(0, 68, 90, .45); overflow: hidden; } .ax-mail .app-frame { margin: 8px 28px 0; box-shadow: none; border-radius: 0; width: min(calc(100% - 56px), calc(var(--w) * 1px)); } .axm-bar { display: flex; gap: 6px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--color-mint-white); } .axm-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-mint-200); } .axm-head { padding: 10px 28px; border-bottom: 1px solid var(--line); } .axm-head p { display: flex; align-items: center; gap: 12px; margin: 6px 0; font: 500 11px/1 var(--font-mono); color: var(--teal); } .axm-head b { width: 48px; font-weight: 500; } .axm-body { display: grid; gap: 10px; padding: 18px 28px 6px; } .axb { display: block; width: var(--bw, 60%); height: 8px; border-radius: 4px; background: var(--color-mint-100, #EAF4F1); } .axm-head .axb { flex: 0 0 auto; } .ax-video { width: min(860px, calc(100vw - 2 * var(--margin))); padding: 10px; border-radius: 14px; background: #0F2422; box-shadow: 0 30px 60px -36px rgba(0, 68, 90, .55); } .ax-video .app-frame { width: 100%; border-radius: 6px; box-shadow: none; } .axv-bar { display: flex; align-items: center; gap: 12px; margin: 10px 4px 2px; color: #DDEBE8; } .axv-bar .ti { width: 16px; height: 16px; flex: none; } .axv-track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; } .axv-track i { display: block; width: 36%; height: 100%; background: var(--tayf); } .app-frame iframe.app-over { pointer-events: none; background: transparent; } .ax-call { padding: 14px; border-radius: 16px; background: #1B2B29; box-shadow: 0 30px 60px -36px rgba(0, 68, 90, .55); } .axc-row { display: flex; gap: 10px; align-items: stretch; } .k-live .app .ax-call .app-frame, .ax-call .app-frame { width: min(640px, 48vw); max-height: none; border-radius: 8px; box-shadow: none; flex: none; } .axc-side { display: grid; gap: 10px; width: min(200px, 14vw); } .axc-side i { border-radius: 8px; background: #2A3D3A; } .axc-bar { display: flex; justify-content: center; gap: 12px; margin: 14px 0 0; } .axc-bar i { width: 34px; height: 34px; border-radius: 50%; background: #2F4441; } .axc-bar i.w { width: 70px; border-radius: 17px; } @media (max-width: 860px) { .axc-side { display: none; } .k-live .app .ax-call .app-frame, .ax-call .app-frame { width: min(640px, calc(100vw - 2 * var(--margin) - 28px)); } } .ax-prof { display: grid; grid-template-columns: auto auto; gap: clamp(20px, 3vw, 40px); align-items: center; } .axp-card { position: relative; width: 300px; padding: 0 22px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(0, 68, 90, .45); overflow: hidden; display: grid; gap: 8px; } .axp-cover { display: block; height: 90px; margin: 0 -22px; background: var(--color-mint-100, #EAF4F1); } .axp-av { width: 160px; height: 160px; margin-top: -60px; border-radius: 50%; border: 4px solid #fff; background: #fff; } .axp-name { margin: 6px 0 2px; font: 700 20px/1.1 var(--font-display); color: var(--ink); } .axp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .axp-list li { display: grid; grid-template-columns: var(--s) 140px auto; align-items: center; gap: 12px; } .axp-list img { width: var(--s); height: var(--s); border-radius: 50%; } .axp-list span { display: grid; gap: 6px; } .axp-list em { font: 500 10px/1 var(--font-mono); font-style: normal; color: var(--teal); } @media (max-width: 860px) { .app-art { grid-column: 1; grid-row: auto; } .ax-prof { grid-template-columns: 1fr; } .axp-list { display: none; } .ax-desk { padding: 28px 16px; } } .app-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; } .app-lb::backdrop { background: rgba(243, 248, 247, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .app-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); } .lb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px var(--margin); } .lb-cap { margin-right: auto; } .lb-live { margin: 0; font-size: 13px; color: var(--ink-2); } .lb-new { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-text); color: var(--btn); } .lb-new .ti { width: 16px; height: 16px; } .lb-bar button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .lb-bar button:hover { border-color: var(--teal); } .lb-stage { position: relative; display: grid; place-items: center; padding: 0 var(--margin) 24px; min-height: 0; } .lb-frame { position: relative; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: var(--shadow-3); } .lb-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; } .app-lb[open] .lb-frame { animation: lbIn .42s var(--emph) both; } @keyframes lbIn { from { opacity: 0; transform: translate(-10px, 17.3px); } } @media (max-width: 560px) { .lb-live { display: none; } } /* ---------- 12 broadcast: the scenes as one video on a 16:9 screen, a soft studio camera behind, a bar that scrubs ---------- */ .cast { margin: clamp(28px, 4vw, 44px) 0 0; } .cast-screen { position: relative; width: min(100%, calc((100svh - var(--nav-h) - 190px) * 16 / 9)); min-width: min(100%, 560px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #fff; container-type: inline-size; isolation: isolate; } .cast-poster { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .cast.ready .cast-poster { visibility: hidden; } .cast-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; visibility: hidden; pointer-events: none; background: transparent; color-scheme: light; } /* the camera: a light, neutral room, out of focus (a stand-in for the streamer's picture); it drifts a little like a hand-held shot */ .cast-cam { position: absolute; inset: -4%; visibility: hidden; background: linear-gradient(180deg, #F2F3F0 0%, #E9ECE8 56%, #DDE1DC 100%); filter: blur(1.15cqw) saturate(.92); will-change: transform; } .cast-cam i { position: absolute; display: block; } .cc-win { left: 5%; top: 7%; width: 29%; height: 50%; border-radius: 2cqw; background: linear-gradient(165deg, #FFFFFF 0%, #FAFBF8 60%, #F1F4F1 100%); box-shadow: 0 0 6cqw 1cqw rgba(255, 255, 255, .9); } .cc-shelf { right: 4%; top: 23%; width: 27%; height: 2.4%; border-radius: .4cqw; background: #CFC6B8; box-shadow: 0 -5cqw 0 -1.1cqw #B9C4C2, 4cqw -4.4cqw 0 -1.3cqw #D9C9B0, 9cqw -5.2cqw 0 -1cqw #A9B8B4; } .cc-plant { left: 33%; top: 33%; width: 12%; height: 30%; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 45% 40%, #A7BCA9, #8CA592 70%); } .cc-plant.b { left: 29.5%; top: 45%; width: 8%; height: 19%; background: radial-gradient(circle at 50% 40%, #9DB4A0, #86A08C 70%); } .cc-lamp { right: 10%; top: 31%; width: 9%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, #FFF6E4, rgba(255, 246, 228, 0)); } .cc-body { left: 50%; bottom: 3%; width: 40%; height: 40%; translate: -50% 0; border-radius: 46% 46% 12% 12% / 58% 58% 12% 12%; background: linear-gradient(180deg, #A9B4B2 0%, #96A2A0 100%); } .cc-head { left: 50%; top: 21%; width: 14%; aspect-ratio: .82; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 50% 18%, #6E625A 0 34%, transparent 35%), radial-gradient(circle at 46% 58%, #DFC6B2, #CDAF98 75%); } .cc-desk { left: -5%; right: -5%; bottom: -2%; height: 15%; background: linear-gradient(180deg, #DCD6CB 0%, #D0C9BD 100%); } .cast-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; gap: 14px; width: min(100%, max(calc((100svh - var(--nav-h) - 190px) * 16 / 9), 560px)); margin-top: 12px; } .cast:not(.on) .cast-bar { visibility: hidden; } .cast-play, .cast-snd { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--btn); cursor: pointer; transition: border-color .25s var(--emph), background-color .25s var(--emph), color .25s var(--emph); } .cast-play:hover, .cast-snd:hover { border-color: var(--teal); } .cast-play .ti, .cast-snd .ti { grid-area: 1 / 1; width: 16px; height: 16px; } .cast-play .ti:last-child, .cast.playing .cast-play .ti:first-child { display: none; } .cast.playing .cast-play .ti:last-child { display: inline-block; } .cast-snd .ti:last-child, .cast-snd[aria-pressed="true"] .ti:first-child { display: none; } .cast-snd[aria-pressed="true"] .ti:last-child { display: inline-block; } .cast-snd[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .cast-track { position: relative; height: 44px; cursor: pointer; touch-action: pan-y; border-radius: 8px; } .cast-track:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .ct-line, .ct-fill { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; } .ct-line { background: var(--color-mint-200); } .ct-fill { background: var(--tayf); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; } .ct-mark { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 2px; height: 12px; margin: -6px 0 0 -1px; border-radius: 1px; background: var(--ink-2); opacity: .45; } .ct-thumb { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 2px solid var(--btn); box-shadow: var(--shadow-1); transition: scale .2s var(--emph); } .cast-track:hover .ct-thumb, .cast.scrub .ct-thumb { scale: 1.15; } .cast-time { font: 500 12px/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .ct-now { color: var(--ink); } .cast-cap { margin-top: 18px; } .cast-index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 20px; max-width: 72rem; } .ci { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer; font: 500 14px/1.3 var(--font-text); color: var(--ink-2); text-align: left; } .ci .n { font: 500 11px/1 var(--font-mono); color: var(--teal); } .ci-at { display: none; } .ci:hover .ci-t, .ci.on .ci-t { color: var(--ink); } .ci.on .ci-t { text-decoration: underline 2px var(--teal); text-underline-offset: 5px; } .ci:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; } @media (max-width: 560px) { .cast-screen { min-width: 0; border-radius: 10px; } .cast-bar { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px 12px; } .cast-time { grid-column: 2; grid-row: 2; margin-top: -10px; } .cast-index { gap: 0 16px; } .ci { font-size: 13px; } } /* ---------- 12 platforms: a light simulation (neutral grey interface, our templates inside) and the links ---------- */ /* round 5: one composed stage: the channel and the live view on the left, the profile as a phone on the right, all on a soft ground of their own */ .pf-sim { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3.6fr); grid-template-areas: "ch pr" "lv pr"; gap: clamp(16px, 2vw, 28px); margin-top: clamp(24px, 3vw, 40px); align-items: start; padding: clamp(14px, 2.4vw, 36px); border-radius: 28px; background: radial-gradient(90% 70% at 85% 10%, #FFFFFF 0%, var(--color-mint-100, #EAF4F1) 75%); } .pf-sim .sim-pr { align-self: center; display: flex; flex-direction: column; padding: 30px 12px 16px; border-radius: 38px; border: 1px solid #DCE4E2; box-shadow: 0 0 0 8px #fff, 0 0 0 9px #DCE4E2, 0 40px 60px -40px rgba(0, 68, 90, .45); } .pf-sim .sim-pr::before { content: ''; position: absolute; left: 50%; top: 10px; width: 64px; height: 8px; translate: -50% 0; border-radius: 4px; background: #E3E8E7; } .pf-sim .sim-pr { position: relative; margin: 9px; } .pf-sim .sim-lv { margin-left: clamp(0px, 6vw, 96px); } .sim { margin: 0; padding: 14px; background: #fff; border: 1px solid #E3E8E7; border-radius: 16px; box-shadow: 0 24px 48px -36px rgba(0, 68, 90, .35); } .sim-ch { grid-area: ch; } .sim-pr { grid-area: pr; } .sim-lv { grid-area: lv; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; } .sim-sk { display: block; height: 10px; border-radius: 6px; background: #EEF1F0; } .sim-sk.pill { height: 28px; border-radius: 999px; } .sim-sk.dot { height: 28px; width: 28px !important; border-radius: 50%; } .sim-sk.t { height: 8px; margin-top: 6px; } .sim-sk.n { height: 7px; margin-bottom: 5px; background: #E2E8E6; } .sim-sk.bar { height: 6px; } .sim-sk.ring { width: 100%; aspect-ratio: 1; height: auto; border-radius: 50%; background: #F1F4F3; box-shadow: inset 0 0 0 2px #E3E8E7; } .sim-fill { width: 100%; height: 100%; min-height: 40px; border-radius: 6px; } .sim-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sim-frame { position: relative; width: 100%; aspect-ratio: var(--w, 16) / var(--h, 9); overflow: hidden; border-radius: 8px; background: #F6F8F7; } .sim-frame iframe { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); border: 0; transform: scale(var(--k, .2)); transform-origin: 0 0; pointer-events: none; background: #fff; } .sim-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .sim-banner { position: relative; aspect-ratio: 2560 / 423; overflow: hidden; border-radius: 10px; } .sim-banner .sim-frame { position: absolute; left: 0; top: 50%; translate: 0 -50%; border-radius: 0; } .sim-who { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; } .sim-who p { display: grid; gap: 2px; margin: 0; margin-right: auto; } .sim-who b { font: 700 17px/1.1 var(--font-display); } .sim-who span { font: 500 12px/1.2 var(--font-mono); color: var(--ink-2); } .sim-av { width: 48px; height: 48px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px #E3E8E7; } .sim-who.col { margin-top: 2px; } .sim-tabs { display: flex; gap: 18px; padding-bottom: 10px; border-bottom: 1px solid #EEF1F0; margin-bottom: 12px; } .sim-tabs .sim-sk { height: 8px; } .sim-vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sim-vid .sim-frame { aspect-ratio: 16 / 9; } .sim-vid .sim-frame iframe { transform: scale(var(--k, .2)); } .sim-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .sim-hl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; padding: 0 4px; } .sim-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } .sim-g > .sim-frame, .sim-g > .sim-fill { aspect-ratio: 4 / 5; border-radius: 2px; } .sim-g > .sim-frame.crop iframe { top: calc(var(--k) * (1350px - 1920px) / 2); } .sim-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #F1F4F3; } .sim-player img { display: block; width: 100%; height: 100%; object-fit: cover; } .sim-ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 14px 10px; background: linear-gradient(transparent, rgba(255, 255, 255, .85)); } .sim-ctl .sim-sk { background: rgba(0, 68, 90, .16); } .sim-chat { display: grid; align-content: start; gap: 12px; padding: 8px 4px; border-left: 1px solid #EEF1F0; padding-left: 12px; } .sim-chat p { margin: 0; } .sim-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF1F0; } .sim-lv .sim-cap { grid-column: 1 / -1; } .sim-cap a { display: inline-flex; align-items: center; gap: 4px; font: 600 14px/1 var(--font-text); color: var(--btn); } .sim-cap a .ti { width: 14px; height: 14px; } .sim-note { font-size: 13px; color: var(--ink-2); } .pf-lt { margin: clamp(36px, 5vw, 56px) 0 14px; } /* round 5: find us: our own accounts large, one row each; the other platforms only as their colours */ .pf-us { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--line); } .pf-us a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 24px; align-items: center; column-gap: 18px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .25s var(--emph), padding .25s var(--emph); } .pf-us img, .pf-us .pf-word { width: 56px; height: 56px; border-radius: 14px; } .pf-us .pf-word { display: grid; place-items: center; background: var(--ground); color: var(--btn); } .pf-us .pf-word .ti { width: 24px; height: 24px; } .pf-us b { font: 700 clamp(22px, 2vw, 30px)/1.1 var(--font-display); letter-spacing: -.02em; } .pf-us .pf-h { grid-column: 3; font: 500 13px/1.2 var(--font-mono); color: var(--teal); } .pf-us a > .ti { width: 20px; height: 20px; color: var(--btn); transition: transform .25s var(--emph); } .pf-us a:is(:hover, :focus-visible) { padding-left: 12px; background: color-mix(in srgb, var(--color-mint-100, #EAF4F1) 70%, transparent); } .pf-us a:is(:hover, :focus-visible) > .ti { transform: translate(3px, -3px); } .pf-lt2 { margin-top: clamp(28px, 4vw, 44px); } .pf-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px 20px; } .pf-cols li { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; } .pf-cols img { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 9px; } .pf-cols b { font: 600 14px/1.2 var(--font-text); } .pf-sw { display: flex; align-items: center; gap: 4px; min-width: 0; } .pf-sw i { flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 68, 90, .08); } .pf-sw em { margin-left: 4px; font: 500 10.5px/1.2 var(--font-mono); font-style: normal; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { .pf-us { grid-template-columns: minmax(0, 1fr); } .pf-us a { grid-template-columns: 44px minmax(0, 1fr) 20px; } .pf-us img, .pf-us .pf-word { width: 44px; height: 44px; } .pf-us .pf-h { grid-column: 2; grid-row: 2; } .pf-us a > .ti { grid-column: 3; grid-row: 1 / span 2; } } .pf-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; } .pf-links a, .pf-off { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .25s var(--emph), transform .25s var(--emph), box-shadow .25s var(--emph); } .pf-links img, .pf-word { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 10px; } .pf-word { display: grid; place-items: center; background: var(--ground); color: var(--btn); } .pf-links .pf-word .ti { grid-column: auto; grid-row: auto; width: 20px; height: 20px; color: var(--btn); } .pf-links b { font: 600 15px/1.2 var(--font-text); } .pf-h { grid-column: 2; font: 500 11px/1.3 var(--font-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-links .ti { grid-column: 3; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--btn); } .pf-links a:hover, .pf-links a:focus-visible { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-1); } .pf-off { opacity: .72; } @media (max-width: 960px) { .pf-sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ch" "pr" "lv"; } .sim-pr { max-width: 420px; } .pf-sim .sim-pr { justify-self: center; width: min(360px, calc(100% - 18px)); } .pf-sim .sim-lv { margin-left: 0; } } @media (max-width: 560px) { .sim { padding: 10px; border-radius: 12px; } .sim-vids { grid-template-columns: 1fr 1fr; } .sim-vid:nth-child(3) { display: none; } .sim-lv { grid-template-columns: minmax(0, 1fr); } .sim-chat { display: none; } .sim-top .sim-sk:nth-child(2) { display: none; } } /* ---------- 13 sub-brands (round 8): one quiet row of the brands' own logos; name and link on hover or focus ---------- */ .sb-quiet .k-head { margin-bottom: 0; } .sb-line { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2.6vw, 36px); } .sb-line li { position: relative; } .sb-q { position: relative; display: grid; place-items: center; height: 72px; padding: 6px 8px; border-radius: 12px; outline: none; } .sb-q .sb-logo { width: auto; height: auto; max-height: 44px; max-width: 118px; transition: transform .35s var(--emph); } .sb-q .sb-cube { height: 72px; max-height: none; max-width: none; margin: -6px 0; } .sb-q .mono-invert { filter: invert(1) grayscale(1) brightness(.2); } .sb-tip { position: absolute; left: 50%; top: calc(100% + 2px); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--surface, #fff); box-shadow: 0 0 0 1px var(--line), 0 10px 22px rgba(0, 68, 90, .1); white-space: nowrap; font-size: 13px; line-height: 1; color: var(--ink-2); translate: -50% 6px; opacity: 0; pointer-events: none; transition: opacity .25s var(--emph), translate .3s var(--emph); } /* review fix (2026-10-13): a tooltip near the edge of a narrow screen is moved back inside it (kimlik.js sets --nx), and the chapter clips the rest, so a hidden tooltip never widens the page (it did by 14 px at 320 and 22 px at 768) */ .k-subs { overflow-x: clip; } .sb-tip { margin-left: var(--nx, 0px); } .sb-tip b { font: 600 13px/1 var(--font-text); color: var(--ink); } .sb-tip .ti { width: 12px; height: 12px; color: var(--teal); } .sb-q:is(:hover, :focus-visible) .sb-tip { opacity: 1; translate: -50% 0; } .sb-q:is(:hover, :focus-visible) .sb-logo { transform: translateY(-4px); } .sb-q:focus-visible { box-shadow: 0 0 0 2px var(--color-focus, #2B8FB3); } @media (max-width: 560px) { .sb-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sb-q { height: 60px; } .sb-q .sb-logo { max-height: 36px; max-width: 100%; } .sb-q .sb-cube { height: 60px; } .sb-line li:nth-child(4n) .sb-tip { left: auto; right: 0; translate: 0 6px; } .sb-line li:nth-child(4n) .sb-q:is(:hover, :focus-visible) .sb-tip { translate: 0 0; } .sb-line li:nth-child(4n+1) .sb-tip { left: 0; translate: 0 6px; } .sb-line li:nth-child(4n+1) .sb-q:is(:hover, :focus-visible) .sb-tip { translate: 0 0; } } /* ---------- 14 the end: the mark comes back once and docks in the header ---------- */ .k-end { padding-bottom: var(--sec); overflow-x: clip; } .end-in { display: grid; justify-items: center; text-align: center; gap: 40px; min-height: calc(100vh - var(--nav-h)); align-content: center; } .end-in > .k-anchor { width: min(46vw, 560px); } .end-head { display: grid; justify-items: center; max-width: 44rem; } .end-head .label { justify-content: center; } .end-head .k-h { font-size: clamp(44px, 7vw, 112px); line-height: .96; letter-spacing: -.04em; } .end-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin: 28px 0 0; } .end-dock { display: block; height: 1px; } @media (max-width: 860px) { .end-in > .k-anchor { width: min(80vw, 420px); } } /* the current chapter, centred in the header on wide screens */ /* round 13: the chapter pill sits just right of the header's logo, clear of the nav (centred it covered "İşler") */ .k-now { position: fixed; z-index: 51; top: calc(var(--nav-h) / 2); left: calc((100vw - var(--inner)) / 2 + 232px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 500 12px/1 var(--font-mono); letter-spacing: .06em; opacity: 0; transform: translate(0, -30%); pointer-events: none; transition: opacity .3s var(--emph), transform .3s var(--emph); } .k-now.show { opacity: 1; transform: translate(0, -50%); pointer-events: auto; } .k-now:hover { border-color: var(--teal); } .k-now .n { color: var(--teal); } .k-now .of { color: var(--ink-2); } .k-now .t { font: 600 13px/1 var(--font-text); letter-spacing: 0; } @media (max-width: 1359px) { .k-now { display: none; } } /* ========================================================================================================= Reveals (only under .ready: JS running and motion allowed). Text rises; containers travel along 60°. ========================================================================================================= */ .rv-words .wd { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .14em; margin: -.1em 0 -.14em; } .rv-words .wd > span { display: inline-block; } .ready .rv-words .wd > span { transition: transform .7s var(--emph); transition-delay: calc(var(--i, 0) * 70ms); } .ready .rv-words:not(.in) .wd > span { transform: translateY(112%); } .ready .rv { transition: opacity .55s var(--emph) var(--d, 0ms), transform .55s var(--emph) var(--d, 0ms); } .ready .rv:not(.in) { opacity: 0; transform: translateY(16px); } .ready .rv-60 { transition: opacity .55s var(--emph) var(--d, 0ms), transform .7s var(--emph) var(--d, 0ms); } .ready .rv-60:not(.in) { opacity: 0; transform: translate(-14px, 24.25px); } .ready .rv-card { transition: opacity .55s var(--emph) var(--d, 0ms), transform .7s var(--emph) var(--d, 0ms); } .ready .rv-card:not(.in) { opacity: 0; transform: translate(-14px, 24.25px); } .ready .rv-card .card-media { transition: clip-path 1s var(--emph) var(--d, 0ms), box-shadow .5s var(--emph); clip-path: inset(0 round var(--r-md)); } .ready .rv-card:not(.in) .card-media { clip-path: inset(8% 6% 0 6% round var(--r-md)); } .ready .rv-card .card-media img { transition: transform .8s var(--emph), scale 1.2s var(--emph) var(--d, 0ms); } .ready .rv-card:not(.in) .card-media img { scale: 1.1; } .ready .rv-wipe { transition: clip-path .7s var(--emph) var(--d, 0ms); clip-path: polygon(0 0, calc(100% + var(--wd, 10%)) 0, 100% 100%, calc(0% - var(--wd, 10%)) 100%); } .ready .rv-wipe:not(.in) { clip-path: polygon(0 0, 0 0, calc(0% - var(--wd, 10%)) 100%, calc(0% - var(--wd, 10%)) 100%); } /* slide-switch: each item is born on top of the first one and slides to its place (MOTION 8.2) */ .ready .born > * { transition: transform .42s var(--emph) var(--bd, 0ms), opacity .05s linear var(--bd, 0ms); } .ready .born:not(.in) > * { opacity: 0; transform: translate(var(--bx, 0px), var(--by, 0px)); } .ready .born.prep > * { transition: none; } /* ---------- page transitions: the 60° scene wipe (MOTION 8.11) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { animation: tayf-wipe-60 .7s cubic-bezier(.2, 0, 0, 1) both; } @keyframes tayf-wipe-60 { from { clip-path: polygon(0 0, 0 0, -57.735vh 100%, 0 100%); } to { clip-path: polygon(0 0, calc(100vw + 57.735vh) 0, 100vw 100%, 0 100%); } } ::view-transition-group(top) { z-index: 60; } ::view-transition-old(top), ::view-transition-new(top) { animation: none; } ::view-transition-group(cover) { z-index: 40; animation-duration: .7s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); } ::view-transition-old(cover), ::view-transition-new(cover) { height: 100%; object-fit: cover; overflow: hidden; border-radius: var(--r-md); } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .strip-track, .band-track, .aura i { animation: none !important; } .card:hover .card-media img, .btn:hover, .award a:hover, .sw:hover { transform: none; } } /* without motion (no JS or reduced motion) the marquees become still rows */ html:not(.motion) .dup { display: none; } html:not(.motion) .band-track { width: auto; flex-wrap: wrap; row-gap: 8px; padding-inline: var(--margin); } html:not(.motion) .strip { overflow-x: auto; } /* loops without controls never show a native play overlay (mobile browsers draw one while a muted loop is starting) */ .screen video::-webkit-media-controls, .card-media video::-webkit-media-controls, video.auto::-webkit-media-controls { display: none !important; } .screen video::-webkit-media-controls-start-playback-button, .card-media video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } /* ---------- round 6: screens (wallpapers, calendar) ---------- */ .sc-block { margin-top: clamp(32px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); } .sc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; } .sc-h { font-size: clamp(22px, 2vw, 28px); } .sc-pick button { padding: 10px 14px; font-size: 13px; } .sc-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(20px, 3vw, 40px); align-items: center; } .sc-set[hidden] { display: none; } .sc-devices { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); min-width: 0; } /* a phone at about its own size (a 6.1" phone is about 393 CSS px wide; here a little smaller so the pair fits) */ .sc-phone { position: relative; flex: none; width: clamp(130px, 15vw, 210px); margin: 0; padding: 7px; border-radius: 30px; background: #1B2B29; box-shadow: 0 26px 40px -26px rgba(0, 68, 90, .55); } .sc-phone img { display: block; width: 100%; height: auto; aspect-ratio: 1179 / 2556; object-fit: cover; border-radius: 23px; } .sc-island { position: absolute; left: 50%; top: 16px; width: 26%; height: 9px; translate: -50% 0; border-radius: 6px; background: #1B2B29; } .sc-desk { flex: 1; min-width: 0; margin: 0 0 0 clamp(4px, 1vw, 16px); } .sc-screen { padding: 8px; border-radius: 12px; background: #1B2B29; box-shadow: 0 30px 50px -30px rgba(0, 68, 90, .55); } .sc-screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 5px; } .sc-foot { display: block; width: 26%; height: 34px; margin: 0 auto; background: linear-gradient(#C9D6D9, #DCE5E7); clip-path: polygon(30% 0, 70% 0, 82% 100%, 18% 100%); } .sc-dls, .sc-print { display: grid; gap: 6px; align-content: start; } .sc-dls .label, .sc-print .label { margin-top: 8px; } .sc-dl { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .25s var(--emph); } .sc-dl:hover, .sc-dl:focus-visible { border-color: var(--teal); } .sc-dl .ti { grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--btn); align-self: center; } .sc-dl span { font: 600 14px/1.25 var(--font-text); } .sc-dl em { font: 500 11px/1.3 var(--font-mono); font-style: normal; color: var(--ink-2); } .sc-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); } .sc-print { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); margin-top: 22px; } .sc-print .label { grid-column: 1 / -1; } @media (max-width: 960px) { .sc-set { grid-template-columns: minmax(0, 1fr); } .sc-desk { display: none; } .sc-devices { justify-content: center; } .sc-phone { width: min(44vw, 200px); } } /* ---------- round 6: the page loader (only after 400 ms) ---------- */ .ld { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: 26px; background: var(--ground, #F3F8F7); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s cubic-bezier(.2, 0, 0, 1), visibility 0s linear .45s; } .ld.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s cubic-bezier(.2, 0, 0, 1); } .ld.on.out { opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.2, 0, 0, 1), visibility 0s linear .5s; } .ld-mk { width: min(260px, 60vw); height: auto; overflow: visible; } .ld-lat { fill: none; stroke: var(--line, #D9E5EB); stroke-width: .6; } .ld-c { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; } .ld.on .ld-c { animation: ldIn .55s cubic-bezier(.2, 0, 0, 1) var(--d) both; } @keyframes ldIn { from { opacity: 0; transform: rotate(-60deg) scale(.4); } to { opacity: 1; transform: none; } } .ld-bar { display: block; width: min(220px, 50vw); height: 2px; border-radius: 2px; background: var(--line, #D9E5EB); overflow: hidden; } .ld-bar b { display: block; height: 100%; background: var(--gradient-brand, linear-gradient(90deg, #D7E55F, #89D8B4 35%, #65B8DA 70%, #798DCB)); transform: scaleX(0); transform-origin: left; transition: transform 4s cubic-bezier(.1, .6, .3, 1); } .ld.on .ld-bar b { transform: scaleX(.6); } .ld.on.half .ld-bar b { transform: scaleX(.85); } .ld.done .ld-bar b { transform: scaleX(1); transition-duration: .25s; } @media (prefers-reduced-motion: reduce) { .ld.on .ld-c { animation: none; opacity: 1; } .ld-bar b { transition: none; } } /* round 7: the story heading's letters, which catch the light as it comes in under them (kimlik.js litLetters) */ .st-hl .w { display: inline-block; white-space: nowrap; } .st-hl .l { display: inline-block; } /* ---------- round 8: the business card (both faces, it turns over) and the CV download ---------- */ @property --lx { syntax: ''; inherits: true; initial-value: 30%; } .app-acts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; } .app-acts .app-open { margin-top: 16px; } .app-dl em { font: 500 11px/1 var(--font-mono); font-style: normal; color: var(--ink-2); } .kv { width: var(--kw); height: var(--kh); max-width: calc(100vw - 2 * var(--margin) - 32px); aspect-ratio: 321 / 208; perspective: 1100px; } .kv-card { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 3px; background: none; cursor: pointer; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg))); transition: transform .9s var(--emph); } .kv-card.tilting { transition: transform .9s var(--emph), --rx .2s linear; } .kv-card[aria-pressed="true"] { --flip: 180deg; } .kv-card:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 6px; } .kv-face { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; box-shadow: 0 1px 1px rgba(0, 68, 90, .1), 0 18px 34px -12px rgba(0, 68, 90, .34); } .kv-face img { display: block; width: 100%; height: 100%; } /* the painted edges: a hairline of the logo gradient round each face */ .kv-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--tayf); pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .kv-back { transform: rotateY(180deg); } /* the clear varnish: only the mark's shape, a band of light crosses it (follows the pointer; drifts on its own otherwise) */ .kv-uv { position: absolute; inset: 0; -webkit-mask: var(--uv) center / 100% 100% no-repeat; mask: var(--uv) center / 100% 100% no-repeat; background: linear-gradient(112deg, rgba(0, 68, 90, .035) 0, rgba(0, 68, 90, .035) calc(var(--lx) - 22%), rgba(101, 184, 218, .22) calc(var(--lx) - 9%), #fff var(--lx), rgba(132, 211, 185, .26) calc(var(--lx) + 8%), rgba(0, 68, 90, .05) calc(var(--lx) + 20%), rgba(0, 68, 90, .035) 100%); animation: kvLight 7s var(--emph) infinite alternate; } .kv.lit .kv-uv { animation: none; } @keyframes kvLight { from { --lx: -10%; } to { --lx: 115%; } } .app-card .ax-desk { display: grid; place-items: center; } @media (prefers-reduced-motion: reduce) { .kv-card { transition: none; } .kv-uv { animation: none; --lx: 55%; } } /* ---------- round 8: the film's page glows and its own timeline ---------- */ .k-motion { overflow-x: clip; } .mo-stage { isolation: isolate; } /* the corner light lives on the page, at the film's edges (lime at the left edge, high; blue at the bottom edge, right), never under the copy: the film's own edges fade into the page, so nothing is cut off at the frame */ .mo-aura { overflow: visible; z-index: -1; } .mo-aura i:nth-child(1) { width: 44%; aspect-ratio: 1.7; left: 0; top: 24%; right: auto; bottom: auto; translate: -50% -50%; } .mo-aura i:nth-child(2) { width: 44%; aspect-ratio: 1.7; left: 78%; top: 100%; right: auto; bottom: auto; translate: -50% -50%; } .mo-film video { -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%) intersect, linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); background: transparent; } .mo-bar { display: none; } .k-live .mo-bar { grid-column: 1 / span 9; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: -12px; } .mo-pp { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--btn); cursor: pointer; transition: border-color .2s var(--emph); } .mo-pp:hover { border-color: var(--teal); } .mo-pp .ti { width: 16px; height: 16px; } .mo-pp .ti + .ti, .mo-bar.playing .mo-pp .ti:first-child { display: none; } .mo-bar.playing .mo-pp .ti + .ti { display: block; } .mo-scrub { position: relative; height: 32px; cursor: pointer; touch-action: none; outline: none; --sp: 0; } .ms-track { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--line); overflow: hidden; } .ms-fill { display: block; height: 100%; background: var(--tayf); transform: scaleX(var(--sp)); transform-origin: left; } .ms-thumb { position: absolute; top: 50%; left: calc(var(--sp) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--surface, #fff); box-shadow: 0 0 0 2px var(--btn), 0 4px 10px rgba(0, 68, 90, .18); transition: transform .2s var(--emph); } .mo-scrub:hover .ms-thumb, .mo-bar.drag .ms-thumb { transform: scale(1.25); } .mo-scrub:focus-visible .ms-thumb { box-shadow: 0 0 0 2px var(--btn), 0 0 0 5px var(--color-focus, #2B8FB3); } .ms-time { margin: 0; font: 500 12px/1 var(--font-mono); color: var(--teal); white-space: nowrap; } @media (max-width: 960px) { .k-live .mo-bar { grid-column: 1 / -1; } .mo-aura i:nth-child(1), .mo-aura i:nth-child(2) { width: 60%; } } /* ---------- round 8: the sound and music player line: a small live mark, what plays, a waveform timeline ---------- */ .snd-now { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 4px 16px; margin: 12px 0 0; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); } .sn-mark { display: grid; place-items: center; width: 76px; height: 52px; } .snd-mark { width: 72px; height: auto; overflow: visible; transition: transform .3s var(--emph); } .snd-mark path { transform-box: fill-box; transform-origin: center; } .snm-ctr { fill: var(--tayf-blue, #65B8DA); opacity: 0; } .sn-body { min-width: 0; display: grid; gap: 6px; } .sn-line { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; } .sn-line .sn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sn-line .ti { flex: none; width: 16px; height: 16px; color: var(--teal); } .snd-now.on .sn-t { color: var(--ink); } .sn-time { margin-left: auto; flex: none; font: 500 11px/1 var(--font-mono); color: var(--teal); } .sn-tl { position: relative; height: 30px; --sp: 0; cursor: default; touch-action: none; outline: none; opacity: .45; } .snd-now.has-tl .sn-tl { cursor: pointer; opacity: 1; } .sn-wv { position: absolute; inset: 3px 0; display: block; } .sn-wv .snd-wave { position: absolute; inset: 0; width: 100%; height: 100%; grid-column: auto; } .sn-ph { position: absolute; top: 0; bottom: 0; left: calc(var(--sp) * 100%); width: 2px; margin-left: -1px; border-radius: 2px; background: var(--btn); pointer-events: none; } .sn-ph::after { content: ''; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 2px var(--surface, #fff); transition: transform .2s var(--emph); } .sn-tl:hover .sn-ph::after, .sn-tl.drag .sn-ph::after { transform: scale(1.3); } .sn-tl:focus-visible { box-shadow: 0 0 0 2px var(--color-focus, #2B8FB3); border-radius: 6px; } @media (max-width: 520px) { .snd-now { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 10px; } .sn-mark { width: 56px; } .snd-mark { width: 54px; } } @media (prefers-reduced-motion: reduce) { .snd-mark { transition: none; } } /* ---------- round 8: Hakkımda, a designer's about. The 360 view stands on a lattice stage cut at 60°; the name is the headline under a gradient numeral; the story and the facts; the career on a year axis, each role a slice of the one brand gradient (so the whole career reads as one spectrum); the awards as a numeral; the tools as icon chips. ---------- */ .ab { position: relative; overflow: clip; padding-bottom: clamp(24px, 4vw, 56px); background: var(--surface); } .ab > .aura i:nth-child(1) { width: 46%; aspect-ratio: 3.2; translate: -40% -64%; } .ab > .aura i:nth-child(2) { width: 40%; top: 6%; bottom: auto; translate: 46% -30%; } .ab-field { position: absolute; top: 0; right: 4%; width: 34%; height: min(980px, 100svh + 120px); background: linear-gradient(180deg, var(--ground) 0, var(--ground) 72%, transparent 100%); transform: skewX(-30deg); transform-origin: 0 100%; overflow: hidden; } .ab-lattice { position: absolute; inset: 0 -70% 0 -10%; transform: skewX(30deg); transform-origin: 0 100%; background-image: var(--lattice); background-position: 0 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); } .ready .ab-field { transition: clip-path 1.1s var(--emph) .1s; clip-path: inset(0 0 0 0); } .ready .ab:not(.seen) .ab-field { clip-path: inset(100% 0 0 0); } .ab-top { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; min-height: min(860px, 100svh - var(--nav-h)); } .ab-intro { grid-column: 1 / span 7; padding-bottom: clamp(24px, 5vh, 64px); } .ab-num { width: clamp(150px, 19vw, 300px); margin: clamp(4px, 1vw, 14px) 0 0 -.05em; } .ab-name { margin: clamp(-30px, -2vw, -10px) 0 0; font: 800 clamp(56px, 8.4vw, 148px)/.9 var(--font-display); letter-spacing: -.045em; } .ab-name .ab-n1, .ab-name .ab-n2 { display: block; } .ab-name .ab-n2 { padding-left: .42em; } .ab-role { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; font: 600 17px/1.2 var(--font-text); color: var(--ink); } .ab-role span { font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .ab-hair { display: block; width: clamp(40px, 6vw, 96px); height: 2px; border-radius: 2px; background: var(--tayf); } .ab-lead { max-width: 38ch; margin: 18px 0 0; font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); } .ab-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; } .ab-play { display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 22px 0 8px; border-radius: 999px; background: var(--btn); color: var(--on-btn, #fff); font: 600 15px/1 var(--font-text); } .ab-tri { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; } .ab-tri svg { width: 18px; height: auto; transition: transform .35s var(--emph); transform-origin: 50% 66%; } .ab-play:hover .ab-tri svg, .ab-play:focus-visible .ab-tri svg { transform: scale(1.22); } .ab-play:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .ab-360 { grid-column: 8 / -1; position: relative; margin: 0; display: grid; justify-items: center; padding-top: 24px; } .ab-stage { position: relative; height: min(76svh, 680px); aspect-ratio: .5555; } .ab-stage tayf-donen { position: relative; z-index: 1; width: 100%; height: 100%; } .ab-floor { position: absolute; left: -14%; right: -14%; bottom: 3%; height: 7%; background: linear-gradient(180deg, var(--ground), transparent); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); } .ab-floor::before { content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 2px; background: var(--tayf); opacity: .7; } .ab-360 figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink-2); } .ab-deg { min-width: 4ch; font: 500 12px/1 var(--font-mono); color: var(--teal); text-align: right; } .ab-dial { position: relative; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); } .ab-dial i { position: absolute; inset: 0; transition: transform .12s linear; } .ab-dial i::after { content: ''; position: absolute; left: 50%; top: 2px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--btn); } .ab-body { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: clamp(40px, 6vw, 88px); } .ab-story { grid-column: 1 / span 8; columns: 2; column-gap: 32px; } .ab-story p { margin: 0 0 16px; break-inside: avoid; font-size: 17px; line-height: 1.6; } .ab-facts { grid-column: 10 / -1; margin: 0; border-top: 1px solid var(--line); } .ab-facts div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ab-facts dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .ab-facts dd { margin: 0; font-size: 15px; line-height: 1.4; } .ab-h { margin: 0 0 18px; } .ab-career { position: relative; z-index: 1; margin-top: clamp(48px, 7vw, 104px); --who: clamp(200px, 22%, 290px); } .ab-axis { list-style: none; position: relative; height: 22px; margin: 0 0 6px var(--who); padding: 0; border-bottom: 1px solid var(--line); } .ab-axis li { position: absolute; left: calc(var(--x) * 100%); bottom: 6px; translate: -50% 0; font: 500 11px/1 var(--font-mono); color: var(--teal); } .ab-axis li::after { content: ''; position: absolute; left: 50%; top: calc(100% + 6px); width: 1px; height: 6px; background: var(--line); } .ab-rows { list-style: none; margin: 0; padding: 0; } .ab-row { position: relative; display: grid; grid-template-columns: var(--who) minmax(0, 1fr); column-gap: 0; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .ab-who { display: grid; gap: 3px; padding-right: 16px; } .ab-who b { font: 700 17px/1.2 var(--font-display); } .ab-who span { font: 600 13px/1.3 var(--font-text); color: var(--teal); } .ab-bar { position: relative; height: 26px; } .ab-seg { position: absolute; top: 6px; bottom: 6px; left: calc(var(--a) * 100%); width: max(10px, calc((var(--b) - var(--a)) * 100%)); background: linear-gradient(90deg, #D7E55F, #89D8B4 35%, #65B8DA 70%, #798DCB); background-size: calc(100% / max(.02, var(--b) - var(--a))) 100%; background-position: calc(var(--a) / max(.02, 1 - (var(--b) - var(--a))) * 100%) 0; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); transform-origin: 0 50%; transition: transform .9s var(--emph) calc(var(--i) * 90ms + 200ms), top .3s var(--emph), bottom .3s var(--emph); } .ready .ab-row:not(.in) .ab-seg { transform: scaleX(0); } .ab-when { position: absolute; top: 50%; left: calc(var(--b) * 100% + 12px); translate: 0 -50%; font: 500 11px/1 var(--font-mono); color: var(--teal); white-space: nowrap; } .ab-row:nth-child(1) .ab-when, .ab-row:nth-child(2) .ab-when { left: auto; right: calc((1 - var(--a)) * 100% + 12px); } .ab-what { grid-column: 2; margin: 0; max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--emph), opacity .3s var(--emph), margin .45s var(--emph); } .ab-row:is(:hover, :focus-within) .ab-what, .ab-row.last .ab-what { max-height: 8em; opacity: 1; margin-top: 8px; } .ab-row:is(:hover, :focus-within) .ab-seg { top: 3px; bottom: 3px; } .ab-more { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: clamp(48px, 7vw, 96px); } .ab-awards { grid-column: 1 / span 5; } .ab-tools { grid-column: 7 / -1; } .ab-aw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; color: var(--ink); } .ab-aw-n { width: clamp(84px, 9vw, 132px); margin-top: -6px; transition: transform .4s var(--emph); } .ab-aw:hover .ab-aw-n { transform: translateY(-4px); } .ab-aw-t { display: grid; gap: 4px; } .ab-aw-t > b { font: 700 22px/1.15 var(--font-display); } .ab-aw-t > span { font: 500 12px/1.3 var(--font-mono); color: var(--teal); } .ab-aw ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .ab-aw li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); } .ab-aw li b { margin-left: auto; font-weight: 600; color: var(--ink); } .ab-aw:hover li b { text-decoration: underline; text-underline-offset: 3px; } .ab-tg { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ab-tg li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: start; } .ab-tk { padding-top: 10px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .ab-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ab-tool { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font: 500 14px/1 var(--font-text); color: var(--ink); cursor: default; outline: none; transition: box-shadow .25s var(--emph), transform .25s var(--emph); } .ab-tool .ti { width: 16px; height: 16px; color: var(--btn); } .ab-tool:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px var(--teal), 0 6px 14px rgba(0, 68, 90, .1); transform: translateY(-2px); } @media (max-width: 1100px) { .ab-story { columns: 1; } .ab-awards { grid-column: 1 / -1; } .ab-tools { grid-column: 1 / -1; margin-top: 40px; } } @media (max-width: 860px) { .ab-top { min-height: 0; grid-template-columns: minmax(0, 1fr); } .ab-intro, .ab-360 { grid-column: 1; } .ab-360 { order: -1; padding-top: 8px; } .ab-stage { height: min(62svh, 520px); } .ab-field { right: -12%; width: 70%; height: 72svh; } .ab-body { grid-template-columns: minmax(0, 1fr); } .ab-story, .ab-facts { grid-column: 1; } .ab-facts { margin-top: 16px; } .ab-career { --who: 0px; } .ab-axis { margin-left: 0; } .ab-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .ab-what { grid-column: 1; } .ab-tg li { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ab-tk { padding-top: 0; } } @media (prefers-reduced-motion: reduce) { .ab-seg { transition: none; } } /* ---------- round 8: the person behind the logo (end chapter): text left, the 360 view on a lattice stage cut at 60° ---------- */ .end-who { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: clamp(32px, 6vw, 88px) 0 clamp(24px, 4vw, 56px); } .ew-text { grid-column: 1 / span 5; position: relative; z-index: 1; } .ew-h { margin: 14px 0 0; font: 800 clamp(40px, 5.4vw, 88px)/.94 var(--font-display); letter-spacing: -.04em; } .ew-text .ab-hair { margin: 22px 0 0; } .ew-p { max-width: 36ch; margin: 18px 0 24px; font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); } .ew-360 { grid-column: 7 / -1; position: relative; margin: 0; display: grid; justify-items: center; } .ew-field { position: absolute; top: 2%; bottom: 10%; left: 18%; right: 0; background: linear-gradient(180deg, var(--k-white, #fff) 0, var(--k-white, #fff) 70%, transparent); transform: skewX(-30deg); transform-origin: 0 100%; overflow: hidden; } .ew-stage { position: relative; height: min(70svh, 640px); aspect-ratio: .5555; } .ew-stage tayf-donen { position: relative; z-index: 1; width: 100%; height: 100%; } .ew-360 figcaption { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink-2); } @media (max-width: 860px) { .end-who { grid-template-columns: minmax(0, 1fr); row-gap: 24px; } .ew-text, .ew-360 { grid-column: 1; } .ew-stage { height: min(60svh, 500px); } .ew-field { left: 10%; right: -20%; } } /* ---------- round 9: "Hareket." in one viewport: the head and the EMPH curve in a narrow column on the left, the film on the right with its timeline directly under it (1280 x 720 and 1440 x 900 hold the whole block) ---------- */ @media (min-width: 961px) { .k-motion { padding-top: clamp(40px, 7vh, 72px); } .mo-grid { row-gap: 12px; align-items: start; } .mo-grid > .k-head { grid-column: 1 / span 4; grid-row: 1; margin: 0; } .k-motion .k-h { font-size: clamp(40px, 3.6vw, 60px); } .k-motion .k-tx { font-size: 15px; line-height: 1.5; margin-top: 10px; } .k-motion .k-head .k-hint { margin-top: 8px; font-size: 13px; } .mo-stage { grid-column: 5 / -1; grid-row: 1 / span 2; width: min(100%, (100svh - var(--nav-h) - 150px) * 16 / 9); justify-self: end; } .k-live .mo-bar { grid-column: 5 / -1; grid-row: 3; margin-top: 0; width: min(100%, (100svh - var(--nav-h) - 150px) * 16 / 9); justify-self: end; } .k-ease { grid-column: 1 / span 4; grid-row: 2 / span 2; align-self: end; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; } .k-ease > .label { grid-column: 1 / -1; } .ease-plot { grid-column: 1; grid-row: 2 / span 2; max-width: 112px; } .ease-time { grid-column: 2; grid-row: 2; align-self: start; font-size: 11px; } .ease-text { grid-column: 2; grid-row: 3; font-size: 13px; } .k-dur { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding-top: 8px; } .k-dur dt { font-size: 12px; } .k-dur dd { font-size: 11px; } .mo-aura i:nth-child(1) { left: 18%; top: -2%; width: 34%; } } /* the drift of the film's glows rests while the film plays (one less layer to composite over the video) */ .mo-stage.film-on .mo-aura i { animation-play-state: paused; } /* ---------- round 9: a clear stop state. The playing chip shows a square and "Durdur"; the player line a large stop button; a small floating pill while the player is out of view ---------- */ .snd-stop { display: none; grid-column: 4; grid-row: 1; align-items: center; gap: 5px; font: 600 10.5px/1 var(--font-mono); color: var(--btn); white-space: nowrap; } .snd-stop i, .sn-stop i, .sp-stop i { display: inline-block; width: 8px; height: 8px; border-radius: 1.5px; background: currentColor; } .snd.playing .snd-stop { display: inline-flex; } .snd.playing .snd-len { display: none; } .snd.playing .snd-ic .ti { display: none !important; } .snd.playing .snd-ic::after { content: ''; width: 8px; height: 8px; border-radius: 1.5px; background: currentColor; } .sn-stop { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--btn); color: var(--on-btn, #fff); font: 600 14px/1 var(--font-text); cursor: pointer; } .sn-stop[hidden] { display: none; } .sn-stop i { width: 10px; height: 10px; } .sn-stop:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .snd-pill { position: fixed; left: 50%; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--btn); color: var(--on-btn, #fff); font: 600 14px/1 var(--font-text); box-shadow: 0 12px 28px rgba(0, 68, 90, .25); cursor: pointer; translate: -50% 0; animation: pillIn .35s var(--emph); } .snd-pill[hidden] { display: none; } .sp-sep { opacity: .6; } .sp-stop { display: inline-flex; align-items: center; gap: 6px; } .sp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .sp-eq b { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; animation: eq .9s ease-in-out infinite alternate; } .sp-eq b:nth-child(2) { animation-delay: -.3s; } .sp-eq b:nth-child(3) { animation-delay: -.6s; } @keyframes eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } } @keyframes pillIn { from { opacity: 0; translate: -50% 12px; } } @media (prefers-reduced-motion: reduce) { .sp-eq b, .snd-pill { animation: none; } } /* round 9: the card's two faces named under it, and a hint */ .kv-hint { margin: 10px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.45; color: var(--ink-2); } .kv-faces { margin-top: 12px; } .app-card .kv-flip { margin-left: 8px; } /* round 10: the end chapter's buttons: no magnet, no jump; a 1 px lift and the fill change, tayf.emph 200 ms */ :is(.end-links, .ew-text) .btn { transition: background-color .2s var(--emph), border-color .2s var(--emph), color .2s var(--emph), transform .2s var(--emph); } :is(.end-links, .ew-text) .btn:hover { transform: translateY(-1px); } :is(.end-links, .ew-text) .btn .ti { transition: none; transform: none !important; } /* ========================================================================================================= Round 11 (2026-10-12): the Kimlik fix round. Motion is a live animation; sound and music fold away; the applications lie on a desk; the screens are one row of previews; the broadcast chapters are a list; the platform templates open big; the chapter titles rise and shine; "Yakında YouTube'da". ========================================================================================================= */ /* ---------- large titles never cut their marks: the word mask is open at the top and the sides (the dot of İ and i, accents) and closed only at the bottom, where the words rise from, with room under the line for ğ ş ç ---------- */ .rv-words .wd { overflow: visible; clip-path: inset(-.7em -.35em 0 -.35em); padding: .12em 0 .26em; margin: -.12em 0 -.26em; } .ready .rv-words:not(.in) .wd > span { transform: translateY(165%); } /* ---------- chapter titles: after the rise, one sheen of the logo gradient passes through the letters (the sting's single sheen, 900 ms); a pointer over the head plays it again. The label's marker slides in along 60° and turns. ---------- */ /* the painted area must reach the marks too (the cedilla of ş, the dot of İ) */ :is(.k-h, .k-pg-h, .ew-h, .yt-h).rv-words .wd > span { position: relative; padding: .12em .05em .26em; margin: -.12em -.05em -.26em; } /* the sheen is a copy of each word in the logo gradient laid over it (one band across the whole title, each word its own slice), lit from left to right. Only its opacity moves, so it runs on the compositor: nothing is repainted per frame (a moving background inside the letters repainted the whole page every frame and made the scroll stutter). */ .ready :is(.k-h, .k-pg-h, .ew-h, .yt-h).rv-words.sheen .wd > span::after { content: attr(data-t); position: absolute; inset: 0; padding: inherit; white-space: nowrap; pointer-events: none; background: linear-gradient(90deg, #D7E55F, #89D8B4 34%, #65B8DA 67%, #798DCB) no-repeat; background-size: var(--hw, 640px) 100%; background-position: calc(var(--bx, 0px) * -1) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; opacity: 0; animation: wdSheen .56s cubic-bezier(.2, 0, 0, 1) calc(var(--bxr, 0) * 520ms) both; } @keyframes wdSheen { 0% { opacity: 0; } 32% { opacity: 1; } 100% { opacity: 0; } } html[data-tema="gece"] .sheen .wd > span::after { content: none; } .ready .k-hx .label::before { transition: transform .55s var(--emph) .15s, opacity .3s var(--emph) .15s; } .ready .k-hx:not(:has(.k-h.in)) .label::before { transform: translate(-6px, 10.4px) rotate(-60deg); opacity: 0; } .k-hx:hover .label::before { transform: translateX(3px); } /* ---------- shared: a list of moments or chapters, each with its time and a fill while it plays ---------- */ .tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .tl-i { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; width: 100%; padding: 9px 12px 11px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; overflow: hidden; transition: background-color .25s var(--emph), color .25s var(--emph), box-shadow .25s var(--emph); } .tl-i:hover { background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink); } .tl-i .n { font: 500 11px/1.3 var(--font-mono); color: var(--teal); } .tl-t { display: grid; gap: 3px; min-width: 0; } .tl-t b { font: 600 14px/1.3 var(--font-text); color: inherit; } .tl-t span { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); } .tl-at { font: 500 11px/1.3 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; } .tl-p { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--tayf); transform: scaleX(var(--tp, 0)); transform-origin: left; opacity: 0; } .tl-i.on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); } .tl-i.on .tl-p { opacity: 1; } .tl-i.on::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tayf); } .tl-i:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 1px; } /* ---------- 09 motion: the live animation in a frame; the moments beside it; the bar under it ---------- */ .mo-film { overflow: hidden; background: #fff; -webkit-mask: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) intersect, linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .mo-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mo-comp { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform: scale(var(--k, .42)); transform-origin: 0 0; visibility: hidden; pointer-events: none; background: #fff; color-scheme: light; } .mo-stage.comp-on .mo-comp { visibility: visible; } .mo-side { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; } .mo-live { display: flex; align-items: center; gap: 8px; margin: 0; padding-left: 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); } .mo-live .ti { width: 16px; height: 16px; flex: none; color: var(--teal); } .mo-bar, .k-live .mo-bar { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 0; } .ms-mk { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 2px; height: 10px; margin: -5px 0 0 -1px; border-radius: 1px; background: var(--ink-2); opacity: .35; pointer-events: none; } @media (min-width: 961px) { .mo-side { grid-column: 1 / span 4; grid-row: 2 / span 2; align-self: end; } .mo-bar, .k-live .mo-bar { grid-column: 5 / -1; grid-row: 3; width: min(100%, (100svh - var(--nav-h) - 150px) * 16 / 9); justify-self: end; } } /* ---------- 10 sound and 12 music: one fold per group, one open at a time; rows with a name and a line ---------- */ .snd-acc { display: grid; gap: 10px; margin-top: clamp(20px, 3vw, 32px); } .snd-acc .snd-group { display: block; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); interpolate-size: allow-keywords; } .snd-acc .snd-group::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--emph), content-visibility .4s var(--emph) allow-discrete; } .snd-acc .snd-group[open]::details-content { block-size: auto; } .snd-sum { display: grid; grid-template-columns: 140px auto minmax(0, 1fr) auto 30px; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; cursor: pointer; list-style: none; border-radius: 18px; } .snd-sum::-webkit-details-marker { display: none; } .snd-sum .snd-gt { padding: 0; } .snd-sum .snd-ct { margin: 0; font: 500 11px/1 var(--font-mono); color: var(--ink-2); } .snd-peek { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--ink-2); transition: opacity .25s var(--emph); } .snd-group[open] .snd-peek { opacity: 0; } .snd-on { visibility: hidden; color: var(--btn); } .snd-group.playing .snd-on { visibility: visible; } .snd-chev { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); color: var(--btn); transition: transform .4s var(--emph), border-color .25s var(--emph); } .snd-chev .ti { width: 14px; height: 14px; } .snd-group[open] .snd-chev { transform: rotate(180deg); } .snd-sum:hover .snd-chev { border-color: var(--teal); } .snd-sum:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: -2px; } .snd-acc .snd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 14px 16px; } .snd-acc :is(.snd-btn, .mz-btn) { height: 52px; grid-template-columns: 26px minmax(0, 1fr) 40px auto; gap: 10px; padding: 0 12px 0 10px; border-radius: 14px; background: transparent; } .snd-acc .snd-ic { width: 26px; height: 26px; } .snd-acc .snd-id { display: grid; gap: 3px; font: inherit; white-space: normal; } .snd-acc .snd-id b { font: 600 13.5px/1.2 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snd-acc .snd-id span { font-size: 11.5px; line-height: 1.25; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .snd.paused :is(.snd-btn, .mz-btn) { border-color: var(--teal); } .snd.paused .snd-ic { background: var(--color-mint-100, #EAF4F1); color: var(--btn); box-shadow: inset 0 0 0 1.5px var(--btn); } .snd-acc .snd-now { margin-top: 6px; } .sn-pp { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--btn); cursor: pointer; transition: border-color .2s var(--emph), background-color .2s var(--emph), color .2s var(--emph); } .sn-pp:not(:disabled):hover { border-color: var(--teal); } .sn-pp:disabled { opacity: .4; cursor: default; } .sn-line .sn-pp .ti { grid-area: 1 / 1; width: 13px; height: 13px; color: inherit; } .sn-pp .ti + .ti, .sn-pp[data-state="playing"] .ti:first-child { display: none; } .sn-pp[data-state="playing"] .ti + .ti { display: block; } .sn-pp[data-state="paused"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .sn-pp:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } @media (max-width: 1100px) { .snd-acc .snd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .snd-sum { grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) 30px; gap: 10px; padding-left: 16px; } .snd-peek { display: none; } .snd-acc .snd-list { grid-template-columns: minmax(0, 1fr); padding: 2px 10px 12px; } } /* ---------- 11 applications: the desk. The pieces lie on the page (no box), a little turned, grouped by kind; a hover straightens and lifts a piece along 60°, a press grows it into the light box ---------- */ .k-live .k-apps { padding-top: var(--sec); } .dk { --dks: 1; display: grid; gap: clamp(28px, 4vw, 56px); margin-top: clamp(28px, 4vw, 48px); } .dk-g { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 18px clamp(20px, 3vw, 40px); align-items: center; padding-top: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); } .dk-head .label { margin-bottom: 10px; } .dk-t { margin: 0; font: 700 clamp(22px, 1.1vw + 12px, 30px)/1.1 var(--font-display); letter-spacing: -.02em; } .dk-tx { margin: 8px 0 0; max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .dk-head .dk-acts { margin-top: 12px; } .dk-row { list-style: none; margin: 0; padding: 14px 6px 6px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px clamp(16px, 2vw, 28px); } .dk-i { --dkw: calc(var(--dw) * 1px * var(--dks)); width: min(var(--dkw), 100%); flex: none; display: grid; gap: 10px; } .dk-art { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; transform: rotate(var(--rot, 0deg)); transition: transform .5s var(--emph), filter .5s var(--emph); filter: drop-shadow(0 1px 0 rgba(0, 68, 90, .07)) drop-shadow(0 16px 18px rgba(0, 68, 90, .14)); } .dk-art img { display: block; width: 100%; height: auto; border-radius: 3px; background: #fff; } .dk-art .dk-over { position: absolute; left: 0; top: 0; height: 100%; background: transparent; } .dk-art:hover, .dk-art:focus-visible { transform: translate(-3px, -5.2px) rotate(0deg); filter: drop-shadow(0 1px 0 rgba(0, 68, 90, .07)) drop-shadow(0 26px 26px rgba(0, 68, 90, .2)); } .dk-art:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 6px; } .dk-zoom { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #1D6F8C; box-shadow: 0 4px 12px rgba(0, 68, 90, .16); opacity: 0; transform: scale(.85); transition: opacity .25s var(--emph), transform .25s var(--emph); pointer-events: none; } .dk-zoom .ti { width: 15px; height: 15px; } :is(.dk-art, .sim-open):is(:hover, :focus-visible) .dk-zoom { opacity: 1; transform: none; } .dk-cap { display: grid; gap: 7px; } .dk-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; } .dk-n b { font: 600 14px/1.3 var(--font-text); } .dk-n span { font: 500 10.5px/1.3 var(--font-mono); color: var(--teal); } .dk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .dk-dl, .dk-x { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--btn); font: 600 12px/1 var(--font-text); white-space: nowrap; cursor: pointer; transition: border-color .2s var(--emph); } .dk-dl em { font: 500 10px/1 var(--font-mono); font-style: normal; color: var(--ink-2); } .dk-dl .ti, .dk-x .ti { width: 13px; height: 13px; flex: none; } .dk-dl:hover, .dk-x:hover { border-color: var(--teal); } .dk-dl:focus-visible, .dk-x:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } .dk-avatar .dk-art img { border-radius: 50%; background: transparent; } .dk-card .dk-art { cursor: default; } .dk-card .kv { width: 100%; height: auto; max-width: none; } @media (max-width: 1699px) { .dk { --dks: .84; } } @media (max-width: 1399px) { .dk { --dks: .72; } } @media (max-width: 1099px) { .dk { --dks: .62; } } @media (max-width: 860px) { .dk { --dks: .8; } .dk-g { grid-template-columns: minmax(0, 1fr); } .dk-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--margin)); padding: 12px var(--margin) 14px; scroll-padding-inline: var(--margin); scrollbar-width: none; } .dk-row::-webkit-scrollbar { display: none; } .dk-i { width: min(var(--dkw), 72vw); scroll-snap-align: start; } } /* the light box: it grows from the piece (kimlik.js), shows a live page or a still, and carries the download */ .app-lb[open] .lb-frame { animation: none; } .lb-frame iframe.lb-over { background: transparent; pointer-events: none; color-scheme: light; } .lb-frame iframe[hidden], .lb-img[hidden], .lb-dl[hidden], .lb-live[hidden] { display: none; } .lb-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; } .lb-frame.is-img { background: transparent; box-shadow: none; } .lb-dl { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font-text); color: var(--btn); } .lb-dl .ti { width: 16px; height: 16px; } /* ---------- 14 screens (compact): one row of small previews per block; the panel opens under it ---------- */ .k-screens .sc-block { margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; } .k-screens .sc-top { margin-bottom: 12px; } .sc-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; } .sc-pv { flex: none; display: grid; justify-items: center; gap: 8px; width: 96px; padding: 10px 6px 10px; border: 1px solid transparent; border-radius: 16px; background: none; cursor: pointer; color: var(--ink-2); font: 600 12px/1.2 var(--font-text); text-align: center; transition: border-color .25s var(--emph), background-color .25s var(--emph), color .25s var(--emph); } .sc-mini { display: block; width: 50px; padding: 3px; border-radius: 10px; background: #1B2B29; box-shadow: 0 10px 16px -10px rgba(0, 68, 90, .5); transition: transform .4s var(--emph), box-shadow .3s var(--emph); } .sc-mini img { display: block; width: 100%; height: auto; aspect-ratio: 1179 / 2556; object-fit: cover; border-radius: 7px; } .sc-pv:hover { color: var(--ink); } .sc-pv:hover .sc-mini { transform: translate(-2px, -3.5px); } .sc-pv[aria-expanded="true"] { border-color: var(--line); background: var(--surface); color: var(--ink); } .sc-pv[aria-expanded="true"] .sc-mini { box-shadow: 0 0 0 2px var(--btn), 0 10px 16px -10px rgba(0, 68, 90, .5); } .sc-pv:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } .sc-months .sc-pv { width: 66px; padding-inline: 4px; } .sc-months .sc-mini { width: 38px; padding: 2px; border-radius: 8px; } .sc-months .sc-mini img { border-radius: 6px; } .sc-dr-in { position: relative; min-height: 0; } .js .sc-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--emph); } .js .sc-drawer.open { grid-template-rows: 1fr; } .js .sc-dr-in { overflow: hidden; } .js .sc-set { display: none; } .js .sc-set.on { display: grid; padding: 18px 56px 8px 0; } .sc-x { display: none; } .js .sc-drawer.open .sc-x { position: absolute; right: 0; top: 18px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .sc-x .ti { width: 16px; height: 16px; } .k-screens .sc-print { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .k-screens .sc-print .label { margin: 0 4px 0 0; } .k-screens .sc-print .sc-dl { padding: 7px 12px; } @media (max-width: 960px) { .js .sc-set.on { padding-right: 0; padding-top: 60px; } } /* ---------- 15 broadcast: the chapters as a list beside the screen (a strip under it on narrow screens) ---------- */ .cast { display: grid; gap: 16px 28px; align-items: start; } .cast-main { min-width: 0; } .cast-side { margin: 0; display: grid; align-content: start; gap: 8px; min-width: 0; } .cs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 12px; } .cs-nav { display: flex; gap: 6px; } .cs-nav button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--btn); cursor: pointer; transition: border-color .2s var(--emph); } .cs-nav button:hover { border-color: var(--teal); } .cs-nav .ti { width: 15px; height: 15px; } .cast-side .cast-index { display: grid; flex-wrap: nowrap; gap: 0; max-width: none; } .cast .ci { display: grid; padding: 7px 12px 9px; font: inherit; color: var(--ink-2); } .cast .ci .tl-t b { font-size: 13.5px; } .cast .ci-at { display: inline; } .cast .ci.on .ci-t { text-decoration: none; } .cast .ci.done .n { color: var(--ink-2); } .cast-side .k-hint { margin: 6px 0 0 12px; font-size: 13px; } @media (min-width: 1100px) { .cast { grid-template-columns: minmax(0, 1fr) minmax(240px, 290px); } .cast-main .cast-screen { min-width: 0; } } @media (max-width: 1099px) { .cast-side .cast-index { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: thin; } .cast-side .cast-index li { flex: none; scroll-snap-align: start; } .cast .ci { grid-template-columns: auto auto; gap: 8px; width: auto; white-space: nowrap; box-shadow: 0 0 0 1px var(--line); } .cast .ci .tl-at { display: none; } .cast .ci.on::before { top: auto; bottom: 0; left: 12px; right: 12px; width: auto; height: 2px; border-radius: 2px; } .cast .ci .tl-p { display: none; } } /* ---------- 16 platforms: every template is a button; a press opens it big, playing ---------- */ button.sim-frame, .sim-pimg { display: block; padding: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: zoom-in; } .sim-open { transition: transform .4s var(--emph), box-shadow .4s var(--emph); } .sim-open:hover, .sim-open:focus-visible { transform: translate(-2px, -3.5px); box-shadow: 0 14px 22px -14px rgba(0, 68, 90, .45); } .sim-open:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .sim-pimg { position: absolute; inset: 0; width: 100%; height: 100%; background: none; } .sim-pimg img { display: block; width: 100%; height: 100%; object-fit: cover; } .sim-pimg:hover, .sim-pimg:focus-visible { transform: none; box-shadow: none; } /* ---------- "Yakında YouTube'da" (home and the end of Kimlik) ---------- */ .yt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 28px clamp(24px, 4vw, 56px); align-items: start; } .yt-head .label { margin-bottom: 14px; } .yt-h { margin: 0; font: 800 clamp(32px, 2.2vw + 16px, 52px)/1.02 var(--font-display); letter-spacing: -.03em; } .yt-tx { margin: 14px 0 0; max-width: 38ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); } .yt-ch { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; height: 46px; padding: 0 18px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-text); transition: border-color .25s var(--emph); } .yt-ch b { font: 500 12px/1 var(--font-mono); color: var(--teal); } .yt-ch .yt-tri { width: 17px; height: 15px; transition: transform .4s var(--emph); } .yt-ch .ti { width: 15px; height: 15px; color: var(--btn); } .yt-ch:hover { border-color: var(--teal); } .yt-ch:hover .yt-tri { transform: translate(-1px, -1.7px); } .yt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .yt-i { display: grid; align-content: start; gap: 8px; } .yt-art { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--k-white, #fff); box-shadow: 0 0 0 1px var(--line); } .yt-art img { display: block; width: 100%; height: 100%; object-fit: cover; } .yt-ph { position: absolute; inset: 0; display: grid; place-items: center; } .yt-glow { position: absolute; inset: 0; background: radial-gradient(55% 75% at 0% 0%, rgba(215, 229, 95, .38), transparent 70%), radial-gradient(55% 75% at 100% 100%, rgba(101, 184, 218, .38), transparent 70%); animation: ytDrift 9s ease-in-out infinite alternate; } @keyframes ytDrift { to { transform: translate(2%, 3%) scale(1.04); } } .yt-ph .yt-tri { position: relative; width: 20%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 68, 90, .16)); transition: transform .5s var(--emph); } .yt-i:hover .yt-ph .yt-tri { transform: translate(-3px, -5.2px); } .yt-kind { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 500 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: #00445A; } .yt-st { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 0; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .yt-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-mint, #48B6A3); } .st-kurguda .yt-st i { background: #65B8DA; animation: ytPulse 1.6s var(--emph) infinite alternate; } .st-cekiliyor .yt-st i { background: #D7E55F; } @keyframes ytPulse { to { opacity: .3; } } .yt-t { margin: 0; font: 700 17px/1.25 var(--font-display); letter-spacing: -.01em; } .yt-d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .yt-watch { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-text); color: var(--btn); } .yt-watch .yt-tri { width: 16px; height: 14px; } .yt-watch .ti { width: 14px; height: 14px; } .yt-watch:hover span { text-decoration: underline 2px var(--teal); text-underline-offset: 4px; } .k-yt { padding: clamp(40px, 7vw, 96px) 0 clamp(16px, 3vw, 32px); } @media (max-width: 1000px) { .yt { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .yt-list { grid-template-columns: minmax(0, 1fr); gap: 16px; } .yt-i { grid-template-columns: 132px minmax(0, 1fr); column-gap: 14px; } .yt-art { grid-row: 1 / span 4; align-self: start; } .yt-st { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .yt-glow, .st-kurguda .yt-st i { animation: none; } } /* the first video leads (wide), its other cuts follow under it */ .yt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yt-i:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 24px; align-items: center; } .yt-i:first-child .yt-art { grid-row: 1 / span 4; } .yt-i:first-child .yt-t { font-size: 22px; } .yt-i:first-child .yt-ph .yt-tri { width: 16%; } @media (max-width: 700px) { .yt-list { grid-template-columns: minmax(0, 1fr); } .yt-i:first-child { grid-template-columns: minmax(0, 1fr); } .yt-i:first-child .yt-art { grid-row: auto; } .yt-i:first-child .yt-t { font-size: 19px; } } /* narrow screens: the bar sits right under the animation, the moments follow, short */ @media (max-width: 960px) { .mo-bar, .k-live .mo-bar { order: 1; } .mo-side { order: 2; } } @media (max-width: 560px) { .mo-moments .tl-t span { display: none; } .mo-moments .tl-i { padding-block: 8px 10px; } } /* animations run only while they are seen: the group's sound bars only while it sounds, the video block's light only on screen */ .snd-on b { animation: none; } .snd-group.playing .snd-on b { animation: eq .9s ease-in-out infinite alternate; } .snd-group.playing .snd-on b:nth-child(2) { animation-delay: -.3s; } .snd-group.playing .snd-on b:nth-child(3) { animation-delay: -.6s; } .yt:not(.seen) .yt-glow, .yt:not(.seen) .yt-st i { animation-play-state: paused; } .kv:not(.seen) .kv-uv { animation-play-state: paused; } /* the icon set has no up arrow: "Başa dön" turns the down arrow */ .ti.ti-up, .end-links .btn .ti.ti-up { transform: rotate(180deg) !important; } /* ========================================================================================================= Case pages (vaka, 2026-10-12; content/vakalar.mjs, build.mjs vaka(), assets/vaka.js). The Kimlik language on a project: no cards, the page is the stage (Kurallar 31). A cover with the case films' own cuts, the facts, an index, then numbered chapters with the Kimlik heads (.k-head .k-h: the rising title and its one sheen) and modules on the bare page. The outer frame is the tayfcet identity; inside, a work speaks in its own colours (the Varan price tags stay Varan yellow). Themes: Açık, Loş, Gece, with the brand book's switch. Without JS everything is complete and still. ========================================================================================================= */ .page-vaka .top::before { background: color-mix(in srgb, var(--ground) 92%, transparent); } .vk-hero { position: relative; padding-top: clamp(28px, 6vh, 72px); } .vk-hero > .aura { overflow: hidden; } .vk-hero-in { position: relative; z-index: 1; } .vk-title { margin-top: 18px; } .vk-lede { margin-top: 22px; max-width: 46ch; font-size: var(--text-lead-size); line-height: 1.5; color: var(--ink-2); } .vk-hero .award-chips { margin-top: 26px; } /* the cover: the films' own cuts, full width, no tinted box around them */ .case-stage.vk-stage { position: relative; z-index: 1; display: block; margin-top: clamp(32px, 5vh, 56px); padding: 0; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: var(--line-2); } .case-stage.vk-stage img, .vk-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; } .vk-meta { position: relative; z-index: 1; margin-top: clamp(28px, 4vh, 44px); } /* the index: one row per chapter, a hairline, the number, the name, an arrow on hover */ .vk-index { position: relative; z-index: 1; margin-top: clamp(36px, 5vh, 56px); } .vk-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); column-gap: 24px; } .vk-index a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 13px 0; border-top: 1px solid var(--line); font: 600 15px/1.3 var(--font-text); color: var(--ink); transition: color .25s var(--emph); } .vk-index .n { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--teal); } .vk-index .ti { width: 16px; height: 16px; color: var(--teal); opacity: 0; transform: translateY(-4px); transition: opacity .25s var(--emph), transform .25s var(--emph); } .vk-index a:hover, .vk-index a:focus-visible { color: var(--teal); } .vk-index a:hover .ti, .vk-index a:focus-visible .ti { opacity: 1; transform: none; } /* chapters */ .vk-ch { position: relative; padding-top: var(--sec); scroll-margin-top: var(--nav-h); } .vk-head { max-width: 48rem; } .vk-mods { display: grid; gap: clamp(40px, 6vw, 80px); margin-top: clamp(32px, 5vw, 56px); } .vk-mod { min-width: 0; } .vk-note, .vk-cap, .vk-f-cap { margin: 14px 0 0; max-width: 78ch; font: 500 12.5px/1.6 var(--font-mono); letter-spacing: .01em; color: var(--teal); } /* numbers: ink figures (they must read), a gradient hairline above each, the label under it */ .vk-num { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 32px 24px; } .vk-n { position: relative; padding-top: 18px; } .vk-n::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tayf); transform-origin: left; } .vk-n-v { margin: 0; font: 700 clamp(46px, 5vw, 84px)/1 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; } .vk-n-l { margin: 12px 0 0; font: 600 17px/1.3 var(--font-text); color: var(--ink); } .vk-n-s { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .ready .vk-num:not(.in) .vk-n::before { transform: scaleX(0); } .ready .vk-num .vk-n::before { transition: transform .9s var(--emph) var(--bd, 0ms); } /* the story in short blocks */ .vk-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px 24px; } .vk-st { border-top: 1px solid var(--line); padding-top: 14px; } .vk-st-k { display: flex; gap: 10px; margin: 0 0 10px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .vk-st-k .n { opacity: .7; } .vk-st-t { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 40ch; } /* films: the player, tabs when there are several, chapters as a strip of stills or a list beside */ .vk-film { display: grid; gap: 16px; } .vk-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .vk-tabs button { font: 600 14px/1 var(--font-text); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .25s var(--emph), color .25s var(--emph), border-color .25s var(--emph); } .vk-tabs button:hover { border-color: var(--teal); } .vk-tabs button[aria-selected="true"] { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .vk-f { margin: 0; } .vk-f[hidden] { display: none; } .vk-f video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0B1716; border-radius: var(--r-md); } .vk-f .embed { margin: 0; } .vk-f .embed iframe { border-radius: var(--r-md); } .vk-f-cap { margin-top: 10px; } .vk-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; } .vk-step { position: relative; display: grid; align-content: start; gap: 5px; width: 100%; padding: 0 0 14px; border: 0; background: none; color: var(--ink-2); text-align: left; cursor: pointer; font: inherit; } .vk-step-img { display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 10px; overflow: hidden; background: var(--line-2); box-shadow: 0 0 0 2px transparent; transition: box-shadow .25s var(--emph); } .vk-step-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--emph); } .vk-step:hover .vk-step-img img { transform: scale(1.04); } .vk-step .n { font: 500 11px/1 var(--font-mono); color: var(--teal); font-variant-numeric: tabular-nums; } .vk-step b { font: 600 15px/1.25 var(--font-text); color: var(--ink); } .vk-step-t { font-size: 13px; line-height: 1.4; } .vk-step-p { position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--tayf); transform: scaleX(var(--tp, 0)); transform-origin: left; opacity: 0; } .vk-step.on .vk-step-p { opacity: 1; } .vk-step.on .vk-step-img { box-shadow: 0 0 0 2px var(--teal); } .vk-step:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 4px; border-radius: 10px; } @media (max-width: 960px) { .vk-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 40%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; } .vk-steps li { scroll-snap-align: start; } } .vk-film--yan { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; column-gap: 24px; } .vk-film--yan .vk-screen { grid-column: 1; } .vk-film--yan .vk-tl { grid-column: 2; grid-row: 1; } @media (max-width: 860px) { .vk-film--yan { grid-template-columns: 1fr; } .vk-film--yan .vk-tl { grid-column: 1; grid-row: auto; } } /* before / after: two states of one place; the line runs at 60° (the brand's scene wipe). --v (0-100) comes from the range input; the input spans exactly the travel of the line, so the handle stays under the pointer */ .vk-ba { margin: 0; } .vk-ba-st { --v: 50; --sk: calc(28.8675% / var(--ar, 1.7778)); --pos: calc(var(--v) * (100% + 2 * var(--sk)) / 100 - var(--sk)); position: relative; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--r-md); overflow: hidden; background: var(--line-2); touch-action: pan-y; user-select: none; -webkit-user-select: none; } .vk-ba-st img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .vk-ba-b { position: absolute; inset: 0; clip-path: polygon(0 0, calc(var(--pos) + var(--sk)) 0, calc(var(--pos) - var(--sk)) 100%, 0 100%); } .vk-ba-line { position: absolute; top: -12%; bottom: -12%; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; transform: rotate(30deg); box-shadow: 0 0 0 1px rgba(0, 68, 90, .18); pointer-events: none; } .vk-ba-knob { position: absolute; left: var(--pos); top: 50%; display: flex; align-items: center; justify-content: center; gap: 5px; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-2); pointer-events: none; transition: transform .25s var(--emph); } .vk-ba-knob i { width: 8px; height: 9.2px; background: #1D6F8C; clip-path: polygon(0 50%, 100% 0, 100% 100%); } .vk-ba-knob i + i { clip-path: polygon(0 0, 100% 50%, 0 100%); } .vk-ba-lab { position: absolute; top: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #00445A; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; } .vk-ba-lb { left: 14px; } .vk-ba-la { right: 14px; } .vk-ba-r { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--sk)); width: calc(100% + 2 * var(--sk)); height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; } .vk-ba-r::-webkit-slider-thumb { -webkit-appearance: none; width: 54px; height: 100%; } .vk-ba-r::-moz-range-thumb { width: 54px; height: 100%; border: 0; } .vk-ba-r:focus-visible ~ .vk-ba-knob, .vk-ba-st:has(.vk-ba-r:focus-visible) .vk-ba-knob { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .vk-ba-st:hover .vk-ba-knob { transform: scale(1.06); } /* price tags: the work's own colours (Varan yellow, measured from the outdoor tag #FFCA10); the shelf price is struck, then the bill runs up */ .vk-tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; } .vk-tag { position: relative; padding: 20px 22px 22px 22px; border-radius: 14px; background: #FFCA10; color: #141414; } .vk-tag-hole { position: absolute; right: 16px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } .vk-tag-who { margin: 0; max-width: 22ch; font-size: 14px; line-height: 1.35; color: #2A2A2A; } .vk-tag-what { margin: 2px 0 14px; font: 700 21px/1.2 var(--font-display); letter-spacing: -.01em; } .vk-tag-p { margin: 0; display: grid; justify-items: start; gap: 4px; } .vk-tag-from { position: relative; font: 600 18px/1 var(--font-display); color: #3A3A3A; text-decoration: none; } .vk-tag-from::after { content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: #D12B2B; transform: rotate(-9deg); transform-origin: left; } .ready .vk-tag .vk-tag-from::after { transition: transform .45s var(--emph) .1s; } .ready .vk-tag:not(.on) .vk-tag-from::after { transform: rotate(-9deg) scaleX(0); } .vk-tag-to { font: 800 clamp(34px, 3.2vw, 46px)/1 var(--font-display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* galleries: pictures that open in the light box; a panorama gets a whole row at its own shape */ .vk-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; } .vk-g { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--line-2); aspect-ratio: 4 / 3; cursor: zoom-in; } .vk-g img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--emph); } .vk-g:hover img { transform: scale(1.035); } .vk-g.wide { grid-column: 1 / -1; aspect-ratio: auto; } .vk-gal.n1 { grid-template-columns: minmax(0, 560px); } .vk-gal.n1 .vk-g { aspect-ratio: auto; } .vk-gal.n1 .vk-g img { height: auto; } .vk-g.wide img { height: auto; } .vk-g:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .vk-lb .lb-stage { padding-bottom: 20px; } .vk-lb-img { display: block; max-width: 100%; max-height: calc(100dvh - 104px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow-3); } .vk-lb .lb-bar button[hidden] { display: none; } .vk-lb .lb-cap { margin-right: auto; } html[data-tema="los"] .vk-lb::backdrop { background: rgba(221, 231, 230, .96); } html[data-tema="gece"] .vk-lb::backdrop { background: rgba(11, 23, 22, .96); } /* making-of: a short note and the loops beside it */ .vk-make { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 24px; align-items: center; } .vk-make-t { margin: 0; max-width: 30ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); } .vk-make-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .vk-mk { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: #0B1716; } .vk-mk video { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 760px) { .vk-make { grid-template-columns: 1fr; } } /* credits */ .vk-credits { margin: 0; display: grid; } .vk-credits div { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-top: 1px solid var(--line); } .vk-credits div:last-child { border-bottom: 1px solid var(--line); } .vk-credits dt { font: 500 12px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .vk-credits dd { margin: 0; font-weight: 500; line-height: 1.55; } @media (max-width: 560px) { .vk-credits div { grid-template-columns: 1fr; } } .vk-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(40px, 6vw, 64px); } .page-vaka .next-media { background: var(--line-2); } /* the side rail: wide screens only, once the chapters begin */ .vk-rail { position: fixed; z-index: 20; top: 50%; left: max(14px, calc((100vw - var(--inner)) / 2 - 62px)); transform: translateY(-50%); display: none; opacity: 0; pointer-events: none; transition: opacity .4s var(--emph); } .vk-rail.on { opacity: 1; pointer-events: auto; } @media (min-width: 1360px) { .vk-rail { display: block; } } .vk-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .vk-rail a { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); opacity: .6; transition: opacity .25s var(--emph), color .25s var(--emph); } .vk-rail a::before { content: ''; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: width .35s var(--emph); } .vk-rail a:hover { opacity: 1; } .vk-rail a.on { opacity: 1; color: var(--teal); } .vk-rail a.on::before { width: 26px; background: var(--tayf); } /* narrow screens */ @media (max-width: 560px) { .vk-num { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; } .vk-n-v { font-size: clamp(30px, 9.6vw, 40px); } .vk-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vk-gal.n1 { grid-template-columns: minmax(0, 1fr); } .vk-ba-lab { top: 10px; padding: 6px 9px; font-size: 10.5px; } .vk-ba-lb { left: 10px; } .vk-ba-la { right: 10px; } .vk-ba-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; } .vk-make-row { gap: 6px; } } /* ========================================================================================================= Round 12 (2026-10-12, Kurallar 53 and 54): the works speak in their own language - A case chapter with a work (.vk-w) opens with a door: a full-width band in the work's own colours, type and motion. The colours are the work's, so a door looks the same in Açık, Loş and Gece; the site frame around it stays tayfcet. - Fonts (SIL Open Font License 1.1, subset to Latin and Turkish in assets/fonts/vaka): Anton (Vernon Adams), Barlow Condensed Black Italic (Jeremy Tribby), Cinzel (Natanael Gama), Montserrat (Julieta Ulanovsky and others). They load only on the case pages, only where a door or a poster uses them. - Reduced motion or no JS: every door is complete and still. ========================================================================================================= */ @font-face { font-family: "VK Anton"; src: url("/assets/fonts/vaka/vk-anton.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "VK Barlow"; src: url("/assets/fonts/vaka/vk-barlow-bi.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: "VK Cinzel"; src: url("/assets/fonts/vaka/vk-cinzel.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "VK Montserrat"; src: url("/assets/fonts/vaka/vk-montserrat.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } /* the works' palettes (measured from their own boards and posters) */ .vk-w--radyo { --wk-bg: #070707; --wk-ink: #F2F2F2; --wk-ink2: #B9B9B9; --wk-lab: #FF5C52; --wk-acc: #FF0000; --wk: #E00000; --wk-on: #FFFFFF; } .vk-w--ralli { --wk-bg: #0A0A0A; --wk-ink: #F5F4EE; --wk-ink2: #C8C5B6; --wk-lab: #FFC21A; --wk-acc: #FFC21A; --wk: #FFC21A; --wk-on: #141414; } .vk-w--sinema { --wk-bg: #6E1018; --wk-ink: #F8EBCB; --wk-ink2: #EAD6AB; --wk-lab: #E0C580; --wk-acc: #E0C580; --wk: #8A1A24; --wk-on: #F8EBCB; } .vk-w--varan { --wk-bg: #FFFFFF; --wk-ink: #121212; --wk-ink2: #3B3B3B; --wk-lab: #121212; --wk-acc: #FFCA10; --wk: #FFCA10; --wk-on: #121212; } html[data-tema="gece"] .vk-w--sinema { --wk: #E0C580; --wk-on: #2A0A0E; } .vk-ch.vk-w { padding-top: calc(var(--sec) * .7); } .vk-door { position: relative; overflow: hidden; isolation: isolate; background: var(--wk-bg); color: var(--wk-ink); padding: clamp(44px, 7vw, 104px) 0 clamp(40px, 6vw, 88px); } .vk-door-in { position: relative; z-index: 1; } .vk-door .label { color: var(--wk-lab); } .vk-door .label::before { background: var(--wk-acc); } .vk-wt { margin: clamp(20px, 3vw, 34px) 0 0; font: inherit; letter-spacing: normal; line-height: 1; } .vk-door-en { margin: 16px 0 0; font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-lab); } .vk-door-tx { margin: clamp(22px, 3vw, 34px) 0 0; max-width: 54ch; font-size: var(--text-lead-size); line-height: 1.5; color: var(--wk-ink2); } .vk-door-br { margin: 18px 0 0; } .vk-door-br a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font: 600 14px/1 var(--font-text); color: var(--wk-ink); } .vk-door-br .ti { width: 15px; height: 15px; } .vk-door-br a:hover { color: var(--wk-lab); } .vk-door :focus-visible { outline-color: var(--wk-lab); } .vk-w .vk-mods { margin-top: clamp(36px, 5vw, 64px); } /* the work's accent inside its modules (decoration only; text keeps the page's ink for contrast) */ .vk-w .vk-n::before, .vk-w .vk-step-p, .vk-w .tl-p { background: var(--wk); } .vk-w .vk-st { border-top: 2px solid var(--wk); } .vk-w .vk-tabs button[aria-selected="true"] { background: var(--wk); border-color: var(--wk); color: var(--wk-on); } .vk-w .vk-step.on .vk-step-img { box-shadow: 0 0 0 2px var(--wk); } .vk-w--ralli .vk-n-v { font-family: "VK Barlow", var(--font-display); font-style: italic; font-weight: 900; letter-spacing: 0; } .vk-w--sinema .vk-n-v { font-family: "VK Cinzel", Georgia, serif; font-weight: 700; font-size: clamp(34px, 3.8vw, 64px); letter-spacing: 0; text-transform: uppercase; } .vk-w--radyo .vk-st-k, .vk-w--ralli .vk-st-k { color: var(--ink); } /* ---------- radyo: "unu-tanlar" on black, the board's red, the ON AIR lamp ---------- */ .wa { display: block; } .wa-radyo { display: grid; justify-items: start; gap: clamp(16px, 2.4vw, 28px); } .wa-onair { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 8px; border: 2px solid #FF2A2A; border-radius: 8px; font: 400 clamp(16px, 1.8vw, 24px)/1 "VK Anton", Impact, sans-serif; letter-spacing: .08em; color: #FF2A2A; box-shadow: 0 0 28px rgba(255, 0, 0, .35), inset 0 0 14px rgba(255, 0, 0, .2); transition: color .25s, border-color .25s, box-shadow .25s; } .wa-onair i { width: 10px; height: 10px; border-radius: 50%; background: #FF2A2A; box-shadow: 0 0 10px #FF2A2A; } .wa-radyo .wa-word { display: block; font: 400 clamp(88px, 17vw, 240px)/.9 "VK Anton", Impact, sans-serif; letter-spacing: -.005em; color: #FF0000; } .wa-radyo .wa-l { display: block; white-space: nowrap; } .wa-radyo .wl, .wa-radyo .wa-dash { display: inline-block; } .wa-caret { display: inline-block; width: .055em; height: .66em; margin-left: .05em; background: #F2F2F2; opacity: 0; vertical-align: -.02em; } /* motion: lamp off, word hidden; .on runs the take */ .vk-anim.wa-radyo:not(.on) .wa-onair { color: #3A3A3A; border-color: #3A3A3A; box-shadow: none; } .vk-anim.wa-radyo:not(.on) .wa-onair i { background: #3A3A3A; box-shadow: none; } .vk-anim.wa-radyo .wl, .vk-anim.wa-radyo .wa-dash { opacity: 0; } .vk-anim.wa-radyo.on .wl { animation: waIn .01s linear forwards; animation-delay: calc(var(--i) * 90ms + 320ms); } .vk-anim.wa-radyo.on .wa-dash { animation: waIn .01s linear forwards; animation-delay: calc(var(--n1) * 90ms + 330ms); } .vk-anim.wa-radyo.on .wa-caret { animation: waCaret .52s linear calc(var(--n1) * 90ms + 420ms) 3; } .vk-anim.wa-radyo.on .wa-l2 .wl { animation: waIn .01s linear forwards, waPop .4s var(--emph) both; animation-delay: calc(var(--n1) * 90ms + 2080ms + (var(--i) - var(--n1)) * 55ms); } @keyframes waIn { from, to { opacity: 1; } } @keyframes waPop { from { transform: translateY(.12em); } to { transform: none; } } @keyframes waCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---------- ralli: the billboard at night, rally-yellow italic, lamps above, headlights between the lines ---------- */ .vk-w--ralli .vk-door { background: radial-gradient(60% 80% at 70% 0%, rgba(255, 194, 26, .12), transparent 70%), #0A0A0A; } .wa-ralli { display: inline-block; position: relative; max-width: 100%; } .wa-lamps { display: flex; justify-content: space-around; padding: 0 9%; height: 12px; } .wa-lamps i { position: relative; width: clamp(22px, 3vw, 40px); height: 8px; border-radius: 3px 3px 1px 1px; background: #2B2B2B; } .wa-lamps i::after { content: ''; position: absolute; left: -160%; right: -160%; top: 7px; height: clamp(70px, 9vw, 130px); background: radial-gradient(50% 70% at 50% 0, rgba(255, 238, 190, .32), transparent 72%); pointer-events: none; } .wa-board { position: relative; display: block; padding: clamp(16px, 2.6vw, 34px) clamp(20px, 3.6vw, 52px) clamp(14px, 2.2vw, 30px); border-radius: 6px; background: linear-gradient(180deg, #161616, #050505); box-shadow: inset 0 0 0 3px #1F1F1F, 0 34px 60px -34px rgba(0, 0, 0, .9); } .wa-ralli .wa-t { display: block; font: italic 900 clamp(56px, 11vw, 168px)/.84 "VK Barlow", "Arial Narrow", sans-serif; letter-spacing: .005em; text-transform: uppercase; color: #FFC21A; background: linear-gradient(180deg, #FFE36B 0%, #FFC21A 46%, #F39600 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .045em 0 #5E3500); } .wa-ralli .wa-t2 { padding-left: .62em; } .wa-hl { position: absolute; top: 47%; left: 46%; width: clamp(12px, 1.6vw, 22px); aspect-ratio: 1; border-radius: 50%; background: #FFF7DA; box-shadow: 0 0 16px 5px rgba(255, 236, 170, .55); opacity: .18; } .wa-hl.wa-hr { left: 54%; } .wa-line { display: block; margin-top: 16px; font: italic 900 clamp(17px, 2vw, 26px)/1 "VK Barlow", sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #F5F4EE; } .vk-anim.wa-ralli:not(.on) .wa-t { opacity: .1; } .vk-anim.wa-ralli:not(.on) .wa-lamps i::after { opacity: 0; } .vk-anim.wa-ralli.on .wa-t, .vk-anim.wa-ralli.on .wa-lamps i::after { animation: waFlicker 1.3s linear both; } .vk-anim.wa-ralli.on .wa-t2 { animation-delay: .12s; } @keyframes waFlicker { 0% { opacity: .1; } 8% { opacity: 1; } 12% { opacity: .15; } 20% { opacity: .9; } 24% { opacity: .2; } 36% { opacity: 1; } 42% { opacity: .55; } 50%, 100% { opacity: 1; } } .wa-ralli.shake .wa-board { animation: waShake .62s cubic-bezier(.36, .07, .19, .97) both; } .wa-ralli.shake .wa-hl { animation: waLights .62s linear both; } @keyframes waShake { 0%, 100% { transform: none; } 10% { transform: translate(-3px, 1px) rotate(-.6deg); } 20% { transform: translate(4px, -1px) rotate(.5deg); } 30% { transform: translate(-4px, 2px) rotate(-.4deg); } 40% { transform: translate(3px, -2px) rotate(.6deg); } 50% { transform: translate(-2px, 1px); } 60% { transform: translate(2px, -1px) rotate(-.3deg); } 75% { transform: translate(-1px, 1px); } 88% { transform: translate(1px, 0); } } @keyframes waLights { 0%, 14%, 30%, 44%, 60%, 74% { opacity: 1; } 15%, 29%, 45%, 59%, 75%, 100% { opacity: .18; } } /* ---------- sinema: red velvet, gold serif capitals in a frame; the curtain opens over it ---------- */ .vk-w--sinema .vk-door { background: radial-gradient(70% 90% at 50% 40%, rgba(255, 120, 120, .14), transparent 70%), repeating-linear-gradient(90deg, #5C0C14 0, #7A1520 1.6%, #92202B 2.6%, #6E1018 4%), #6E1018; } .vk-w--sinema .vk-door::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(30, 0, 4, .45)); pointer-events: none; } .wa-sinema { --sway: 0; position: relative; display: block; padding: clamp(18px, 3vw, 36px) 0; text-align: center; overflow: hidden; border-radius: 8px; } .wa-frame { position: relative; z-index: 1; display: inline-grid; justify-items: center; gap: clamp(10px, 1.6vw, 18px); padding: clamp(18px, 3vw, 40px) clamp(22px, 4.6vw, 72px); border: 2px solid #E0C580; outline: 1px solid rgba(224, 197, 128, .55); outline-offset: 7px; color: #E9D29A; } .wa-top, .wa-foot { font: 700 clamp(11px, 1.3vw, 17px)/1 "VK Cinzel", Georgia, serif; letter-spacing: .3em; color: #E0C580; } .wa-sinema .wa-name { display: grid; font: 700 clamp(40px, 8.2vw, 124px)/.98 "VK Cinzel", Georgia, serif; letter-spacing: .015em; color: #EED79B; text-shadow: 0 2px 0 #4E0A12, 0 12px 30px rgba(0, 0, 0, .35); } .wa-cur { position: absolute; z-index: 2; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #4F0911 0, #7D1621 2.4%, #A5262F 3.6%, #7D1621 4.8%, #4F0911 7%); box-shadow: inset 0 -60px 70px rgba(0, 0, 0, .35); transition: transform 1.8s cubic-bezier(.2, 0, 0, 1); pointer-events: none; } .wa-cl { left: 0; transform: translateX(calc(-94% + var(--sway) * 3%)); } .wa-cr { right: 0; transform: translateX(calc(94% + var(--sway) * 3%)); } .vk-anim.wa-sinema:not(.on) .wa-cl { transform: translateX(0); } .vk-anim.wa-sinema:not(.on) .wa-cr { transform: translateX(0); } .vk-anim.wa-sinema:not(.on) .wa-cur { transition-duration: .9s; } .vk-anim.wa-sinema { cursor: pointer; } /* ---------- varan: white ground, Montserrat, the yellow tag (skewed like the poster's) that counts ---------- */ .vk-w--varan .vk-door { box-shadow: inset 0 -1px 0 var(--line); } html[data-tema="gece"] .vk-w--varan .vk-door, html[data-tema="los"] .vk-w--varan .vk-door { box-shadow: none; } .wa-varan { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(20px, 4vw, 56px); } .wa-varan .wa-name { font: 800 clamp(52px, 8.4vw, 124px)/.94 "VK Montserrat", "Montserrat", sans-serif; letter-spacing: -.025em; color: #121212; } .wa-tag { position: relative; display: grid; justify-items: start; gap: 2px; min-width: min(100%, 380px); padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 40px) clamp(16px, 2vw, 26px); background: #FFCA10; color: #121212; clip-path: polygon(0 11%, 100% 0, 100% 100%, 0 100%); cursor: pointer; -webkit-tap-highlight-color: transparent; } .wa-item { font: 700 clamp(15px, 1.5vw, 19px)/1.2 "VK Montserrat", sans-serif; } .wa-from { position: relative; margin-top: 6px; font: 400 clamp(22px, 2.6vw, 34px)/1 "VK Montserrat", sans-serif; text-decoration: none; } .wa-from::after, .af-from::after { content: ''; position: absolute; left: -.1em; right: -.25em; top: 52%; height: .085em; border-radius: .05em; background: #E5322D; transform: rotate(-10deg); transform-origin: left center; } .wa-to { font: 400 clamp(64px, 9vw, 132px)/.92 "VK Anton", Impact, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .wa-to sup, .wa-from sup { position: relative; top: .1em; margin-left: .06em; font: 800 .3em/1 "VK Montserrat", sans-serif; vertical-align: top; } .wa-from sup { font-weight: 500; font-size: .45em; } .vk-anim.wa-varan:not(.struck) .wa-from::after, .ready .af-p:not(.struck) .af-from::after { transform: rotate(-10deg) scaleX(0); } .vk-anim.wa-varan .wa-from::after, .ready .af-p .af-from::after { transition: transform .4s var(--emph) .05s; } /* ---------- film posters drawn live in the work's type (no campaign picture, nothing third-party before the press) ---------- */ .facade-art { container-type: size; background: var(--wk-bg, #0A0A0A); } .facade-art .wa-mini { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; pointer-events: none; transition: transform .8s var(--emph); } .facade-art:hover .wa-mini { transform: scale(1.025); } .wa-mini.wa-radyo { justify-items: center; gap: 6cqh; } .wa-mini.wa-radyo .wa-onair { font-size: 7cqh; padding: 2cqh 3.4cqh; gap: 2cqh; border-width: .5cqh; } .wa-mini.wa-radyo .wa-onair i { width: 2cqh; height: 2cqh; } .wa-wave { display: flex; align-items: center; gap: 1.1cqw; height: 22cqh; } .wa-wave i { width: 1.1cqw; height: calc(var(--h) * 1%); min-height: 2px; border-radius: 1cqw; background: #F2F2F2; opacity: .9; } .wa-wave i[style*="--h:0"] { height: 2px; background: #FF2A2A; opacity: 1; } .wa-gap { font: 400 9cqh/1 "VK Anton", Impact, sans-serif; letter-spacing: .04em; color: #FF0000; } .wa-mini.wa-ralli { inset: auto; left: 50%; top: 50%; translate: -50% -50%; display: block; width: max-content; } .wa-mini.wa-ralli .wa-t { font-size: 21cqh; } .wa-mini.wa-ralli .wa-lamps { height: 1.6cqh; } .wa-mini.wa-ralli .wa-lamps i { width: 5cqh; height: 1.2cqh; } .wa-mini.wa-ralli .wa-lamps i::after { height: 14cqh; } .wa-mini.wa-ralli .wa-board { padding: 3.6cqh 6cqh 3cqh; } .wa-mini.wa-ralli .wa-hl { width: 2.6cqh; opacity: .9; } .facade-art .play { z-index: 2; left: auto; top: auto; right: clamp(14px, 2.4cqw, 28px); bottom: clamp(14px, 2.4cqw, 28px); margin: 0; } /* ---------- the Varan posters, rebuilt live (outdoor format 1417 × 999; sizes in the poster's own width, cqw) ---------- */ .vk-afis { display: grid; gap: 16px; } .af-stage { position: relative; container-type: inline-size; width: 100%; max-width: 980px; aspect-ratio: 1417 / 999; border-radius: var(--r-md); overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 34px 60px -44px rgba(0, 68, 90, .45); } .af-p { position: absolute; inset: 0; margin: 0; background: #FFFFFF; color: #121212; } .af-p[hidden] { display: none; } .af-p.in { animation: afWipe .7s var(--emph) both; } @keyframes afWipe { from { clip-path: polygon(0 0, 0 0, -60% 100%, -60% 100%); } to { clip-path: polygon(0 0, 160% 0, 100% 100%, -60% 100%); } } .af-head { position: absolute; left: 5.8%; top: 5.4%; margin: 0; display: grid; font: 400 5.15cqw/1.22 "VK Montserrat", sans-serif; letter-spacing: -.004em; } .af-head b { font-weight: 800; font-size: 5.7cqw; line-height: 1.25; } .af-obj { position: absolute; max-width: none; } .af-tag { position: absolute; left: 32.66%; right: 0; top: 26.83%; bottom: 0; background: #FFCA10; clip-path: polygon(0 8.76%, 100% 0, 100% 100%, 0 100%); } .af-price { position: absolute; left: 42.7%; top: 36.6%; margin: 0; display: grid; justify-items: start; color: #121212; } .af-from { position: relative; font: 400 6.4cqw/1 "VK Montserrat", sans-serif; text-decoration: none; } .af-from sup { position: relative; top: .12em; margin-left: .04em; font-size: .42em; font-weight: 500; vertical-align: top; } .af-to { margin-top: .9cqw; font: 400 16.6cqw/.86 "VK Anton", Impact, sans-serif; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } .af-to sup { position: relative; top: .14em; margin-left: .03em; font: 800 4.3cqw/1 "VK Montserrat", sans-serif; vertical-align: top; } .af-slogan { position: absolute; left: 42.7%; top: 71.4%; margin: 0; font: 500 2.92cqw/1.36 "VK Montserrat", sans-serif; color: #121212; } .af-slogan b { font-weight: 800; } .af-logo { position: absolute; left: 69.2%; top: 85%; width: 23.8%; height: auto; } .af-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; max-width: 980px; } .af-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .af-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } .af-tabs li, .af-tags li { display: flex; } .af-tags .vk-tag { display: grid; align-content: start; width: 100%; padding: 16px; } .af-tags .vk-tag-who, .af-tags .vk-tag-what { display: block; } .af-tags .vk-tag-who { margin: 0; font-size: 12.5px; } .af-tags .vk-tag-what { margin: 2px 0 10px; font-size: 17px; } .af-tags .vk-tag-p { display: grid; justify-items: start; gap: 2px; } .af-tags .vk-tag-from { font-size: 15px; } .af-tags .vk-tag-to { font-size: clamp(22px, 2.1vw, 30px); } .af-tags .vk-tag-hole { right: 12px; top: 12px; width: 10px; height: 10px; } .af-tabs .vk-tag { display: grid; align-content: start; width: 100%; padding: 16px; border: 0; text-align: left; font: inherit; cursor: pointer; transition: transform .25s var(--emph), box-shadow .25s var(--emph); } .af-tabs .vk-tag:hover { transform: translateY(-2px); } .af-tabs .vk-tag[aria-selected="true"] { box-shadow: 0 0 0 3px var(--ink); } .af-tabs .vk-tag-who { display: block; margin: 0; font-size: 12.5px; } .af-tabs .vk-tag-what { display: block; margin: 2px 0 10px; font-size: 17px; } .af-tabs .vk-tag-p { display: grid; justify-items: start; gap: 2px; } .af-tabs .vk-tag-from { font-size: 15px; } .af-tabs .vk-tag-to { font-size: clamp(22px, 2.1vw, 30px); } .af-tabs .vk-tag-hole { right: 12px; top: 12px; width: 10px; height: 10px; } .af-tabs .vk-tag:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } @media (max-width: 960px) { .af-row { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .af-row { gap: 8px; } .af-tabs, .af-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .af-tabs .vk-tag, .af-tags .vk-tag { padding: 12px; } .af-tabs .vk-tag-what, .af-tags .vk-tag-what { font-size: 15px; } } /* ---------- the rest, folded: three small pictures and "Tümü" ---------- */ .vk-tumu { display: grid; gap: 10px; } .vk-tumu-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .vk-tumu-l { font: 600 15px/1.3 var(--font-text); color: var(--ink); } .vk-tumu-c { font: 500 12px/1.4 var(--font-mono); letter-spacing: .02em; color: var(--teal); } .vk-tumu-row { display: flex; flex-wrap: wrap; gap: 8px; } .vk-tm { flex: none; width: clamp(96px, 12vw, 140px); aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--line-2); cursor: zoom-in; } .vk-tm[hidden] { display: none; } .vk-tm img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--emph); } .vk-tm:hover img { transform: scale(1.05); } .vk-tumu-all { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; align-self: stretch; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-text); cursor: pointer; transition: border-color .25s var(--emph); } .vk-tumu-all b { font: 500 12px/1 var(--font-mono); color: var(--teal); } .vk-tumu-all .ti { width: 16px; height: 16px; color: var(--btn); } .vk-tumu-all:hover { border-color: var(--teal); } .vk-tm:focus-visible, .vk-tumu-all:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } /* credits: links to the official pages */ .vk-link { display: inline-flex; align-items: center; gap: 3px; border-bottom: 1px solid var(--line); color: var(--ink); transition: border-color .25s var(--emph), color .25s var(--emph); } .vk-link .ti { width: 13px; height: 13px; color: var(--btn); } .vk-link:hover { border-color: var(--teal); color: var(--teal); } @media (max-width: 560px) { .wa-radyo .wa-word { font-size: clamp(76px, 25vw, 120px); } .wa-ralli .wa-t { font-size: clamp(44px, 15.6vw, 80px); } .wa-sinema .wa-name { font-size: clamp(30px, 9.6vw, 48px); } .wa-varan .wa-name { font-size: clamp(44px, 13vw, 64px); } .wa-to { font-size: clamp(56px, 18vw, 84px); } .wa-tag { min-width: 0; width: 100%; } } @media (prefers-reduced-motion: reduce) { .wa-cur { transition: none; } .af-p.in { animation: none; } } /* ---------- the YouTube corner, filled from the channel's feed (build.mjs ytFeed) ---------- */ .yt-chan { display: inline-flex; align-items: center; gap: 14px; margin: 4px 0 22px; color: var(--ink); } .yt-av { flex: none; display: block; width: 72px; height: 72px; padding: 3px; border-radius: 50%; background: var(--tayf-tile); box-shadow: 0 16px 30px -20px rgba(0, 68, 90, .65); transition: transform .4s var(--emph); } .yt-av img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--ground); background: #FFFFFF; } .yt-chan-t { display: grid; gap: 3px; } .yt-chan-t b { font: 700 20px/1.1 var(--font-display); letter-spacing: -.01em; } .yt-chan-t span { font: 500 13px/1.2 var(--font-mono); color: var(--teal); } .yt-chan > .ti { width: 16px; height: 16px; color: var(--btn); opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s var(--emph), transform .3s var(--emph); } .yt-chan:hover .yt-av { transform: translateY(-3px) rotate(-4deg); } .yt-chan:hover > .ti, .yt-chan:focus-visible > .ti { opacity: 1; transform: none; } .yt-count { margin: 14px 0 0; font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .yt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; } .yt-acts .yt-ch { margin-top: 0; } .yt-sub .yt-tri { width: 18px; height: 16px; flex: none; } .yt-go { display: block; } .yt-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 30px -14px rgba(0, 68, 90, .55); transition: transform .35s var(--emph); } .yt-play .yt-tri { width: 26px; height: auto; margin-top: -2px; } .yt-pub .yt-art img { transition: transform .8s var(--emph); } .yt-pub:hover .yt-art img { transform: scale(1.04); } .yt-pub:hover .yt-play { transform: scale(1.08); } .yt-pub .yt-st i { background: #65B8DA; } .yt-pub.is-new .yt-st i { background: #D7E55F; box-shadow: 0 0 0 4px rgba(215, 229, 95, .35); animation: ytPulse 1.6s var(--emph) infinite alternate; } .yt-date { color: var(--ink-2); } .yt-pub .yt-t a { color: inherit; } .yt-pub .yt-t a:hover { text-decoration: underline 2px var(--teal); text-underline-offset: 4px; } .yt-pub .yt-ph { background: var(--line-2); } @media (prefers-reduced-motion: reduce) { .yt-pub.is-new .yt-st i { animation: none; } } .yt:not(.seen) .yt-pub.is-new .yt-st i { animation-play-state: paused; } /* ---------- QR codes beside the phone files (Kimlik, Ekranlar) ---------- */ .sc-qr { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 12px; margin: 6px 0 2px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); } .sc-qr-img { display: block; width: 108px; height: 108px; border-radius: 6px; background: #FFFFFF; } .sc-qr figcaption { display: grid; gap: 3px; min-width: 0; } .sc-qr b { font: 600 14px/1.2 var(--font-text); color: var(--ink); } .sc-qr-l { font: 500 12px/1.3 var(--font-mono); color: var(--teal); } .sc-qr-h, .sc-qr em { font-size: 12px; font-style: normal; line-height: 1.35; color: var(--ink-2); } .sc-dl.qr-on { border-color: var(--teal); } /* on a phone the file is a tap away: no code there */ @media (hover: none) and (max-width: 960px) { .sc-qr { display: none; } } @media (max-width: 700px) { .yt-pub:not(:first-child) .yt-play { width: 38px; height: 38px; margin: -19px 0 0 -19px; } .yt-pub:not(:first-child) .yt-play .yt-tri { width: 16px; } } /* round 12: the facade pill and play disc are always white, so their ink is fixed (Gece used to turn the text light on white) */ .facade-title { color: #00445A; } .facade .play { color: #1D6F8C; } /* wide screens: the radio and the billboard doors put their text beside the title, so a door costs less height */ @media (min-width: 1100px) { .vk-w--radyo .vk-door-in, .vk-w--ralli .vk-door-in { display: grid; grid-template-columns: auto minmax(280px, 1fr); column-gap: clamp(36px, 5vw, 88px); align-items: end; } .vk-w--radyo .vk-door-in > .label, .vk-w--ralli .vk-door-in > .label { grid-column: 1 / -1; } .vk-w--radyo .vk-door-side, .vk-w--ralli .vk-door-side { padding-bottom: 6px; } .vk-w--radyo .vk-door-side .vk-door-en, .vk-w--ralli .vk-door-side .vk-door-en { margin-top: 0; } } /* the films of the awarded works at a calmer size (the side-list film keeps its layout) */ .vk-w .vk-film:not(.vk-film--yan) { max-width: 1080px; } /* ========================================================================================================= round 13: the YouTube corner plays on the page (site.js). A resting mouse plays a silent preview in the picture; a click or a tap opens the player over the page. Nothing from YouTube loads before that. ========================================================================================================= */ .yt-pub .yt-art { cursor: pointer; isolation: isolate; } .yt-pub .yt-play { z-index: 2; transition: transform .35s var(--emph), opacity .3s var(--emph); } .yt-prev { position: absolute; left: 50%; top: 50%; z-index: 1; width: 960px; height: 540px; max-width: none; border: 0; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(var(--ps, .5)); background: #0B1716; transition: opacity .45s var(--emph); } .yt-art.yt-live .yt-prev { opacity: 1; } .yt-art.yt-clear .yt-play { opacity: 0; transform: scale(.82); } /* review fix (2026-10-13): stays over YouTube's start mark, then goes */ .yt-prev-k { position: absolute; left: 10px; top: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #00445A; font: 500 10px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--emph), transform .3s var(--emph); pointer-events: none; } .yt-prev-k .ti { width: 13px; height: 13px; } .yt-prev-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: var(--tayf); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; transition: opacity .3s var(--emph), transform .25s linear; pointer-events: none; } .yt-art.yt-live :is(.yt-prev-k, .yt-prev-bar) { opacity: 1; transform: none; } /* review fix (2026-10-13): the hover answers at once: the chip shows and a light runs along the bottom while the player loads */ .yt-art.yt-arm .yt-prev-k { opacity: 1; transform: none; } .yt-art.yt-arm:not(.yt-live) .yt-prev-bar { opacity: 1; transform: none; background: linear-gradient(90deg, transparent 0, transparent 30%, #84D3B9 50%, transparent 70%, transparent 100%); background-size: 240% 100%; animation: ytArm 1.1s linear infinite; } @keyframes ytArm { from { background-position: 120% 0; } to { background-position: -120% 0; } } .yt-art.yt-arm:not(.yt-live) .yt-play { transform: scale(1.06); } .yt-art.yt-live .yt-prev-bar { transform: scaleX(var(--p, 0)); } @media (max-width: 700px) { .yt-pub:not(:first-child) .yt-prev-k { display: none; } } /* the player over the page: the brand's light ground behind it (night in Gece), the film in a round frame */ .ytp { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: auto; overscroll-behavior: contain; } .ytp::backdrop { background: color-mix(in srgb, var(--ground, #F3F8F7) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ytp[open] { display: grid; place-items: center; padding: calc(var(--nav-h) + 8px) var(--margin) 32px; } html.ytp-on { overflow: hidden; } .ytp-in { width: min(1180px, 100%, calc((100dvh - 230px) * 16 / 9)); min-width: min(100%, 300px); } .ytp.is-short .ytp-in { width: min(420px, 100%, calc((100dvh - 230px) * 9 / 16)); } .ytp-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0B1716; box-shadow: 0 40px 80px -36px rgba(0, 68, 90, .5), 0 0 0 1px var(--line); transform-origin: 0 0; } .ytp.is-short .ytp-frame { aspect-ratio: 9 / 16; } .ytp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--emph); } .ytp-poster[hidden] { display: none; } .ytp-wait { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 30px -14px rgba(0, 68, 90, .55); transition: opacity .4s var(--emph); } .ytp-wait::after { content: ''; position: absolute; inset: 18px 17px 20px 19px; background: var(--tayf-tile); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .motion .ytp-wait::after { animation: ytpWait 1.2s var(--emph) infinite alternate; } @keyframes ytpWait { from { transform: translateY(1px) scale(.92); opacity: .7; } to { transform: translateY(-2px) scale(1.04); opacity: 1; } } .ytp-if { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .45s var(--emph); } .ytp-frame.playing .ytp-if { opacity: 1; } .ytp-frame.playing :is(.ytp-poster, .ytp-wait) { opacity: 0; } .ytp-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; padding: 20px 2px 0; } .ytp-meta { min-width: 0; flex: 1 1 22rem; } .ytp-k { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .ytp-k::before { content: ''; width: 7px; height: 8px; flex: none; background: var(--color-mint); clip-path: polygon(0 0, 100% 50%, 0 100%); } .ytp-t { margin: 8px 0 0; font: 700 clamp(20px, 1vw + 14px, 28px)/1.15 var(--font-display); letter-spacing: -.015em; text-wrap: balance; } .ytp-acts { display: flex; flex-wrap: wrap; gap: 10px; } .ytp-full, .ytp-open { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: 600 15px/1 var(--font-text); transition: border-color .25s var(--emph), color .25s var(--emph); } .ytp-full[hidden] { display: none; } .ytp-full .ti, .ytp-open .ti { width: 16px; height: 16px; color: var(--btn); } .ytp-full:hover, .ytp-open:hover { border-color: var(--teal); color: var(--btn); } .ytp-x { position: fixed; top: 14px; right: max(14px, calc((100vw - var(--inner)) / 2 - 8px)); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-2); transition: border-color .25s var(--emph), transform .3s var(--emph); } .ytp-x:hover { border-color: var(--teal); transform: rotate(60deg); } .ytp-x .ti { width: 20px; height: 20px; } .motion .ytp[open] .ytp-bar { animation: ytpBar .5s var(--emph) .12s both; } @keyframes ytpBar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (max-width: 700px) { .ytp[open] { padding: 72px 12px 24px; align-items: start; } .ytp-frame { border-radius: 12px; } .ytp-bar { padding-top: 14px; } .ytp-acts { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ytp-x:hover { transform: none; } } /* ========================================================================================================= round 13: site search (assets/ara.js, content/ara.mjs). The header's search button, "/" and Ctrl+K open a box over the page; the search page (/ara/, /en/search/) runs the same search inline and lists the whole site without JS. ========================================================================================================= */ .ara-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-text); transition: border-color .25s var(--emph), color .25s var(--emph); } .ara-btn:hover { border-color: var(--teal); color: var(--teal); } .ara-btn .ti { width: 18px; height: 18px; } .ara-kbd, .ara-pan kbd, .ara-x kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--k-white, #fff); color: var(--ink-2); font: 500 11px/1 var(--font-mono); } .no-js .ara-kbd { display: none; } /* without JS the button is a plain link to the search page */ @media (max-width: 1279px) { .ara-btn-t { display: none; } } @media (max-width: 1100px) { .ara-kbd { display: none; } .ara-btn { width: 40px; height: 40px; padding: 0; justify-content: center; } } @media (max-width: 960px) { .ara-btn { width: 44px; height: 44px; } } @media (max-width: 767px) { .top-in { gap: 8px; } .ara-btn, .menu-btn { width: 40px; height: 40px; } } /* the smallest phones: the language switch lives in the menu panel (its foot) */ @media (max-width: 373px) { .top .lang { display: none; } } /* (the box over the page is gone: the search grows inside the header island, see "header island" at the end of this file) */ .ara-field { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; min-height: 64px; border-bottom: 1px solid var(--line); } .ara-field > .ti { width: 22px; height: 22px; color: var(--btn); flex: none; } .ara-q { flex: 1 1 auto; min-width: 0; height: 62px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 clamp(18px, .6vw + 14px, 21px)/1.2 var(--font-text); } .ara-q::placeholder { color: var(--ink-2); opacity: .75; } .ara-q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .ara-x { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); cursor: pointer; } .ara-x .ti { display: none; width: 20px; height: 20px; } .ara-x:hover kbd { border-color: var(--teal); color: var(--teal); } .ara-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 10px 12px; } .ara-cap { margin: 6px 10px 8px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .ara-l { list-style: none; margin: 0; padding: 0; } .ara-o a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 24px; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 14px; color: var(--ink); } .ara-o[aria-selected="true"] a { background: var(--line-2); } .ara-o[aria-selected="true"] a::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--tayf); } .ara-pic { display: grid; place-items: center; width: 64px; height: 40px; border-radius: 9px; background: var(--k-white, #fff); border: 1px solid var(--line); color: var(--btn); overflow: hidden; } .ara-pic.has-img { border: 0; background: var(--line-2); } .ara-pic img { width: 100%; height: 100%; object-fit: cover; } .ara-pic b { font: 700 18px/1 var(--font-display); letter-spacing: -.02em; background: var(--tayf); -webkit-background-clip: text; background-clip: text; color: transparent; } .ara-pic .ti { width: 18px; height: 18px; } .ara-txt { display: grid; gap: 2px; min-width: 0; } .ara-k { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .ara-t { font: 700 16px/1.25 var(--font-display); letter-spacing: -.01em; } .ara-s { font-size: 13px; line-height: 1.35; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ara-d { font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; } .ara-go { display: grid; place-items: center; color: var(--btn); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--emph), transform .2s var(--emph); } .ara-go .ti { width: 16px; height: 16px; } .ara-o[aria-selected="true"] .ara-go { opacity: 1; transform: none; } .ara-l mark, .ara-g mark { background: linear-gradient(transparent 56%, rgba(137, 216, 180, .55) 56%); color: inherit; border-radius: 2px; } html[data-tema="gece"]:not([data-stage="light"]) .ara-l mark { background: linear-gradient(transparent 56%, rgba(132, 211, 185, .35) 56%); } .ara-empty { padding: 18px 12px 8px; color: var(--ink-2); } .ara-empty p { margin: 0 0 12px; font-size: 15px; } .ara-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ara-try span { margin-right: 4px; font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); } .ara-try button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-text); cursor: pointer; } .ara-try button:hover { border-color: var(--teal); color: var(--btn); } .ara-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 18px; border-top: 1px solid var(--line); font: 500 12px/1 var(--font-text); color: var(--ink-2); } .ara-keys { display: flex; flex-wrap: wrap; gap: 14px; } .ara-keys > span { display: inline-flex; align-items: center; gap: 4px; } .ara-more { display: inline-flex; align-items: center; gap: 6px; color: var(--btn); font-weight: 600; } .ara-more .ti { width: 14px; height: 14px; } @media (max-width: 700px) { .ara-field { padding-left: 16px; min-height: 58px; } .ara-q { height: 56px; } .ara-x kbd { display: none; } .ara-x .ti { display: block; } .ara-keys { display: none; } .ara-o a { grid-template-columns: 52px minmax(0, 1fr) 16px; gap: 12px; padding: 9px 8px; } .ara-pic { width: 52px; height: 34px; } .ara-d { display: none; } } @media (hover: none) { .ara-keys { display: none; } } /* the search page */ .ara-page { position: relative; padding: clamp(40px, 9vh, 112px) 0 var(--sec); overflow: clip; } .ara-page > .wrap { position: relative; z-index: 1; } .ara-h { margin: 16px 0 0; font: 700 clamp(44px, 6vw, 96px)/.98 var(--font-display); letter-spacing: -.04em; } .ara-lede { margin: 18px 0 0; max-width: 44ch; } .ara-form { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(24px, 4vh, 40px) 0 0; max-width: 820px; } .ara-form .ara-field { flex: 1 1 320px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); min-height: 60px; padding: 0 22px; box-shadow: var(--shadow-2); } .ara-form .ara-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(43, 143, 179, .18), var(--shadow-2); } .ara-form .ara-q { height: 58px; } .ara-form .btn { min-height: 60px; padding: 0 28px; } .ara-live { max-width: 820px; margin-top: 18px; } .ara-l-page .ara-o a { padding: 12px 14px 12px 12px; } .ara-all { margin-top: clamp(40px, 7vh, 72px); } .ara-all[hidden] { display: none; } .ara-all-h { margin: 0 0 18px; font: 700 clamp(24px, 1.4vw + 16px, 34px)/1.1 var(--font-display); letter-spacing: -.02em; } .ara-g { margin: 0 0 28px; } .ara-g h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font: 700 19px/1.2 var(--font-display); } .ara-g h3 span { font: 500 12px/1 var(--font-mono); color: var(--teal); } .ara-g ul { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 24px; } .ara-g li { break-inside: avoid; } .ara-g a { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); } .ara-g a b { font: 600 15px/1.3 var(--font-text); } .ara-g a span { font-size: 13px; line-height: 1.35; color: var(--ink-2); } .ara-g a:hover b { color: var(--btn); } /* ========================================================================================================= Round 13 (tur 13, 2026-10-12): the awarded works as bounded blocks, sound first, the official award marks (content/vakalar.mjs, build.mjs vaka(), assets/vaka.js). - Each awarded work: a slim bar that stays at the top while the work is on screen, the door with the award plate (the official trophy photo and logo), the compact credits, the modules on the work's tinted ground, and an end that names the next work. The films sit on bands in the work's own colours and elements, not on plain white. - "Sesli izle" over every film's own poster; the radio spots of Unutanlar with their waveform and words. - The end of every work page is a separate, smaller "Diğer işler" navigation. ========================================================================================================= */ /* the level colours (the metal of each trophy) */ .lvl-kristal { --lv: #6FB2CB; --lv-2: #B9E1EE; } .lvl-gumus { --lv: #8D9AA0; --lv-2: #C9D1D4; } .lvl-bronz { --lv: #B07A45; --lv-2: #E2B98A; } /* the works' grounds: a little of the work's colour in the page's own ground, so every block is bounded in all three themes */ .vk-w--radyo { --wk-tint: #E00000; --wk-mix: 5%; } .vk-w--ralli { --wk-tint: #FFC21A; --wk-mix: 9%; } .vk-w--sinema { --wk-tint: #8A1A24; --wk-mix: 7%; } .vk-w--varan { --wk-tint: #FFCA10; --wk-mix: 13%; } html[data-tema="gece"] .vk-w { --wk-mix: 9%; } html[data-tema="gece"] .vk-w--varan { --wk-mix: 10%; } /* the official mark: the kit's black logo, always on white */ .ke-official { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; } .ke-chip { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 68, 90, .1); } .ke-logo { display: block; width: auto; height: 26px; } @media (max-width: 560px) { .ke-logo { height: 22px; } } .ke-ed { font: 500 12px/1.35 var(--font-mono); letter-spacing: .04em; color: var(--teal); } /* ---------- the award board under the title: which work won which level, at a glance ---------- */ .vk-awb { margin-top: clamp(26px, 3.4vh, 40px); } .vk-awb .ke-official { margin: 0 0 14px; } .vk-awb-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; } .vk-awb-l a { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0 4px; border-top: 3px solid var(--lv); color: var(--ink); } .vk-awb-img, .vk-aw-img, .vk-cend-img { display: block; aspect-ratio: 1 / 2; border-radius: 8px; overflow: hidden; background: #ECECEC; } .vk-awb-img img, .vk-aw-img img, .vk-cend-img img { width: 100%; height: 100%; object-fit: cover; } .vk-awb-t { display: grid; gap: 3px; min-width: 0; } .vk-awb-lv { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .vk-awb-lv .tri, .vk-aw .tri, .vk-cbar-lv .tri, .vk-cend-lv .tri { width: 12px; height: 10.4px; background: linear-gradient(160deg, var(--lv-2), var(--lv)); } .vk-awb-l b { font: 700 clamp(19px, 1.5vw, 23px)/1.15 var(--font-display); letter-spacing: -.01em; } .vk-awb-c { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); } .vk-awb-l a:hover b { color: var(--btn); } .vk-awb-l a:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 4px; border-radius: 4px; } @media (max-width: 1100px) { .vk-awb-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .vk-awb-l { grid-template-columns: minmax(0, 1fr); gap: 8px; } .vk-awb-l a { grid-template-columns: 40px minmax(0, 1fr); padding-top: 10px; } } /* the cover's cuts are silent: say so, so nobody waits for sound there */ .vk-stage-note { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #00445A; font: 500 12px/1 var(--font-mono); letter-spacing: .04em; pointer-events: none; } .vk-stage-note .ti { width: 14px; height: 14px; } /* ---------- an awarded work: one block ---------- */ .vk-ch.vk-w { padding-top: calc(var(--sec) * .8); } .vk-ch.vk-w + .vk-ch.vk-w { padding-top: 0; } /* the bar: sticky at the top while the work is on screen; it takes no room of its own */ .vk-cbar { position: sticky; top: var(--nav-h); z-index: 25; height: 0; } .vk-cbar-in { position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; display: flex; align-items: center; gap: 10px 14px; min-height: 42px; padding: 0 16px; border-radius: 0 0 12px 12px; background: var(--wk-bg); color: var(--wk-ink); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .55); font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--emph), transform .3s var(--emph); pointer-events: none; } .vk-cbar.on .vk-cbar-in, .no-js .vk-cbar-in { opacity: 1; transform: none; } .vk-cbar-in b { font: 700 15px/1.2 var(--font-display); letter-spacing: -.005em; } .vk-cbar-n { color: var(--wk-lab); } .vk-cbar-lv { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; text-transform: uppercase; } .vk-w--varan .vk-cbar-in { box-shadow: inset 0 -3px 0 #FFCA10, 0 10px 24px -18px rgba(0, 0, 0, .4); } @media (max-width: 560px) { .vk-cbar-in { padding: 0 12px; gap: 8px; font-size: 11px; } .vk-cbar-in b { font-size: 14px; } .vk-cbar-lv { display: none; } } @media (prefers-reduced-motion: reduce) { .vk-cbar-in { transition: none; } } /* the door's top row: the work's number on the left, the award plate on the right */ .vk-door-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 28px; } .vk-door-n { padding-top: 6px; } .vk-aw { display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 16px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: #00445A; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6); } .vk-aw-img { width: clamp(46px, 4.4vw, 60px); flex: none; } .vk-aw-t { display: grid; justify-items: start; gap: 5px; } .vk-aw-t .ke-chip { padding: 0; box-shadow: none; background: none; } .vk-aw-t .ke-logo { height: 19px; } .vk-aw-t b { display: inline-flex; align-items: center; gap: 8px; font: 700 clamp(20px, 1.9vw, 27px)/1.05 var(--font-display); letter-spacing: -.015em; color: #00445A; } .vk-aw-t b .tri { width: 16px; height: 13.9px; } .vk-aw-t > span:last-child { font: 500 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #4C7283; } .vk-w--varan .vk-aw { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 40px -30px rgba(0, 0, 0, .5); } @media (max-width: 560px) { .vk-door-top { gap: 14px; } .vk-aw { padding: 6px 12px 6px 6px; gap: 10px; } .vk-aw-t b { font-size: 19px; } } /* the wide radio and billboard doors put the text beside the title: the top row spans both columns */ @media (min-width: 1100px) { .vk-w--radyo .vk-door-in > .vk-door-top, .vk-w--ralli .vk-door-in > .vk-door-top { grid-column: 1 / -1; } } /* the work's body: its tinted ground from the door to its end */ .vk-wb { background: color-mix(in srgb, var(--wk-tint, transparent) var(--wk-mix, 0%), var(--ground)); padding-top: clamp(28px, 4vw, 48px); } .vk-w .vk-wb .vk-mods { margin-top: clamp(28px, 4vw, 48px); } /* the compact credits: one line in sight, the official links in sight, the rest on a press */ .vk-kn { display: grid; gap: 12px; } .vk-kn-d { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .vk-kn-d > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 13px 0; cursor: pointer; list-style: none; } .vk-kn-d > summary::-webkit-details-marker { display: none; } .vk-kn-k { font: 600 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); } .vk-kn-1 { font: 500 15px/1.45 var(--font-text); color: var(--ink); } .vk-kn-more { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--font-text); color: var(--btn); white-space: nowrap; } .vk-kn-more .ti { width: 16px; height: 16px; transition: transform .3s var(--emph); } .vk-kn-d[open] .vk-kn-more .ti { transform: rotate(180deg); } .vk-kn-d > summary:hover .vk-kn-more span { text-decoration: underline; text-underline-offset: 3px; } .vk-kn-d > summary:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; border-radius: 6px; } .vk-kn-dl { margin: 0 0 14px; display: grid; } .vk-kn-dl div { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 4px 20px; padding: 9px 0; border-top: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent); } .vk-kn-dl dt { font: 500 11.5px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .vk-kn-dl dd { margin: 0; font-size: 15px; line-height: 1.5; } .vk-kn-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .vk-kn-a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--surface); color: var(--ink); font: 600 14px/1 var(--font-text); transition: border-color .25s var(--emph), color .25s var(--emph); } .vk-kn-a .ti { width: 14px; height: 14px; color: var(--btn); } .vk-kn-a:hover { border-color: var(--btn); color: var(--btn); } .vk-kn-a:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } @media (max-width: 700px) { .vk-kn-d > summary { grid-template-columns: minmax(0, 1fr) auto; } .vk-kn-k { grid-column: 1 / -1; } .vk-kn-1 { font-size: 14px; } .vk-kn-dl div { grid-template-columns: 1fr; } } /* the end of a work: it says the work ends, and the next work waits with its own level */ .vk-cend { margin-top: clamp(48px, 7vw, 88px); padding: clamp(22px, 3vw, 32px) 0; background: color-mix(in srgb, var(--wk-tint, transparent) calc(var(--wk-mix, 0%) * 2.2), var(--ground)); border-top: 3px solid var(--wk-acc, var(--line)); } .vk-w--varan .vk-cend { border-top-color: #121212; } .vk-cend-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; } .vk-cend-end { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 13px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--ink-2); } .vk-cend-end b { font: 700 15px/1.2 var(--font-display); letter-spacing: 0; color: var(--ink); } .vk-cend-end .tri { width: 10px; height: 8.7px; transform: rotate(180deg); background: var(--ink-2); } .vk-cend-next { display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-width: min(100%, 420px); padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px rgba(0, 68, 90, .45); transition: transform .3s var(--emph), box-shadow .3s var(--emph); } .vk-cend-next:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--btn), 0 22px 44px -28px rgba(0, 68, 90, .5); } .vk-cend-next:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .vk-cend-img { width: 34px; } .vk-cend-last { grid-template-columns: minmax(0, 1fr) auto; padding-left: 20px; } .vk-cend-t { display: grid; gap: 3px; min-width: 0; } .vk-cend-k { font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .vk-cend-t b { font: 700 clamp(21px, 2vw, 28px)/1.1 var(--font-display); letter-spacing: -.015em; } .vk-cend-lv { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); } .vk-cend-ar { width: 22px; height: 22px; color: var(--btn); transition: transform .3s var(--emph); } .vk-cend-next:hover .vk-cend-ar { transform: translateY(3px); } @media (max-width: 560px) { .vk-cend-next { width: 100%; } } /* ---------- bands: the films and the spots sit on the work's own colours and elements, full width ---------- */ .vk-band { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-block: clamp(28px, 4.4vw, 56px); position: relative; isolation: isolate; --ink: var(--bd-ink, #F2F2F2); --ink-2: var(--bd-ink2, #C9C9C9); --teal: var(--bd-lab, #FFFFFF); --line: var(--bd-line, rgba(255, 255, 255, .22)); --line-2: rgba(255, 255, 255, .08); --surface: var(--bd-surf, rgba(255, 255, 255, .08)); --btn: var(--bd-btn, #FFFFFF); background: var(--bd-bg, #0A0A0A); color: var(--ink); } .vk-band .vk-note, .vk-band .vk-f-cap { color: var(--ink-2); } /* radio: the studio at night, the acoustic foam of the case film's poster, the board's red */ .vk-w--radyo .vk-band { --bd-bg: radial-gradient(60% 90% at 85% 0%, rgba(255, 0, 0, .15), transparent 70%), repeating-conic-gradient(from 45deg at 50% 50%, rgba(255, 255, 255, .018) 0 25%, rgba(0, 0, 0, .1) 0 50%) 0 0 / 46px 46px, #0B0B0B; --bd-lab: #FF8A80; --bd-btn: #FFFFFF; } /* billboard: the asphalt at night and the rally's start flags at the edges, the rally yellow */ .vk-w--ralli .vk-band { --bd-bg: repeating-conic-gradient(#1C1C1C 0 25%, #0C0C0C 0 50%) 0 0 / 22px 22px; --bd-lab: #FFC21A; } .vk-w--ralli .vk-band::before { content: ''; position: absolute; z-index: -1; inset: 22px 0; background: radial-gradient(70% 70% at 30% 0%, rgba(255, 194, 26, .14), transparent 70%), #0B0B0B; } /* cinema: the velvet curtain, a gold hairline */ .vk-w--sinema .vk-band { --bd-bg: radial-gradient(60% 80% at 50% 0%, rgba(255, 140, 120, .16), transparent 70%), repeating-linear-gradient(90deg, #4E0910 0, #651019 1.4%, #7A1621 2.4%, #5A0C14 3.8%), #5A0C14; --bd-ink: #F8EBCB; --bd-ink2: #EAD6AB; --bd-lab: #E0C580; --bd-line: rgba(224, 197, 128, .35); --bd-btn: #F8EBCB; box-shadow: inset 0 2px 0 rgba(224, 197, 128, .55), inset 0 -2px 0 rgba(224, 197, 128, .55); } /* the price-tag campaign: white, the yellow tag behind the film */ .vk-w--varan .vk-band { --bd-bg: linear-gradient(176deg, transparent 0 22%, #FFCA10 22.2% 100%) right top / 62% 100% no-repeat, #FFFFFF; --bd-ink: #121212; --bd-ink2: #3B3B3B; --bd-lab: #121212; --bd-line: rgba(0, 0, 0, .14); --bd-surf: #FFFFFF; --bd-btn: #121212; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .08), inset 0 -1px 0 rgba(0, 0, 0, .08); } .vk-w--varan .vk-band .vk-tl .tl-i { background: rgba(255, 255, 255, .9); } /* in a band the film tabs are on dark */ .vk-band .vk-tabs button { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--ink); } .vk-w--varan .vk-band .vk-tabs button { background: #FFFFFF; } /* the films keep their size, the band is what grows */ .vk-w .vk-film.vk-band { max-width: none; } .vk-film-in { display: grid; gap: 16px; max-width: 1080px; } .vk-film--yan .vk-film-in { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; column-gap: 24px; } .vk-film--yan.vk-band { display: block; } .vk-film--yan .vk-film-in > .vk-screen { grid-column: 1; } .vk-film--yan .vk-film-in > .vk-tl { grid-column: 2; grid-row: 1; } @media (max-width: 860px) { .vk-film--yan .vk-film-in { grid-template-columns: 1fr; } .vk-film--yan .vk-film-in > .vk-tl { grid-column: 1; grid-row: auto; } } .vk-film--big .vk-film-in { max-width: none; } .vk-band .vk-step-img { background: rgba(255, 255, 255, .08); } .vk-band .vk-step.on .vk-step-img { box-shadow: 0 0 0 2px var(--wk-acc, #fff); } .vk-w--sinema .vk-band .vk-step-p, .vk-w--sinema .vk-band .vk-n::before { background: #E0C580; } /* ---------- "Sesli izle": the plain control over every film's own poster ---------- */ .vk-go { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .96); color: #00445A; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); font: inherit; cursor: pointer; white-space: nowrap; transition: transform .3s var(--emph), background-color .3s var(--emph); } .vk-go-i { display: grid; place-items: center; width: clamp(46px, 4.4vw, 58px); aspect-ratio: 1; border-radius: 50%; background: #1D6F8C; color: #FFFFFF; } .vk-go-i .ti { width: 44%; height: 44%; } .vk-go-t { display: grid; justify-items: start; gap: 2px; text-align: left; } .vk-go-t b { font: 700 clamp(15px, 1.25vw, 18px)/1.1 var(--font-display); letter-spacing: -.005em; } .vk-go-t span { font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: #4C7283; } .vk-go-s { display: grid; place-items: center; width: 22px; color: #1D6F8C; } .vk-go-s .ti { width: 20px; height: 20px; } .facade:hover .vk-go, .vk-pl-go:hover { transform: scale(1.04); } .vk-facade .facade-title { z-index: 2; } .vk-facade::after, .vk-pl::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .28)); pointer-events: none; transition: opacity .3s var(--emph); border-radius: inherit; } .vk-facade img { position: absolute; inset: 0; } .vk-pl { position: relative; border-radius: var(--r-md); overflow: hidden; } .vk-pl video { display: block; } .vk-pl.on::after, .vk-pl.on .vk-pl-go { opacity: 0; pointer-events: none; } .vk-pl-go:focus-visible, .vk-facade:focus-visible .vk-go { outline: 3px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .no-js .vk-pl-go, .no-js .vk-pl::after { display: none; } @media (max-width: 560px) { .vk-go { gap: 9px; padding: 6px 14px 6px 6px; } .vk-go-i { width: 42px; } .vk-go-s { display: none; } .vk-facade .facade-title { display: none; } } /* the Shaking Billboard's film: first and large */ .vk-film--big .vk-go-i { width: clamp(52px, 5vw, 68px); } .vk-film--big .vk-go-t b { font-size: clamp(16px, 1.4vw, 20px); } /* ---------- the radio spots (Unutanlar): ON AIR, the recordings, the waveform, the words ---------- */ .vk-rd-in { display: grid; gap: 18px; max-width: 1080px; } .vk-rd-k { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 12.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #F2F2F2; } .vk-rd-air { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 6px; border: 2px solid #FF2A2A; border-radius: 7px; font: 400 16px/1 "VK Anton", Impact, sans-serif; letter-spacing: .08em; color: #FF2A2A; box-shadow: 0 0 22px rgba(255, 0, 0, .3), inset 0 0 10px rgba(255, 0, 0, .18); } .vk-rd-air i { width: 9px; height: 9px; border-radius: 50%; background: #FF2A2A; box-shadow: 0 0 9px #FF2A2A; } .vk-radio:has(.playing) .vk-rd-air i { animation: rdLamp 1.4s ease-in-out infinite; } @keyframes rdLamp { 50% { opacity: .35; } } .vk-rd-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .vk-rd-tabs button { display: inline-flex; align-items: baseline; gap: 10px; padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); color: #F2F2F2; font: 600 14px/1.2 var(--font-text); cursor: pointer; transition: background-color .25s var(--emph), border-color .25s var(--emph); } .vk-rd-tabs button b { font: 500 12px/1 var(--font-mono); color: #B9B9B9; } .vk-rd-tabs button[aria-selected="true"] { background: #E00000; border-color: #E00000; } .vk-rd-tabs button[aria-selected="true"] b { color: #FFD9D6; } .vk-rd-tabs button:focus-visible { outline: 2px solid #FF8A80; outline-offset: 2px; } .vk-rd-p[hidden] { display: none; } .vk-rd-p { display: grid; gap: 22px; } .vk-rd-a { width: 100%; } .js .vk-rd-a { display: none; } .vk-rd-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 22px; } .vk-rd-pp { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border: 0; border-radius: 999px; background: #E00000; color: #FFFFFF; font: inherit; cursor: pointer; box-shadow: 0 16px 34px -18px rgba(255, 0, 0, .7); transition: transform .25s var(--emph), background-color .25s var(--emph); } .vk-rd-pp:hover { transform: scale(1.04); background: #F01414; } .vk-rd-pp:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; } .vk-rd-ic { position: relative; display: grid; place-items: center; width: 52px; aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; color: #E00000; } .vk-rd-ic .ti { position: absolute; width: 22px; height: 22px; transition: opacity .2s; } .vk-rd-ic .ti:first-child { margin-left: 3px; } .vk-rd-ic .ti + .ti, .playing .vk-rd-ic .ti:first-child { opacity: 0; } .playing .vk-rd-ic .ti + .ti { opacity: 1; } .vk-rd-pt { display: grid; justify-items: start; gap: 2px; } .vk-rd-pt b { font: 700 17px/1.1 var(--font-display); } .vk-rd-pt span { font: 500 12px/1 var(--font-mono); color: #FFD9D6; } .vk-rd-wave { --p: 0; position: relative; height: 92px; cursor: pointer; touch-action: none; border-radius: 6px; } .vk-rd-wave:focus-visible { outline: 2px solid #FF8A80; outline-offset: 6px; } .vk-rd-bars { position: absolute; inset: 18px 0 0; display: flex; align-items: center; gap: 2px; } .vk-rd-bars i { flex: 1; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .34); transition: background-color .15s; } .vk-rd-bars i.on { background: #FFFFFF; } .vk-rd-mk { position: absolute; top: 18px; bottom: 0; background: rgba(255, 0, 0, .14); border-top: 2px solid #FF2A2A; pointer-events: none; } .vk-rd-mk + .vk-rd-mk { background: rgba(255, 255, 255, .08); border-top-color: #FFFFFF; } .vk-rd-mk span { position: absolute; left: 0; top: -19px; font: 500 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: #FF8A80; white-space: nowrap; } .vk-rd-mk + .vk-rd-mk span { color: #FFFFFF; } .vk-rd-mk.on { background: rgba(255, 0, 0, .26); } .vk-rd-head { position: absolute; top: 12px; bottom: -4px; left: calc(var(--p) * 100%); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 10px rgba(255, 255, 255, .6); pointer-events: none; } .vk-rd-time { margin: 0; font: 500 13px/1 var(--font-mono); color: #B9B9B9; white-space: nowrap; font-variant-numeric: tabular-nums; } .vk-rd-cur { color: #FFFFFF; } .vk-rd-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 78ch; } .vk-rd-l { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: rgba(242, 242, 242, .62); font: inherit; text-align: left; cursor: pointer; transition: color .25s var(--emph), background-color .25s var(--emph); } .vk-rd-l .n { font: 500 12px/1.6 var(--font-mono); color: rgba(242, 242, 242, .45); } .vk-rd-w { display: grid; gap: 2px; font-size: 16px; line-height: 1.5; } .vk-rd-en { font-size: 14px; color: rgba(242, 242, 242, .55); } .vk-rd-li.f .vk-rd-w > span:first-child { font-style: italic; } .vk-rd-li.f .n { color: #FF8A80; } .vk-rd-li.b .vk-rd-w > span:first-child { font-weight: 600; } .vk-rd-l:hover { color: #FFFFFF; background: rgba(255, 255, 255, .05); } .vk-rd-l:focus-visible { outline: 2px solid #FF8A80; outline-offset: 1px; } .vk-rd-li.on .vk-rd-l { color: #FFFFFF; background: rgba(255, 255, 255, .08); } .vk-rd-li.on.f .vk-rd-l { background: rgba(255, 0, 0, .18); } .no-js .vk-rd-l { cursor: default; } @media (max-width: 700px) { .vk-rd-ctl { grid-template-columns: auto minmax(0, 1fr); } .vk-rd-wave { grid-column: 1 / -1; grid-row: 2; height: 80px; } .vk-rd-time { justify-self: end; } .vk-rd-l { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 6px 4px; } .vk-rd-w { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .vk-radio:has(.playing) .vk-rd-air i { animation: none; } } /* ---------- the billboard's quiet intro: the title in the rally yellow, lighting once (no lamps: they read as smudges) ---------- */ .wa-ralli.wa-sade { display: inline-grid; gap: 10px; } .wa-ralli.wa-sade .wa-t { font-size: clamp(40px, 6.4vw, 96px); line-height: .9; } .vk-anim.wa-sade:not(.on) .wa-t { opacity: .15; } .vk-anim.wa-sade.on .wa-t { animation: waFlicker 1.1s linear both; } .vk-w--sade .vk-door { padding-block: clamp(36px, 5vw, 64px) clamp(30px, 4vw, 52px); } @media (min-width: 1100px) { .vk-w--ralli.vk-w--sade .vk-door-in { align-items: center; } } @media (max-width: 560px) { .wa-ralli.wa-sade .wa-t { font-size: clamp(34px, 11vw, 52px); } } /* ---------- the Higgsfield shots, large: a night-cinema band, each film at its own shape ---------- */ .vk-make.vk-make--buyuk { display: block; } .vk-w--sinema .vk-make--buyuk { --bd-bg: radial-gradient(8px 8px at 12% 18%, rgba(255, 214, 140, .5), transparent), radial-gradient(14px 14px at 88% 12%, rgba(255, 190, 120, .35), transparent), radial-gradient(10px 10px at 74% 86%, rgba(255, 214, 160, .3), transparent), radial-gradient(70% 60% at 50% 0%, rgba(224, 197, 128, .14), transparent 70%), #17090B; box-shadow: none; } .vk-make-in { display: grid; gap: 20px; } .vk-make-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; } .vk-make-k { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 700 clamp(22px, 2.2vw, 32px)/1.1 var(--font-display); letter-spacing: -.015em; color: var(--ink); } .vk-make-k span { font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .vk-make--buyuk .vk-make-t { max-width: 52ch; margin: 0; font-size: 16px; color: var(--ink-2); } .vk-make-grid { display: flex; gap: clamp(10px, 1.4vw, 18px); align-items: stretch; } .vk-make-grid .vk-mk { margin: 0; border-radius: var(--r-md); overflow: hidden; background: #0B0B0B; aspect-ratio: var(--ar); } .vk-make-grid .vk-mk.p { flex: var(--pw, .84) 1 0; aspect-ratio: auto; } .vk-make-grid .vk-mk video { display: block; width: 100%; height: 100%; object-fit: cover; } .vk-make-st { flex: 1 1 0; display: grid; gap: clamp(10px, 1.4vw, 18px); } /* review fix (2026-10-13): the Higgsfield shots break out of the text column to almost the full screen width, so they are the largest pictures of the work (the case films keep their 1080 px) */ @media (min-width: 761px) { .vk-make--buyuk .vk-make-grid { width: min(calc(100vw - 2 * clamp(16px, 1.8vw, 32px)), 1720px); margin-inline: calc(50% - min(calc(50vw - clamp(16px, 1.8vw, 32px)), 860px)); } } @media (max-width: 760px) { .vk-make-grid { flex-direction: column; } .vk-make-grid .vk-mk.p { flex: none; aspect-ratio: var(--ar); width: min(100%, 420px); } } /* ---------- "Diğer işler": a separate, smaller navigation at the end of a work page ---------- */ .others { margin-top: var(--sec); padding: clamp(36px, 5vw, 56px) 0 clamp(44px, 6vw, 72px); border-top: 1px solid var(--line); background: var(--surface); } .ot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; } .ot-h { margin: 0; font: 700 clamp(22px, 1.6vw + 12px, 30px)/1.1 var(--font-display); letter-spacing: -.02em; } .ot-all { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-text); color: var(--btn); } .ot-all .ti { width: 16px; height: 16px; transition: transform .3s var(--emph); } .ot-all:hover .ti { transform: translateX(4px); } .ot-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1040px; } .ot-i { display: grid; gap: 10px; color: var(--ink); } .ot-img { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--pt, var(--line-2)); } .ot-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--emph); } .ot-i:hover .ot-img img { transform: scale(1.04); } .ot-t { display: grid; gap: 3px; } .ot-t b { font: 700 17px/1.2 var(--font-display); letter-spacing: -.005em; } .ot-t span { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .03em; color: var(--teal); } .ot-i:hover b { color: var(--btn); } .ot-i:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 4px; border-radius: 12px; } @media (max-width: 900px) { .ot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } .ot-t b { font-size: 15.5px; } } /* ---------- the home page's award cards: the official trophy and logo ---------- */ .awards .ke-official { margin-top: 22px; } .award a { position: relative; } .award-img { position: absolute; right: 16px; top: 16px; width: 44px; height: 88px; border-radius: 8px; object-fit: cover; background: #ECECEC; } .award-top { padding-right: 56px; } .award .award-top .lvl { font-weight: 700; color: var(--ink); letter-spacing: .07em; } .award a { border-top: 3px solid var(--lv, var(--line)); } @media (max-width: 480px) { .award-img { width: 34px; height: 68px; right: 12px; top: 12px; } .award-top { padding-right: 40px; } } /* bands that follow each other read as one stage (the radio spots and the film; the film and the Higgsfield shots) */ .vk-mods > .vk-band + .vk-band { margin-top: calc(-1 * clamp(40px, 6vw, 80px)); } .vk-w .vk-wb .vk-mods > .vk-band + .vk-band { margin-top: calc(-1 * clamp(40px, 6vw, 80px)); } /* the radio door is shorter: the spots are the work, the word only opens it */ .vk-w--radyo .wa-radyo .wa-word { font-size: clamp(72px, 11vw, 168px); } .vk-w--radyo .vk-door { padding-bottom: clamp(32px, 4.4vw, 64px); } .vk-end + .others { margin-top: clamp(48px, 6vw, 80px); } .vk-rd-mk.r span { left: auto; right: 0; } .vk-w--sinema .vk-band .vk-tabs button[aria-selected="true"] { background: #E0C580; border-color: #E0C580; color: #2A0A0E; } .vk-w--radyo .vk-band .vk-tabs button[aria-selected="true"] { background: #E00000; border-color: #E00000; color: #FFFFFF; } .vk-w--ralli .vk-band .vk-tabs button[aria-selected="true"] { background: #FFC21A; border-color: #FFC21A; color: #141414; } .award b { padding-right: 52px; } @media (max-width: 480px) { .award b { padding-right: 38px; } } .ot-head { max-width: 1040px; } /* ---------- round 14: the playlists (Kurallar 61, Tayfun: "Ses ve müzik" works like Spotify) ---------- The player bar is laid out like Spotify's: the cover (the live mark) and what plays on the left; previous, the big play/pause, next and repeat in the middle with the progress bar under them. It sits on the page ground between two hairlines (no card, Kurallar 31). Under it the track list: number (a play sign under the pointer, a small equaliser while it plays), title and line, group, the piece's own waveform, length; the row that plays is lit in tayf blue and its waveform fills. The mini player docks at the bottom of the window while the bar is out of view. */ .pl { --p: 0; margin-top: clamp(24px, 3vw, 36px); } .pl-bar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); align-items: center; gap: 14px 32px; padding: 18px 0; border-block: 1px solid var(--line); } .pl-now { display: flex; align-items: center; gap: 14px; min-width: 0; } .pl-cover { flex: none; display: grid; place-items: center; width: 64px; height: 56px; } .pl-cover .snd-mark { width: 62px; height: auto; overflow: visible; } .pl-meta { display: grid; gap: 4px; min-width: 0; margin: 0; } .pl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1.25 var(--font-text); color: var(--ink); } .pl.on .pl-t { color: var(--btn); } .pl-d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); } .pl-ctl { display: grid; gap: 6px; min-width: 0; } /* previous, play/pause, next in the middle and repeat beside them: a five-column grid keeps play/pause on the centre line at every width (review fix: the padding that did it pushed the bar past a 320 px screen) */ .pl-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: center; justify-items: center; gap: 14px; } .pl-btns::before { content: ""; } .pl-btns .pl-rep { justify-self: start; } .pl-btns button, .mp-btns button { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: color .2s var(--emph), background-color .2s var(--emph), transform .2s var(--emph), opacity .2s var(--emph); } .pl-btns button:focus-visible, .mp-btns button:focus-visible, .mp-meta:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } .pl-skip { fill: currentColor; } .pl-prev, .pl-next { width: 40px; height: 40px; } .pl-prev .ti, .pl-next .ti { width: 18px; height: 18px; } @media (hover: hover) { .pl-btns button:hover:not(:disabled):not(.pl-pp), .mp-btns button:hover:not(.mp-pp) { color: var(--btn); } } .pl-btns button:disabled { opacity: .32; cursor: default; } .pl-btns .pl-pp, .mp-btns .mp-pp { background: var(--btn); color: var(--on-btn, #fff); box-shadow: 0 6px 16px -6px rgba(0, 68, 90, .35); } .pl-btns .pl-pp { width: 52px; height: 52px; } .pl-btns .pl-pp:hover, .mp-btns .mp-pp:hover { background: var(--btn-h); transform: scale(1.05); } :is(.pl-pp, .mp-pp) .ti { grid-area: 1 / 1; width: 20px; height: 20px; } :is(.pl-pp, .mp-pp) .ti:last-child, :is(.pl-pp, .mp-pp)[data-st="playing"] .ti:first-child { display: none; } :is(.pl-pp, .mp-pp)[data-st="playing"] .ti:last-child { display: inline-block; } .pl-btns .pl-rep { position: relative; width: 36px; height: 36px; color: var(--ink-2); } .pl-rep .ti { width: 17px; height: 17px; } .pl-btns .pl-rep[aria-pressed="true"] { color: var(--btn); } .pl-rep[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; } .pl-prog { display: grid; grid-template-columns: minmax(52px, max-content) minmax(0, 1fr) minmax(52px, max-content); align-items: center; gap: 10px; } .pl-at, .pl-end { font: 500 11.5px/1 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .pl-at { text-align: right; } .pl-seek { position: relative; display: grid; align-items: center; height: 20px; cursor: default; touch-action: none; outline: none; } .pl.on .pl-seek { cursor: pointer; } .pl-trk { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--color-mint-200); } .pl-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--btn); transform: scaleX(var(--p)); transform-origin: left; } .pl-knob { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 2px var(--surface); opacity: 0; transition: opacity .2s var(--emph), transform .2s var(--emph); pointer-events: none; } .pl.on .pl-seek:hover .pl-knob, .pl-seek.drag .pl-knob, .pl-seek:focus-visible .pl-knob { opacity: 1; } .pl-seek.drag .pl-knob { transform: scale(1.2); } .pl-seek:focus-visible .pl-trk { box-shadow: 0 0 0 2px var(--color-focus, #2B8FB3); } @media (hover: none) { .pl.on .pl-knob { opacity: 1; } } /* the track list: the columns of a Spotify list (#, title, group, waveform, length) */ .pl-head, .pl-b { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(90px, 150px) 120px 80px; align-items: center; gap: 16px; } .pl-head { margin: 16px 0 0; padding: 0 12px 10px; white-space: nowrap; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); } .pl-head span:first-child { text-align: center; } .pl-hl { text-align: right; } .pl-list { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; } .pl-b { width: 100%; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s var(--emph); } @media (hover: hover) { .pl-b:hover { background: var(--surface); } } .pl-b:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 0; } .pl-r.cur .pl-b { background: color-mix(in srgb, var(--btn) 9%, var(--surface)); } .pl-n { display: grid; place-items: center; height: 24px; color: var(--ink-2); } .pl-n > * { grid-area: 1 / 1; } .pl-num { font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; } .pl-n .ti { display: none; width: 14px; height: 14px; color: var(--ink); } .pl-n .sp-eq { display: none; color: var(--btn); } .pl-r.cur .pl-num, .pl-r:not(.cur) .pl-b:focus-visible .pl-num { visibility: hidden; } .pl-r:not(.cur) .pl-b:focus-visible .pl-n .ti:nth-of-type(1) { display: inline-block; } .pl-r.playing .pl-n .sp-eq { display: inline-flex; } .pl-r.playing .pl-b:focus-visible .pl-n .sp-eq { display: none; } .pl-r.playing .pl-b:focus-visible .pl-n .ti:nth-of-type(2), .pl-r.paused .pl-n .ti:nth-of-type(1) { display: inline-block; color: var(--btn); } /* a pointer that hovers (not a finger): the number turns into the sign of what a press does */ @media (hover: hover) { .pl-r:not(.cur) .pl-b:hover .pl-num { visibility: hidden; } .pl-r:not(.cur) .pl-b:hover .pl-n .ti:nth-of-type(1) { display: inline-block; } .pl-r.playing .pl-b:hover .pl-n .sp-eq { display: none; } .pl-r.playing .pl-b:hover .pl-n .ti:nth-of-type(2) { display: inline-block; color: var(--btn); } } .pl-id { display: grid; gap: 3px; min-width: 0; } .pl-id b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1.25 var(--font-text); } .pl-r.cur .pl-id b { color: var(--btn); } .pl-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.35; color: var(--ink-2); } .pl-tag { display: inline-block; margin-right: 6px; padding: 2px 5px 1px; border-radius: 4px; background: var(--color-mint-100); color: var(--teal); font: 600 9.5px/1.2 var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } .pl-g2 { display: none; } .pl-g { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink-2); } .pl-wv { position: relative; display: block; height: 22px; } .pl-wave { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--color-mint-200); } .pl-wave.lit { fill: var(--btn); clip-path: inset(0 calc((1 - var(--sp, 0)) * 100%) 0 0); } .pl-len { font: 500 12px/1 var(--font-mono); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* narrower: the group joins the line under the title and the waveform stays (every row keeps its small picture of the sound, as a list keeps its covers); on a phone it is a compact one beside the length */ @media (max-width: 980px) { .pl-head, .pl-b { grid-template-columns: 36px minmax(0, 1fr) 96px 64px; } .pl-hg, .pl-g { display: none; } .pl-g2 { display: inline; } } @media (max-width: 767px) { .pl-bar { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 0 12px; } .pl-cover { width: 54px; height: 48px; } .pl-cover .snd-mark { width: 52px; } .pl-prog { order: -1; grid-template-columns: minmax(44px, max-content) minmax(0, 1fr) minmax(44px, max-content); } .pl-btns { gap: 18px; } .pl-btns .pl-pp { width: 56px; height: 56px; } .pl-prev, .pl-next, .pl-btns .pl-rep { width: 44px; height: 44px; } .pl-head { display: none; } .pl-list { margin-top: 10px; } .pl-b { grid-template-columns: 28px minmax(0, 1fr) 40px auto; gap: 10px; min-height: 60px; padding: 8px; } .pl-wv { height: 18px; } } @media (max-width: 380px) { .pl-btns { gap: 8px; } .pl-prog { gap: 8px; } } @media (prefers-reduced-motion: reduce) { .pl-btns button, .pl-b, .pl-knob { transition: none; } .pl-btns .pl-pp:hover, .mp-btns .mp-pp:hover { transform: none; } } /* loading (review fix): a track is asked for but its sound has not started, or the stream waits for data. A ring turns around play/pause and a small one takes the row number's place; both wait 0.25 s, so a quick start never flickers */ :is(.pl-pp, .mp-pp) { position: relative; } :is(.pl-pp, .mp-pp)::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--btn); border-right-color: var(--btn); opacity: 0; pointer-events: none; } .pl[data-load] .pl-pp::after, .mp[data-load] .mp-pp::after { animation: plSpin .8s linear infinite, plShow .2s var(--emph) .25s forwards; } .mp[data-load] .mp-pp::after { inset: -4px; } .pl-r.loading .pl-n::after { content: ""; grid-area: 1 / 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-mint-200); border-top-color: var(--btn); opacity: 0; animation: plSpin .8s linear infinite, plShow .2s var(--emph) .25s forwards; } .pl-r.loading .pl-n > * { animation: plHide 0s linear .25s forwards; } @keyframes plSpin { to { rotate: 360deg; } } @keyframes plShow { to { opacity: 1; } } @keyframes plHide { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .pl[data-load] .pl-pp::after, .mp[data-load] .mp-pp::after, .pl-r.loading .pl-n::after { animation: plShow .2s linear .25s forwards, plPulse 1.6s ease-in-out .45s infinite alternate; } @keyframes plPulse { from { opacity: 1; } to { opacity: .35; } } } /* the mini player: Spotify's docked bar, compact, over the page while the list's bar is out of view */ .mp { --p: 0; position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: min(760px, calc(100% - 24px)); overflow: hidden; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 16px 36px -14px rgba(0, 68, 90, .32), 0 0 0 1px var(--line); translate: -50% 0; transform: translateY(calc(100% + 28px)); opacity: 0; visibility: hidden; transition: transform .45s var(--emph), opacity .3s var(--emph), visibility 0s linear .45s; } .mp.on { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--emph), opacity .3s var(--emph), visibility 0s; } .mp-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 12px 10px; } .mp-cover { display: grid; place-items: center; width: 44px; height: 40px; } .mp-cover .snd-mark { width: 42px; height: auto; } .mp-meta { display: grid; gap: 2px; min-width: 0; padding: 4px 2px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .mp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1.2 var(--font-text); color: var(--btn); } .mp-d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); } .mp-btns { display: flex; align-items: center; gap: 2px; } .mp-btns button { width: 40px; height: 40px; } .mp-btns .ti { width: 17px; height: 17px; } .mp-btns .mp-pp { width: 42px; height: 42px; margin-inline: 4px; } .mp-btns .mp-x { color: var(--ink-2); } .mp-seek { position: absolute; left: 0; right: 0; bottom: 0; display: grid; align-items: end; height: 14px; cursor: pointer; touch-action: none; outline: none; } .mp-trk { position: relative; display: block; height: 3px; background: var(--color-mint-200); transition: height .15s var(--emph); } .mp-fill { position: absolute; inset: 0; background: var(--btn); transform: scaleX(var(--p)); transform-origin: left; } .mp-seek:hover .mp-trk, .mp-seek.drag .mp-trk { height: 5px; } .mp-seek:focus-visible .mp-trk { box-shadow: 0 0 0 2px var(--color-focus, #2B8FB3); } html.mp-on body { padding-bottom: 96px; } /* the focus stays clear of the mini player (WCAG 2.4.11): the browser scrolls a focused element above it (kimlik.js checks too) */ html.mp-on { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 420px) { .mp-btns .mp-prev { display: none; } .mp-in { gap: 8px; padding-left: 8px; } .mp-btns button { width: 38px; } } @media (prefers-reduced-motion: reduce) { .mp, .mp.on { transform: none; } .mp { transition: opacity .2s linear, visibility 0s linear .2s; } .mp.on { transition: opacity .2s linear, visibility 0s; } } /* ---------- round 14: pull to refresh where a page has feeds (Kurallar 61) ---------- The browser's own pull-to-reload gives way on these pages only (site.js sets html.akis), so the pull refreshes the feeds instead of reloading. The sign comes out from under the header: a white disc with the brand's triangle in its logo orientation and a ring that fills with the pull; past the mark the triangle takes the logo gradient; then the ring turns while the feeds are dealt, and the words say what changed. */ html.akis, html.akis body { overscroll-behavior-y: none; } .ptr { --y: 0px; --k: 0; position: fixed; top: calc(var(--nav-h) - 46px); left: 50%; z-index: 49; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 28px -12px rgba(0, 68, 90, .35), 0 0 0 1px var(--line); font: 600 13.5px/1 var(--font-text); white-space: nowrap; opacity: 0; pointer-events: none; translate: -50% 0; transform: translateY(var(--y)); transition: transform .4s var(--emph), opacity .3s var(--emph); } .ptr.pulling { transition: none; } .ptr.handoff { transition: opacity .16s linear; } .ptr-disc { position: relative; display: grid; place-items: center; width: 32px; height: 32px; } .ptr-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .ptr-ring circle { fill: none; stroke-width: 3; } .ptr-ring .bg { stroke: var(--color-mint-100); } .ptr-ring .fg { stroke: var(--btn); stroke-linecap: round; stroke-dasharray: calc(var(--k) * 100) 100; } .ptr-tri { width: 13px; height: 11.3px; margin-top: -1px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--color-mint-200); transition: background-color .2s var(--emph); } .ptr:is(.arm, .busy, .done) .ptr-tri { background: var(--tayf); } .ptr.busy .ptr-ring { animation: ptrTurn .9s linear infinite; } .ptr.busy .ptr-ring .fg { stroke-dasharray: 30 100; } @keyframes ptrTurn { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } @media (prefers-reduced-motion: reduce) { .ptr { transition: opacity .2s linear; } .ptr.busy .ptr-ring { animation: none; } .ptr.busy .ptr-ring .fg { stroke-dasharray: 100 100; } } /* the pill: when what a refresh changed is below the first screen, the sign turns into a pill at the same place (the "new posts" pill of Instagram and X): small round pictures of the new first items, what changed, and an arrow that nudges down twice; a press takes the visitor there. It leaves after ten seconds, on Escape, or when the feed shows. */ .ptr-new { position: fixed; top: calc(var(--nav-h) + 26px); left: 50%; z-index: 49; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); height: 44px; margin: 0; padding: 0 14px 0 6px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 28px -12px rgba(0, 68, 90, .35), 0 0 0 1px var(--line); font: 600 13.5px/1 var(--font-text); white-space: nowrap; cursor: pointer; opacity: 0; translate: -50% 0; transform: translateY(-14px) scale(.96); transition: transform .42s var(--emph), opacity .3s var(--emph), box-shadow .2s var(--emph); } .ptr-new[hidden] { display: none; } .ptr-new.on { opacity: 1; transform: none; } .ptr-new:hover { box-shadow: 0 14px 30px -12px rgba(0, 68, 90, .42), 0 0 0 1px var(--btn); } .ptr-new:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 3px; } .ptr-new-th { display: flex; flex: none; } .ptr-new-th img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--color-mint-100); box-shadow: 0 0 0 2px var(--surface); } .ptr-new-th img + img { margin-left: -11px; } .ptr-new-th:empty { display: none; } .ptr-new-th:empty ~ .ptr-new-t { padding-left: 10px; } .ptr-new-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ptr-new .ti { width: 16px; height: 16px; color: var(--btn); } .ptr-new.on .ti { animation: ptrNudge .9s var(--emph) .45s 2; } @keyframes ptrNudge { 0%, 100% { transform: none; } 45% { transform: translateY(4px); } } .yt-chk { color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { .ptr-new { transform: none; transition: opacity .2s linear; } .ptr-new.on .ti { animation: none; } } /* review fix 3 (2026-10-13, Kurallar 66): the visible control of every feed (KARIŞTIR, SIRADAKİ 4 İŞ, YENİLE). A round button in the filters' language; while the feed is dealt its icon turns, then what changed is said beside it */ .akis-row { margin: 22px 0 0; } .akis-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 15px 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-text); letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color .25s var(--emph), color .25s var(--emph), background-color .25s var(--emph); } .akis-btn .ti { width: 17px; height: 17px; flex: none; color: var(--btn); } .akis-btn:hover { border-color: var(--teal); } .akis-btn:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } .akis-btn.busy .ti { animation: akisTurn .8s linear infinite; } .akis-btn-s { font: 500 12.5px/1.2 var(--font-text); color: var(--teal); white-space: nowrap; } .akis-btn-s:empty { display: none; } .akis-btn-s:not(:empty)::before { content: "·"; margin-right: 8px; color: var(--ink-2); } @keyframes akisTurn { to { transform: rotate(360deg); } } .ot-head .akis-btn { margin-left: auto; align-self: center; } .ot-head .ot-all { align-self: center; } .yt-count { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .yt-count .akis-btn { font-family: var(--font-text); } @media (max-width: 560px) { .ot-head .akis-btn { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .akis-btn.busy .ti { animation: none; opacity: .5; } } /* review fix 4 (2026-10-14, Kurallar 66): the hero reel's "Sonraki iş" button beside pause/play (the pull is only a shortcut) */ .reel-bar { grid-template-columns: auto auto auto minmax(0, 1fr) auto; } .reel-next { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px -8px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--btn); cursor: pointer; transition: background-color .25s var(--emph), color .25s var(--emph), border-color .25s var(--emph); } .reel-next:hover { background: var(--btn); border-color: var(--btn); color: var(--on-btn, #fff); } .reel-next:focus-visible, .reel-toggle:focus-visible { outline: 2px solid var(--color-focus, #2B8FB3); outline-offset: 2px; } .reel-next .ti { width: 14px; height: 14px; } @media (max-width: 560px) { .reel-bar { grid-template-columns: auto auto auto minmax(0, 1fr); } } /* review fix 3 (2026-10-13): on a phone the row's waveform was a 40 x 18 px smudge: the rows keep number, title, line and length (as a phone's track list does) and the bar above shows the progress; the mini player's bar keeps its 3 px line but answers a finger over 24 px */ @media (max-width: 767px) { .pl-b { grid-template-columns: 28px minmax(0, 1fr) auto; } .pl-wv { display: none; } } .mp-seek { height: 24px; bottom: 0; } .mp-in { padding-bottom: 22px; } html.mp-on body { padding-bottom: 106px; } html.mp-on { scroll-padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } /* ---------- Dalga 1, adim 1 (2026-10-14): Kaynak. The verified outward links of a work, in the case page's facts row. Printed only when content/site.mjs FEATURES..kaynak is on and a link of the work was opened and confirmed. ---------- */ .meta-src { min-width: 0; grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: -1px; } .src-links { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 0; font-weight: 500; } .src-a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--teal); font: 600 14px/1.35 var(--font-text); transition: border-color .25s var(--emph), color .25s var(--emph), transform .25s var(--emph); } .src-a .ti { width: 14px; height: 14px; } .src-a:hover, .src-a:focus-visible { border-color: var(--teal); color: var(--btn-h); } @media (prefers-reduced-motion: reduce) { .src-a { transition: none; } } /* ========================================================================================================= header island (2026-10-15, Tayfun: the header should not always show; it comes and goes like the Dynamic Island, and the search grows where it is instead of covering the page). The logic is in assets/site.js (header island) and assets/ara.js; the states live on .top[data-isl]: tam (the plain bar at the top of a page), gizli (hidden), kucuk (a small pill) and genis (the full navigation). Only transform and opacity move: the pill is drawn as two round ends that travel and a middle that stretches (.pil), so the ends never squash. Easing is the brand's pop-soft (a landing or a return, under 10 % overshoot); without .motion (reduced motion, headless) every change is instant. ========================================================================================================= */ .isl { position: relative; height: 100%; } .isl-k, .isl-pl { display: none; } /* the simpler controls: the search and the language are text on the bar, not outlined pills */ .ara-btn { border-color: transparent; background: transparent; } .ara-btn:hover { background: var(--line-2); border-color: transparent; color: var(--ink); } .lang { border-color: transparent; background: transparent; color: var(--ink-2); } .lang:hover { background: var(--line-2); border-color: transparent; color: var(--ink); } .nav a { color: var(--ink-2); transition: color .2s var(--emph); } .nav a:hover, .nav a:focus-visible { color: var(--ink); } .nav a:hover::after { transform: scaleX(0); } .nav a[aria-current] { color: var(--ink); } .nav a[aria-current]::after { transform: scaleX(1); } .ara-btn-t { color: var(--ink-2); } /* the pill: two ends and a middle (the parent sets --ph, the height; the script sets --kc and --dc, the compact numbers) */ .pil { --ph: 40px; --k: 1; --d: 0px; position: absolute; inset: 0; pointer-events: none; } .pil::before, .pil::after, .pil > i { content: ''; position: absolute; top: 0; bottom: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); } .pil::before { left: 0; width: calc(var(--ph) / 2); border-right: 0; border-radius: calc(var(--ph) / 2) 0 0 calc(var(--ph) / 2); transform: translateX(var(--d)); z-index: 1; } .pil::after { right: 0; width: calc(var(--ph) / 2); border-left: 0; border-radius: 0 calc(var(--ph) / 2) calc(var(--ph) / 2) 0; transform: translateX(calc(-1 * var(--d))); z-index: 1; } .pil > i { display: block; left: calc(var(--ph) / 2 - 1px); right: calc(var(--ph) / 2 - 1px); border-left: 0; border-right: 0; transform: scaleX(var(--k)); } .top.isl-on { pointer-events: none; } .top.isl-on::before, .top.isl-on .progress { opacity: 0; } .top.isl-on .isl { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100vw - 20px); height: 48px; pointer-events: none; } .top.isl-on .isl-pl { display: block; --ph: 48px; filter: drop-shadow(0 14px 20px rgba(0, 68, 90, .13)) drop-shadow(0 1px 2px rgba(0, 68, 90, .10)); } .top.isl-on .isl-k { display: inline-flex; position: absolute; left: 50%; top: 0; translate: -50% 0; height: 48px; align-items: center; gap: 8px; padding: 0 18px 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 14px/1 var(--font-text); cursor: pointer; pointer-events: auto; white-space: nowrap; } .isl-mk { display: block; width: 34px; height: auto; flex: none; } .top.isl-on .top-in { width: auto; height: 100%; gap: clamp(12px, 1.4vw, 20px); padding: 0 8px 0 16px; opacity: 0; visibility: hidden; } .top.isl-on .brand { --mw: 60px; margin-right: 12px; } .top.isl-on .ara-btn { height: 40px; } .top[data-isl="genis"] .isl { pointer-events: auto; } .top[data-isl="genis"] .top-in { opacity: 1; visibility: visible; } .top[data-isl="genis"] .isl-k { opacity: 0; visibility: hidden; } /* the pill's numbers: hidden and pill share them, the island is the full shape */ .top[data-isl="gizli"] .isl-pl, .top[data-isl="kucuk"] .isl-pl { --k: var(--kc, .2); --d: var(--dc, 0px); } .top[data-isl="gizli"] .isl { transform: translateY(-96px); opacity: 0; } .top[data-isl="gizli"] .isl-k { pointer-events: none; } @media (max-width: 960px) { .top.isl-on .isl { width: calc(100vw - 20px); } .top.isl-on .top-in { padding: 0 4px 0 12px; gap: 4px; } .top.isl-on .brand { margin-right: auto; } .top.isl-on .ara-btn, .top.isl-on .menu-btn { width: 40px; height: 40px; } .top.isl-on + .menu { top: 66px; left: 10px; right: 10px; } } .top.isl-snap, .top.isl-snap * { transition: none !important; } /* motion: reveal and growth land softly, folding and hiding are quick and plain */ .motion .top.isl-on .isl { transition: transform .5s var(--ease-pop-soft, var(--emph)), opacity .22s linear; } .motion .top[data-isl="gizli"] .isl { transition: transform .3s var(--exit), opacity .22s linear; } .motion .top.isl-on .isl-pl::before, .motion .top.isl-on .isl-pl::after, .motion .top.isl-on .isl-pl > i { transition: transform .42s var(--emph); } .motion .top[data-isl="genis"] .isl-pl::before, .motion .top[data-isl="genis"] .isl-pl::after, .motion .top[data-isl="genis"] .isl-pl > i { transition: transform .56s var(--ease-pop-soft, var(--emph)); } .motion .top.isl-on .top-in { transition: opacity .14s linear, visibility 0s linear .14s; } .motion .top[data-isl="genis"] .top-in { transition: opacity .22s linear .1s, visibility 0s; } .motion .top.isl-on .isl-k { transition: opacity .2s linear .1s, visibility 0s; } .motion .top[data-isl="genis"] .isl-k { transition: opacity .12s linear, visibility 0s linear .12s; } /* ---------- the search, grown inside the island: a field that comes out of the Ara button, results hanging under it ---------- */ .ara-f { position: absolute; z-index: 2; height: 40px; margin: 0; visibility: hidden; pointer-events: none; } .ara-f.pre, .ara-f.on { visibility: visible; } .ara-f.on { pointer-events: auto; } .ara-f .pil { --ph: 40px; --k: var(--k0, .1); --d: var(--d0, 0px); transform: translateX(var(--x0, 0px)); } .ara-f.on .pil { --k: 1; --d: 0px; transform: none; } .ara-fi { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 14px; opacity: 0; } .ara-f.on .ara-fi { opacity: 1; } .ara-fi > .ti { width: 18px; height: 18px; color: var(--btn); flex: none; } .ara-f .ara-q { flex: 1 1 auto; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 16px/1.2 var(--font-text); } .ara-f .ara-q::placeholder { color: var(--ink-2); opacity: .8; } .ara-f .ara-q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .ara-f .ara-x { min-width: 36px; height: 36px; border-radius: 999px; } .isl.ara-on .ara-btn, .isl.ara-on .nav { opacity: 0; visibility: hidden; } @media (max-width: 960px) { .isl.ara-on :is(.brand, .lang, .menu-btn, .tema) { opacity: 0; visibility: hidden; } } .motion .ara-f .pil::before, .motion .ara-f .pil::after, .motion .ara-f .pil > i, .motion .ara-f .pil { transition: transform .4s var(--emph); } .motion .ara-f.on .pil::before, .motion .ara-f.on .pil::after, .motion .ara-f.on .pil > i, .motion .ara-f.on .pil { transition: transform .56s var(--ease-pop-soft, var(--emph)); } .motion .ara-fi { transition: opacity .1s linear; } .motion .ara-f.on .ara-fi { transition: opacity .2s linear .12s; } .motion .isl.ara-on .ara-btn, .motion .isl.ara-on .nav, .motion .isl.ara-on :is(.brand, .lang, .menu-btn, .tema) { transition: opacity .14s linear, visibility 0s linear .14s; } .motion .isl:not(.ara-on) .ara-btn, .motion .isl:not(.ara-on) .nav { transition: opacity .2s linear .2s, visibility 0s linear .2s; } .ara-pan { position: absolute; z-index: 3; top: calc(100% + 8px); left: 50%; translate: -50% 0; display: flex; flex-direction: column; width: min(760px, calc(100vw - 20px)); max-height: min(620px, calc(100dvh - 100px)); border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 32px 60px -30px rgba(0, 68, 90, .42), var(--shadow-2); overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 50% 0; pointer-events: none; } .ara-pan::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tayf); z-index: 1; } .ara-pan.on { visibility: visible; opacity: 1; transform: none; pointer-events: auto; } .top.isl-on .ara-pan { width: min(max(100%, 640px), calc(100vw - 20px)); max-height: min(620px, calc(100dvh - 86px)); } .motion .ara-pan { transition: opacity .14s linear, transform .16s var(--exit), visibility 0s linear .16s; } .motion .ara-pan.on { transition: opacity .2s linear, transform .46s var(--ease-pop-soft, var(--emph)), visibility 0s; } /* the brand book's chapter marker sits beside the old bar's logo; the full island covers that place, so it steps aside while the island is open */ body:has(.top[data-isl="genis"]) .k-now { opacity: 0 !important; pointer-events: none; }