/* Hallmark · deney page: the home page's notebook sheet on the same defocused desk, one experiment per page · genre: atmospheric · theme: Refract tokens, custom direction · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S4 R5 V4 · weakest: S, a reading page by design; the video and the steps carry it */
@import url("./styles.css?v=d513d98e");

.dnav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: var(--container); margin-inline: auto; padding: var(--space-lg) var(--gutter); color: var(--scene-ink); }
.dnav a, .dback { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.dnav a { text-decoration-color: var(--scene-rule); }
.dnav a:hover, .dback:hover { text-decoration-color: currentColor; }
.dnav a:focus-visible, .dback:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.dpage { padding-block: var(--space-md) var(--section-gap-s); }
.dpage--body { padding-top: var(--space-md); }
.dhead .dactions { margin-top: var(--space-xl); }
.dhead h1 { margin: 0; max-width: 20ch; font: 400 var(--text-display-s)/1.05 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.dlead { margin: var(--space-lg) 0 0; max-width: 52ch; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }

.dgrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.dvideo { position: sticky; top: var(--space-lg); margin: 0; }
.dvideo video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-inner); background: var(--paper-ink); box-shadow: var(--shadow-object); }
.dvideo video:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.dbody { max-width: 62ch; }
.dbody > p { margin: 0 0 var(--space-sm); font-size: var(--text-lg); line-height: 1.45; }
.dbody h2 { margin: var(--space-3xl) 0 var(--space-lg); font: 400 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; }
.dbody h2:first-child { margin-top: 0; }
.gorev { margin: 0; padding-left: var(--space-md); border-left: 2px solid var(--color-pencil); }
.gorev p { margin: 0; font: 300 var(--text-xl)/1.35 var(--font-display); }
.adimlar { counter-reset: adim; display: grid; margin: 0; padding: 0; list-style: none; }
.adimlar li { counter-increment: adim; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xl); line-height: 1.4; }
.adimlar li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.adimlar li::before { content: counter(adim); font: 300 var(--text-2xl)/1 var(--font-display); color: var(--color-muted); }
.kurdur { margin: 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-paper); background: var(--note); color: var(--note-ink); box-shadow: var(--shadow-object); font: 400 var(--text-md)/1.5 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.dnotes { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; padding-left: 1.2em; color: var(--color-ink-2); line-height: 1.45; }
.dfacts { margin-top: var(--space-2xl); }
.dactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin: var(--space-xl) 0 0; }

@media (max-width: 60rem) {
  .dgrid { grid-template-columns: minmax(0, 1fr); }
  .dvideo { position: static; width: min(100%, 22rem); }
}
@media (max-width: 40rem) {
  .dnav { padding-inline: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  .dnav a, .dback { transition: none; }
}