:root {
  --ink: #101014;
  --yellow: #ffc93c;
  --red: #f03a47;
  --lavender: #b4a6ea;
  --paper: #edebf5;
  --card: #faf9fd;
  --muted: #63606e;
  --line: #d9d7e2;
  --night: #0c0c12;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "New York", "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 52px);
  --hard-shadow: 9px 9px 0 var(--ink);
  --section-space-lg: clamp(70px, 8.4vw, 119px);
  --section-space-xl: clamp(70px, 9.1vw, 126px);
  --section-space-md: clamp(70px, 7.7vw, 105px);

  /* Tipografi ölçeği — akışkan, mobilde de okunur kalır.
     Kural: gerçek sayfa metni hiçbir yerde 11px altına inmez.
     Telefon/kart maketlerinin içindeki minik yazılar bu ölçeğin dışında;
     onlar küçültülmüş bir ekranın parçası, ölçeklenirlerse maket bozulur. */
  --fs-micro: clamp(11px, 0.66rem + 0.14vw, 12.5px);
  --fs-tiny: clamp(12.5px, 0.74rem + 0.18vw, 14px);
  --fs-small: clamp(14px, 0.82rem + 0.22vw, 15.5px);
  --fs-base: clamp(16px, 0.94rem + 0.25vw, 17.5px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

button,
a,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

blockquote,
q,
p,
h1,
h2,
h3,
figure,
dl,
dd {
  margin: 0;
}

q::before,
q::after,
blockquote::before,
blockquote::after {
  content: none;
}

a {
  color: inherit;
}

::selection {
  background: var(--red);
  color: var(--card);
}

.shell {
  width: min(100%, var(--shell));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1000;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 4px solid var(--red);
  outline-offset: 4px;
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1001;
  height: 4px;
  pointer-events: none;
}

.reading-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 2px solid rgba(16, 16, 20, 0.14);
}

.header-inner {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
}

.brand {
  display: inline-flex;
  width: 178px;
  flex: none;
}

.brand img {
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 36px);
}

.site-nav a,
.footer-column a,
.footer-bottom a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after,
.footer-column a::after,
.footer-bottom a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 3px;
  background: var(--red);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.footer-column a:hover::after,
.footer-bottom a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-store,
.footer-store,
.menu-toggle {
  border: 0;
  cursor: pointer;
}

.header-store {
  min-width: 132px;
  min-height: 46px;
  padding: 7px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: var(--card);
  box-shadow: 3px 3px 0 var(--red);
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.header-store span,
.header-store strong {
  display: block;
  line-height: 1.1;
}

.header-store span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.header-store strong {
  margin-top: 3px;
  font-size: var(--fs-small);
}

.header-store:hover {
  box-shadow: 5px 5px 0 var(--red);
  transform: translate(-2px, -2px);
}

.header-store:active,
.store-button:active,
.footer-store:active,
.carousel-button:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.store-trigger.is-noted {
  animation: store-note 360ms ease;
}

@keyframes store-note {
  50% { transform: translateY(-4px); }
}

.menu-toggle {
  display: none;
}

.hero {
  min-height: calc(100svh - 82px);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 30px clamp(42px, 7vw, 104px);
  padding-top: clamp(40.8px, 4.8vw, 67.2px);
  padding-bottom: 32px;
}

.hero-copy {
  padding-bottom: 48px;
  position: relative;
  z-index: 3;
}

.kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 32px;
  height: 4px;
  margin-right: -5px;
  background: var(--red);
  border-radius: 99px;
  transform: rotate(-2deg);
}

.kicker span:first-of-type {
  margin-right: auto;
}

.kicker span:last-child {
  color: var(--muted);
}

.hero h1 {
  max-width: 760px;
  margin-top: 24px;
  font-size: clamp(58px, 7.7vw, 112px);
  font-weight: 950;
  letter-spacing: -0.072em;
  line-height: 0.86;
  text-transform: uppercase;
}

.hero h1 em {
  display: inline-block;
  color: var(--red);
  font-style: normal;
}

.hero-lede {
  max-width: 580px;
  margin-top: 32px;
  color: #3d3a46;
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.store-button {
  min-height: 61px;
  padding: 8px 21px 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  background: var(--ink);
  color: var(--card);
  box-shadow: 5px 5px 0 var(--red);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.store-button:hover {
  box-shadow: 8px 8px 0 var(--red);
  transform: translate(-3px, -3px);
}

.store-glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 900;
}

.store-button small,
.store-button strong {
  display: block;
  line-height: 1.1;
}

.store-button small {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-button strong {
  margin-top: 4px;
  font-size: 18px;
}

.trust-line {
  margin-top: 26px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trust-line span {
  margin-inline: 8px;
  color: var(--red);
}

.hero-art {
  min-height: 680px;
  position: relative;
  display: grid;
  place-items: center;
}

.hero-art::before {
  content: "“";
  position: absolute;
  top: -56px;
  right: -20px;
  color: rgba(180, 166, 234, 0.48);
  font-family: var(--serif);
  font-size: 330px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(7deg);
}

.hero-orbit {
  position: absolute;
  z-index: 2;
  padding: 9px 13px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.orbit-top {
  top: 50px;
  left: 2px;
  z-index: 4;
  transform: rotate(-5deg);
}

.orbit-bottom {
  right: -2px;
  bottom: 48px;
  transform: rotate(3deg);
}

.orbit-bottom b {
  color: var(--red);
}

.orbit-bottom i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 5px 2px;
  background: var(--ink);
  border-radius: 50%;
}

.phone {
  position: relative;
  z-index: 3;
}

.phone-frame {
  position: relative;
  width: 326px;
  height: 701px;
  padding: 9px;
  border: 3px solid #66666d;
  border-radius: 52px;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px #050507, 15px 17px 0 rgba(16, 16, 20, 0.94);
  overflow: hidden;
}

.phone-hero {
  transform: rotate(-2.3deg);
}

.phone-island {
  position: absolute;
  top: 19px;
  left: 50%;
  z-index: 6;
  width: 97px;
  height: 27px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(-50%);
}

.app-screen {
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
}

.today-screen {
  padding: 17px 17px 18px;
  display: flex;
  flex-direction: column;
  background: var(--yellow);
}

.app-status {
  height: 29px;
  padding-inline: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
}

.status-time,
.status-icons {
  display: flex;
  align-items: center;
}

.status-time {
  gap: 3px;
}

.mute-mark {
  position: relative;
  width: 9px;
  height: 10px;
  display: block;
  color: transparent;
  font-size: 0;
}

.mute-mark::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 5px;
  height: 7px;
  border: 1.25px solid var(--ink);
  border-radius: 4px 4px 2px 2px;
}

.mute-mark::after {
  content: "";
  position: absolute;
  top: 4px;
  left: -1px;
  width: 11px;
  height: 1.4px;
  background: var(--ink);
  transform: rotate(48deg);
}

.status-icons {
  gap: 6px;
}

.signal-dots {
  color: rgba(16, 16, 20, 0.3);
  font-size: 7px;
  font-style: normal;
  letter-spacing: -1px;
}

.wifi-mark {
  position: relative;
  width: 14px;
  height: 10px;
  border-top: 2px solid var(--ink);
  border-radius: 50%;
}

.wifi-mark::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 8px;
  height: 6px;
  border-top: 2px solid var(--ink);
  border-radius: 50%;
}

.wifi-mark::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
}

.battery-mark {
  position: relative;
  width: 17px;
  height: 9px;
  border: 1.4px solid var(--ink);
  border-radius: 2.5px;
}

.battery-mark::before {
  content: "";
  position: absolute;
  top: 2px;
  right: -3px;
  width: 2px;
  height: 3px;
  border-radius: 0 1px 1px 0;
  background: var(--ink);
}

.battery-mark::after {
  content: "";
  position: absolute;
  inset: 1.4px;
  border-radius: 1px;
  background: var(--ink);
}

.app-head {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-head img {
  width: 126px;
  height: auto;
}

.date-chip {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--ink);
  color: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.date-chip b {
  font-family: var(--display);
  font-size: 14px;
}

.ui-label,
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.today-screen > .ui-label {
  margin-top: 18px;
  font-size: 7px;
}

.screen-title {
  margin-top: 7px;
  margin-bottom: 17px;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.screen-title span {
  color: var(--red);
}

.quote-card {
  position: relative;
  padding: 16px 16px 15px;
  border: 2.5px solid var(--ink);
  border-radius: 17px;
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
}

.quote-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.quote-glyph {
  height: 31px;
  margin-top: 10px;
  color: var(--lavender);
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 900;
  line-height: 0.9;
}

.quote-card blockquote {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.34;
}.ink-line, .feature-quote u, .loose-page u, .share-card u {
  text-decoration: none;
  background: linear-gradient(transparent 78%, var(--red) 78%, var(--red) 94%, transparent 94%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.quote-rule {
  height: 1.5px;
  margin: 15px 0 10px;
  background: var(--line);
}

.quote-by {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.quote-by b {
  font-size: 11px;
  font-weight: 900;
}

.quote-by i {
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 9.5px;
}

.source-pill {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.source-pill i {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translateY(-1px);
}

.app-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 9px;
}

.app-actions > span {
  height: 44px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.share-action i {
  position: relative;
  width: 14px;
  height: 12px;
  margin-top: 4px;
  display: block;
  border: 1.7px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 2px 2px;
}

.share-action i::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 5px;
  width: 1.7px;
  height: 12px;
  background: var(--ink);
}

.share-action i::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 3px;
  width: 5px;
  height: 5px;
  border-top: 1.7px solid var(--ink);
  border-left: 1.7px solid var(--ink);
  transform: rotate(45deg);
}

.app-notes {
  margin-top: 10px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 5.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
}

.app-notes p {
  line-height: 1.45;
}

.app-notes span {
  margin-inline: 3px;
}

.app-tabs {
  margin-top: auto;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900;
}

.tab-item {
  min-height: 43px;
  padding-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  border-radius: 11px;
  text-align: center;
}

.tab-item.is-active {
  background: var(--ink);
  color: var(--card);
}

.tab-item b {
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.tab-icon {
  position: relative;
  width: 14px;
  height: 15px;
  display: block;
  color: currentColor;
}

.tab-today {
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.tab-today::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 7px;
  height: 1.5px;
  background: currentColor;
  box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor;
}

.tab-feed {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-shadow: 2px -2px 0 -0.5px currentColor;
}

.tab-notebook {
  width: 11px;
  border: 1.6px solid currentColor;
  border-radius: 2px 2px 3px 3px;
}

.tab-notebook::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 2.5px;
  width: 4px;
  height: 4px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  background: inherit;
  transform: rotate(45deg);
}

.tab-anthology {
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 6px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 6px 6px no-repeat;
}

.loose-page {
  position: absolute;
  right: -20px;
  bottom: 94px;
  z-index: 2;
  width: 230px;
  min-height: 340px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  background: #f4f0e6;
  box-shadow: 9px 9px 0 var(--ink);
  transform: rotate(9deg);
}

.loose-page > span {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.loose-page q {
  margin-block: auto;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.18;
}

.loose-page p {
  font-size: 10px;
  font-weight: 900;
}

.loose-page p i {
  font-family: var(--serif);
  font-weight: 400;
}

.hero-footnote {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 16, 20, 0.25);
  color: var(--muted);
  font-family: var(--serif);
  font-size: var(--fs-tiny);
  font-style: italic;
  text-align: center;
}

/* Bar artık kendi başına duruyor (manifesto bölümü kaldırıldı) ve
   "The heart of Underscore" bölümünün üst bandı gibi okunuyor. */
.marquee {
  width: 100%;
  padding-block: 16px;
  overflow: hidden;
  border-block: 3px solid var(--ink);
  background: var(--ink);
  color: var(--card);
}

.marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  will-change: transform;
  animation: marquee 32s linear infinite;
}

.marquee-set {
  width: max-content;
  min-width: 100vw;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 30px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.marquee-set i {
  color: var(--red);
  font-family: var(--serif);
  font-size: 26px;
  font-style: normal;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.experience {
  padding-top: var(--section-space-xl);
  padding-bottom: var(--section-space-lg);
}

.experience-intro {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) 1fr;
  gap: 18px clamp(26px, 3.5vw, 44px);
  align-items: start;
}

.experience-intro .eyebrow {
  margin-top: 14px;
}.experience-intro h2, .cards-head h2, .habit h2, .daily-copy h2, .plus h2 {
  font-size: clamp(44px, 6vw, 80px);
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-transform: uppercase;
}

.experience-intro > p:last-child {
  grid-column: 2;
  max-width: 590px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 20px;
}

.experience-steps {
  margin-top: clamp(56px, 6.2vw, 68px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.experience-step {
  min-width: 0;
  padding: clamp(34px, 4vw, 52px);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--hard-shadow);
  overflow: hidden;
}

.step-read,
.step-underline {
  min-height: 700px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.step-read {
  background: var(--yellow);
}

.step-notebook {
  grid-column: 1 / -1;
  min-height: 570px;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(440px, 1.28fr);
  gap: clamp(56px, 8vw, 110px);
  align-items: center;
  background: #f4f0e6;
}

.moment-copy {
  max-width: 450px;
}

.step-read .moment-copy,
.step-underline .moment-copy {
  max-width: none;
}

.moment-no {
  color: var(--red);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.moment-copy h3 {
  margin-top: 18px;
  font-size: clamp(36px, 4.3vw, 60px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.experience-step:not(.step-notebook) .moment-copy h3 {
  font-size: clamp(34px, 3.4vw, 48px);
}

.moment-copy > p:not(.micro-copy) {
  margin-top: 25px;
  color: #3f3c46;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}

.micro-copy {
  margin-top: 26px;
  padding-top: 17px;
  border-top: 1px solid rgba(16, 16, 20, 0.22);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.moment-visual {
  position: relative;
  min-height: 410px;
}

.step-read .moment-visual,
.step-underline .moment-visual {
  min-height: 320px;
  margin-top: auto;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.step-underline .gesture-visual {
  padding: 34px 4px;
}

.step-notebook .notebook-visual {
  width: 100%;
}

.morning-visual {
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  background: var(--yellow);
  box-shadow: var(--hard-shadow);
  overflow: hidden;
}

.sun-disc {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(16, 16, 20, 0.18);
  border-radius: 50%;
}

.sun-disc::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 2px solid rgba(16, 16, 20, 0.12);
  border-radius: inherit;
}

.page-slip {
  z-index: 1;
  width: min(76%, 410px);
  min-height: 255px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-3deg);
}

.page-slip small,
.time-mark,
.gesture-author {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.page-slip q {
  margin-block: auto;
  font-family: var(--serif);
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 700;
  line-height: 1.1;
}

.page-slip p {
  font-size: var(--fs-tiny);
  font-weight: 900;
}

.time-mark {
  position: absolute;
  right: 20px;
  bottom: 18px;
}

.gesture-visual {
  min-height: 390px;
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 3px solid var(--ink);
  background: var(--card);
  box-shadow: var(--hard-shadow);
}

.gesture-quote {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-size: clamp(35px, 4.2vw, 58px);
  font-weight: 700;
  line-height: 1.14;
}

.gesture-quote u {
  text-decoration: none;
}

.gesture-visual svg {
  width: 90%;
  height: 58px;
  margin: -34px 0 8px 5%;
  overflow: visible;
}

.gesture-visual path {
  fill: none;
  stroke: var(--red);
  stroke-linecap: round;
  stroke-width: 12;
}

.gesture-author {
  margin-top: 26px;
  color: var(--muted);
}

.notebook-visual {
  min-height: 450px;
}

.notebook-page {
  position: absolute;
  width: 76%;
  min-height: 205px;
  padding: 25px 26px 21px 44px;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 7px 7px 0 var(--ink);
}

.notebook-page::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: var(--author-color, var(--red));
  border-right: 3px solid var(--ink);
  border-radius: 10px 0 0 10px;
}

.notebook-page span {
  color: var(--author-color, var(--red));
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 900;
}

.notebook-page q {
  margin-block: auto;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.2;
}

.notebook-page p {
  margin-top: 15px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-a { top: 0; left: 0; --author-color: var(--red); --page-rotation: -4deg; transform: rotate(var(--page-rotation)); }
.page-b { top: 110px; right: 0; --author-color: var(--lavender); --page-rotation: 3deg; transform: rotate(var(--page-rotation)); }
.page-c { bottom: 0; left: 7%; --author-color: #7ec8f2; --page-rotation: -1deg; transform: rotate(var(--page-rotation)); }

.six-notes {
  margin-top: 90px;
  padding-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1.5px solid var(--ink);
}

.six-notes p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 15px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: var(--fs-small);
}

.six-notes b {
  grid-row: 1 / span 2;
  color: var(--red);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
}

.six-notes span {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-base);
  font-weight: 900;
}

.daily-line {
  padding-top: var(--section-space-lg);
  padding-bottom: var(--section-space-lg);
  background: var(--ink);
  color: var(--card);
}

.daily-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(60px, 8vw, 120px);
  align-items: start;
}

.daily-copy {
  padding-top: 24px;
}

.eyebrow.light {
  color: var(--yellow);
}

.daily-copy h2 {
  margin-top: 24px;
}

.daily-copy h2 span {
  color: var(--lavender);
}

.daily-copy > p:not(.eyebrow) {
  max-width: 510px;
  margin-top: 30px;
  color: rgba(250, 249, 253, 0.7);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
}

.source-values {
  margin-top: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.source-values span {
  padding: 11px 12px;
  border: 1px solid rgba(250, 249, 253, 0.3);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feature-quote-stage {
  position: relative;
  min-width: 0;
}

.feature-quote {
  position: relative;
  z-index: 2;
  padding: clamp(30px, 4vw, 58px);
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 13px 13px 0 var(--yellow);
}

.feature-quote-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: 0.16em;
}

.feature-mark {
  height: 70px;
  margin-top: 20px;
  color: var(--lavender);
  font-family: var(--serif);
  font-size: 100px;
  font-weight: 900;
  line-height: 0.8;
}

.feature-quote blockquote {
  margin-top: 20px;
  font-family: var(--serif);
  font-size: clamp(35px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.feature-credit {
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 2px solid var(--line);
}

.feature-credit p {
  display: flex;
  flex-direction: column;
}

.feature-credit b {
  font-size: var(--fs-small);
  font-weight: 900;
}

.feature-credit i {
  color: var(--muted);
  font-family: var(--serif);
  font-size: var(--fs-tiny);
}

.source-toggle {
  min-height: 44px;
  padding: 8px 15px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-toggle .source-toggle-icon {
  display: inline-block;
  margin-left: 6px;
  transition: transform 180ms ease;
}

.source-toggle[aria-expanded="true"] {
  background: var(--yellow);
}

.source-toggle[aria-expanded="true"] .source-toggle-icon {
  transform: rotate(180deg);
}

.source-toggle:hover {
  background: var(--yellow);
}

.source-toggle:active {
  transform: translate(2px, 2px);
}

.source-panel {
  --source-tilt: -1.6deg;
  /* Akışın DIŞINDA durur: kartın sol alt köşesine iliştirilmiş bir fiş gibi
     üstüne biner, sütunlar arasındaki boşluğa taşar. Akış içinde dururken
     panel açılınca bütün bölümü aşağı uzatıyordu. Dar ekranlarda (tek sütun,
     yanda boşluk yok) media query onu yeniden akışa alır. */
  position: absolute;
  left: clamp(-64px, -4vw, -24px);
  /* Kartın alt kenarına asılır: üstteki büyük alıntıyı ve altını çizili satırı
     örtmez, yalnızca künye şeridinin sol yarısına biner (yazar/eser bilgisi
     panelin kendisinde zaten var; sağdaki kapatma düğmesi açık kalır) ve
     bölümün kart altındaki boşluğuna sarkar. */
  bottom: -210px;
  z-index: 4;
  width: min(64%, 400px);
  margin: 0;
  padding: 26px;
  border: 3px solid var(--ink);
  border-radius: 2px;
  background: #f4f0e6;
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--lavender);
  transform: rotate(var(--source-tilt));
  transform-origin: bottom left;
}

.source-panel:not([hidden]) {
  animation: source-card-in 280ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@keyframes source-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(var(--source-tilt)) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--source-tilt)) scale(1);
  }
}

.source-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.source-panel-head > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.source-panel q {
  display: block;
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
}

.source-panel dl {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

.source-panel dl div {
  padding-top: 9px;
  border-top: 1px solid rgba(16, 16, 20, 0.2);
}

.source-panel dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.source-panel dd {
  margin-top: 3px;
  font-size: var(--fs-tiny);
  font-weight: 800;
}

.cards-section {
  padding-block: var(--section-space-lg) var(--section-space-md);
  overflow: hidden;
  /* Heart bölümüyle aynı koyu yüzey: sayfa ritmi bir koyu bir açık akar,
     pastel kart zeminleri koyuda daha da öne çıkar. */
  background: var(--ink);
  color: var(--card);
}

.cards-section .carousel-button {
  color: var(--ink);
}

.cards-section .share-card figcaption b {
  color: var(--card);
}

.cards-section .drag-note,
.cards-section .share-card figcaption span {
  color: rgba(250, 249, 253, 0.55);
}

/* Kart çerçevesi ve gölgesi koyuda kaybolmasın: ince açık çerçeve yeter,
   sert gölge yalnızca açık zeminlerde anlamlı. */
.cards-section .share-inner {
  border-color: rgba(250, 249, 253, 0.25);
  box-shadow: none;
}

.cards-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.cards-head h2 {
  margin-top: 22px;
}

.carousel-actions {
  display: flex;
  gap: 10px;
  padding-bottom: 8px;
}

.carousel-button {
  width: 50px;
  height: 50px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  font-size: 21px;
  font-weight: 900;
  transition: background 160ms ease, transform 140ms ease;
}

.carousel-button:hover {
  background: var(--yellow);
}

.card-track {
  margin-top: 80px;
  padding: 12px max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))) 32px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  gap: 28px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}

.card-track::-webkit-scrollbar {
  height: 4px;
}

.card-track::-webkit-scrollbar-thumb {
  background: var(--ink);
}

.share-card {
  scroll-snap-align: start;
}

.share-inner {
  aspect-ratio: 9 / 16;
  /* Metin kuşağı uygulamadaki kartla aynı ölçülerde: zemin görselinde rozet
     yüksekliğin %12'sinde bitiyor, alttaki logo %91'de başlıyor. 9/16 oranda
     yükseklik = genişlik × 16/9; yüzdeli padding genişliğe göre çözüldüğü
     için üst %19 ve alt %16 bantları 19×16/9 ≈ %33.8 ve 16×16/9 ≈ %28.4
     olarak yazıldı. Sol pay uygulamadaki gibi %10.5. */
  padding: 33.8% 8% 28.4% 10.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 3px solid var(--ink);
  box-shadow: 9px 9px 0 var(--ink);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #161514;
}

.share-card blockquote {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.34;
}

.share-card .share-inner > div:last-child {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.share-card .share-inner > div:last-child i {
  width: 40px;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 99px;
  background: var(--red);
}

.share-card .share-inner > div:last-child b {
  font-size: 12px;
  font-weight: 900;
}

.share-card .share-inner > div:last-child em {
  margin-top: 3px;
  color: #6b655c;
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
}

.share-card figcaption {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  text-transform: uppercase;
}

.share-card figcaption b {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.share-card figcaption span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.drag-note {
  margin-top: 25px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.drag-note span {
  margin-left: 10px;
  color: var(--red);
  font-size: 18px;
}

.habit {
  padding-block: var(--section-space-lg);
  border-block: 3px solid var(--ink);
  background: var(--yellow);
}

.habit-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(70px, 10vw, 150px);
  align-items: center;
}

.habit h2 {
  margin-top: 24px;
}

.habit-copy > p:not(.eyebrow, .habit-note) {
  max-width: 550px;
  margin-top: 30px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.65;
}

.habit-note {
  margin-top: 34px;
  color: #49423b;
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.habit-note b {
  color: var(--ink);
}

.home-screen {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 0.56;
  margin-inline: auto;
  padding: 22px;
  border: 4px solid var(--ink);
  border-radius: 54px;
  background: var(--paper);
  box-shadow: 15px 15px 0 var(--ink);
  overflow: hidden;
  transform: rotate(2deg);
}

.home-screen::before,
.home-screen::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
}

.home-screen::before {
  top: 170px;
  right: -130px;
  width: 340px;
  height: 340px;
  background: var(--lavender);
}

.home-screen::after {
  bottom: 40px;
  left: -100px;
  width: 250px;
  height: 250px;
  background: var(--red);
  opacity: 0.16;
}

.home-top {
  position: relative;
  z-index: 2;
  padding-inline: 13px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 900;
}

.widget-card {
  position: relative;
  z-index: 2;
  width: min(100%, 316px);
  aspect-ratio: 1;
  margin: 32px auto 0;
  border: 2px solid rgba(16, 16, 20, 0.12);
  border-radius: 30px;
  background: var(--yellow);
  box-shadow: 0 18px 35px rgba(16, 16, 20, 0.15);
  overflow: hidden;
  /* Bindirilen metinler cqw ile kartın kendi genişliğine oranlanır: kart
     hangi boyutta çizilirse çizilsin gerçek widget'la aynı dizgi. Oranlar
     UnderscoreWidget.swift'ten birebir. */
  container-type: inline-size;
}

.widget-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-copy {
  position: absolute;
  top: 23.5%;
  left: 11.8%;
  width: 50%;
  display: flex;
  flex-direction: column;
  line-height: 1.02;
}

.widget-copy b {
  font-family: var(--serif);
  font-size: 11.2cqw;      /* Swift: width × 0.112, black */
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0d0d0c;
}

.widget-copy span {
  margin-top: 1.8cqw;
  color: #434344;
  font-size: 4.3cqw;       /* Swift: width × 0.043, medium */
  font-weight: 500;
}

.widget-streak {
  /* Swift: position(x: %60.6, y: %80.6) — kilit noktası bloğun MERKEZİ. */
  position: absolute;
  left: 60.6%;
  top: 80.6%;
  transform: translate(-50%, -50%);
  width: 60%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.8cqw;
}

.widget-streak span {
  font-family: var(--serif);
  font-size: 6.3cqw;       /* Swift: width × 0.063, semibold */
  font-weight: 600;
  color: var(--ink);
}

.widget-streak b {
  color: var(--red);
  font-family: var(--serif);
  font-size: 10.8cqw;      /* Swift: width × 0.108, black */
  font-weight: 900;
  width: 15cqw;            /* sabit slot; sayı içinde ortalı */
  text-align: center;
}

.home-icons {
  position: relative;
  z-index: 2;
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px;
}

.home-icons span,
.home-dock i {
  display: block;
  aspect-ratio: 1;
  border: 2px solid rgba(16, 16, 20, 0.17);
  border-radius: 16px;
  background: rgba(250, 249, 253, 0.68);
}

.home-icons span:nth-child(2n) { background: rgba(180, 166, 234, 0.62); }
.home-icons span:nth-child(3n) { background: rgba(255, 201, 60, 0.72); }

.home-dock {
  position: absolute;
  right: 24px;
  bottom: 21px;
  left: 24px;
  z-index: 2;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  border-radius: 24px;
  background: rgba(250, 249, 253, 0.6);
}

.plus {
  padding-block: var(--section-space-lg);
  border-block: 3px solid var(--ink);
  /* Sayfanın renk ritmi: kâğıt açılış, koyu "heart", açık orta, SARI tek
     vurgu (widget) ve koyu kapanış. Plus lavantayken sarının hemen ardından
     ikinci bir tam renk bloğu geliyordu — karmaşanın kaynağı buydu. */
  background: var(--ink);
  color: var(--card);
}

.plus-head {
  max-width: 1040px;
}

.plus-head h2 {
  margin-top: 24px;
}

.plus-head h2 span {
  color: var(--yellow);
}

.plus-summary {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 7vw, 100px);
}

.plus-summary p {
  padding-top: 19px;
  border-top: 1px solid rgba(250, 249, 253, 0.4);
  color: rgba(250, 249, 253, 0.85);
  font-family: var(--serif);
  font-size: 18px;
}

.plus-summary b {
  display: block;
  margin-bottom: 7px;
  color: var(--card);
  font-family: var(--display);
  font-size: var(--fs-base);
}

.pricing {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  color: var(--ink);
}

.price-plan {
  position: relative;
  min-height: 215px;
  padding: 29px;
  display: flex;
  flex-direction: column;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  /* Koyu zeminde mürekkep gölge görünmez; heart bölümündeki kart gibi
     renkli sert gölge — lavanta burada blok değil, vurgu olarak yaşıyor. */
  box-shadow: 8px 8px 0 var(--lavender);
}

.price-plan.featured {
  background: var(--yellow);
  transform: translateY(-14px);
}

.price-plan i {
  position: absolute;
  top: 20px;
  right: 18px;
  padding: 6px 9px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--ink);
  color: var(--card);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-plan p,
.price-plan span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.price-plan strong {
  margin-block: auto;
  font-size: 47px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.price-plan span {
  color: var(--muted);
}

.price-note {
  max-width: 760px;
  margin-top: 43px;
  color: rgba(250, 249, 253, 0.82);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.7;
}

.download-copy > p:not(.eyebrow) {
  max-width: 550px;
  margin-top: 30px;
  font-family: var(--serif);
  font-size: 20px;
}

.download-copy .store-button {
  margin-top: 34px;
}

.site-footer {
  padding-top: 72px;
  border-top: 3px solid var(--ink);
  background: var(--card);
  color: var(--ink);
}

.footer-main {
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 0.65fr);
  gap: 54px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.footer-brand .brand {
  width: 190px;
}

.footer-brand p {
  margin-top: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

.footer-brand .footer-about {
  max-width: 380px;
  margin-top: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  font-style: normal;
  font-family: var(--sans, inherit);
  line-height: 1.65;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
}

.footer-column > p {
  margin-bottom: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-column a,
.footer-bottom a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

.footer-store {
  min-height: 50px;
  padding: 10px 16px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: 900;
  text-align: left;
  box-shadow: 4px 4px 0 var(--ink);
}

.footer-store:hover {
  translate: 1px 1px;
  box-shadow: 3px 3px 0 var(--ink);
}

.footer-store span {
  display: block;
  margin-top: 2px;
  color: rgba(16, 16, 20, 0.65);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Üç iddia sıkı bir blok: aralarındaki boşluk küçük tutulur; kolonun
   space-between dağıtımı sayesinde kazanılan boşluk App Store düğmesi ile
   bu bloğun arasına gider, blok alt çizgide biter. */
.footer-claims {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-claims span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-bottom {
  min-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px solid rgba(16, 16, 20, 0.12);
}

.footer-bottom p {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.reveal-late {
  transition-delay: 120ms;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
  }

  .site-nav {
    gap: 18px;
  }

  .hero {
    grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
    gap: 34px;
  }

  .hero h1 {
    font-size: clamp(55px, 7.4vw, 84px);
  }

  .loose-page {
    right: -10px;
    width: 205px;
  }

  /* 1100px altında hero'nun dekoratif katmanları (telefon, uçuşan kağıt,
     yörünge etiketleri) kutudan taşıp sayfayı yatayda kaydırılabilir
     yapıyordu. Geniş ekranda taşma zaten görünür alanın içinde kalıyor. */
  .hero-art {
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .site-header {
    position: sticky;
  }

  .header-inner {
    min-height: 74px;
    grid-template-columns: auto 1fr auto;
  }

  .brand {
    width: 160px;
  }

  .menu-toggle {
    min-width: 72px;
    min-height: 44px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    justify-self: end;
    border: 2px solid var(--ink);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--mono);
    font-size: var(--fs-micro);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .menu-toggle i,
  .menu-toggle i::before {
    display: block;
    width: 14px;
    height: 2px;
    background: var(--ink);
    transition: transform 160ms ease;
  }

  .menu-toggle i {
    position: relative;
  }

  .menu-toggle i::before {
    content: "";
    position: absolute;
    top: 5px;
  }

  .menu-toggle[aria-expanded="true"] i {
    transform: rotate(45deg) translateY(2px);
  }

  .menu-toggle[aria-expanded="true"] i::before {
    top: 0;
    transform: rotate(-90deg);
  }

  .site-nav {
    position: absolute;
    top: 74px;
    right: 0;
    left: 0;
    padding: 24px var(--gutter) 28px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-bottom: 3px solid var(--ink);
    background: var(--paper);
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav a {
    min-height: 48px;
    padding: 12px;
    display: flex;
    align-items: center;
    border: 2px solid var(--ink);
    background: var(--card);
  }

  .site-nav a::after {
    display: none;
  }

  .header-store {
    display: none;
  }

  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 44.4px;
    padding-bottom: 36px;
  }

  .hero-copy {
    max-width: 720px;
    padding-bottom: 0;
  }

  .hero h1 {
    font-size: clamp(66px, 11vw, 98px);
  }

  .hero-art {
    min-height: 720px;
    /* Tablet aralığında telefon/kağıt katmanları kutudan ~46px taşıyor ve
       sayfayı yatayda 16px kaydırılabilir yapıyordu. Masaüstünde yer var,
       mobilde zaten kırpılıyor; arada kalan bu bant da kırpılsın. */
    overflow: hidden;
  }

  .phone-frame {
    width: 330px;
    height: 710px;
  }

  .loose-page {
    right: 8%;
  }

  .orbit-top { left: 7%; }
  .orbit-bottom { right: 6%; }

  .hero-footnote {
    margin-top: 12px;
  }

  .daily-grid, .habit-grid {
    grid-template-columns: 1fr;
  }

  .experience-intro {
    grid-template-columns: 1fr;
  }

  .experience-intro > p:last-child {
    grid-column: auto;
  }

  .experience-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .experience-step {
    width: 100%;
  }

  .step-read,
  .step-underline {
    min-height: auto;
  }

  .step-notebook {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .moment-copy {
    max-width: 620px;
  }

  .moment-visual {
    width: min(100%, 680px);
  }

  .six-notes {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .daily-grid {
    gap: 70px;
  }

  .daily-line {
    padding-bottom: 120px;
  }

  .daily-copy {
    max-width: 720px;
    padding-top: 0;
  }

  .feature-quote-stage {
    width: min(100%, 720px);
  }

  .feature-quote {
    width: 100%;
  }

  .source-panel {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(82%, 420px);
    margin: -24px 12px 0 auto;
  }

  .habit-grid {
    gap: 80px;
  }

  .habit-copy {
    max-width: 680px;
  }

  .home-screen {
    width: min(100%, 400px);
  }

  .plus-summary {
    gap: 40px;
  }

  .pricing {
    grid-template-columns: 1fr 1fr;
  }

  .price-plan:last-child {
    grid-column: 1 / -1;
  }

  .footer-main {
    grid-template-columns: 1.4fr repeat(2, 1fr);
  }

  .footer-coming {
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  html {
    scroll-padding-top: 74px;
  }

  .brand {
    width: 142px;
  }

  .hero {
    padding-top: 30px;
  }

  .kicker span:last-child {
    display: none;
  }

  .hero h1 {
    margin-top: 20px;
    font-size: clamp(49px, 16vw, 74px);
    letter-spacing: -0.065em;
    line-height: 0.88;
  }

  .hero-lede {
    margin-top: 26px;
    font-size: 18px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .hero-actions .store-button {
    width: 100%;
  }

  .trust-line {
    line-height: 1.8;
  }

  /* Dokunma hedefi standardı: Apple ve WCAG en az 44px yükseklik istiyor.
     Menü ve footer bağlantıları 30px'ti; yazı boyutunu büyütmeden
     tıklanabilir alanı büyütüyoruz. */
  .site-nav a,
  .footer-column a,
  .footer-bottom a,
  .brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .hero-art {
    min-height: 620px;
    margin-inline: -10px;
    /* Eskiden -90px'di: telefon görseli güven satırının ("no account ·
       reading works offline · no ads") üstüne binip metni okunmaz yapıyordu.
       Boşluğu toparlayan hafif bir çekme yeter. */
    margin-top: -16px;
    overflow: hidden;
  }

  .hero-art::before {
    top: -25px;
    right: -80px;
    font-size: 250px;
  }

  .phone-frame {
    width: 278px;
    height: 597px;
    border-radius: 42px;
    box-shadow: 11px 13px 0 var(--ink);
  }

  .phone-island {
    top: 17px;
    width: 78px;
    height: 22px;
  }

  .app-screen {
    border-radius: 33px;
  }

  .today-screen {
    padding: 14px 14px 10px;
  }

  .app-status { height: 23px; }
  .app-head { margin-top: 8px; }
  .app-head img { width: 108px; }
  .date-chip { height: 29px; }
  .today-screen > .ui-label { margin-top: 14px; }
  .screen-title { margin-bottom: 12px; font-size: 22px; }
  .quote-card { padding: 12px; }
  .quote-glyph { height: 26px; font-size: 40px; }
  .quote-card blockquote { font-size: 15px; }
  .quote-rule { margin: 11px 0 8px; }
  .app-actions { margin-top: 12px; }
  .app-actions > span { height: 37px; }
  .app-notes { margin-top: 8px; font-size: 4.8px; }
  .app-tabs { margin-top: auto; }
  .tab-item { min-height: 36px; }
  .tab-item b { font-size: 6px; }
  .tab-icon { transform: scale(0.86); }

  .loose-page {
    right: -8px;
    bottom: 64px;
    width: 158px;
    min-height: 245px;
    padding: 15px;
  }

  .loose-page q {
    font-size: 19px;
  }

  .orbit-top {
    top: 82px;
    left: 0;
  }

  .orbit-bottom {
    right: 0;
    bottom: 22px;
    max-width: 190px;
    line-height: 1.5;
  }

.experience, .daily-line, .cards-section, .habit, .plus {
    padding-top: 62px;
    padding-bottom: 64px;
  }.experience-intro h2, .cards-head h2, .habit h2, .daily-copy h2, .plus h2 {
    font-size: clamp(39px, 12vw, 57px);
    letter-spacing: -0.055em;
  }

  .experience-intro > p:last-child {
    font-size: 18px;
  }

  .experience-steps {
    margin-top: 60px;
    gap: 28px;
  }

  .experience-step {
    padding: 28px 22px;
    border-radius: 15px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .step-read,
  .step-underline {
    gap: 30px;
  }

  .step-notebook {
    padding-bottom: 36px;
  }

  .moment-copy h3 {
    font-size: 38px;
  }

  .moment-visual {
    min-height: 350px;
  }

  .morning-visual {
    box-shadow: 6px 6px 0 var(--ink);
  }

  .page-slip {
    width: 82%;
    min-height: 225px;
    padding: 21px;
  }

  .page-slip q {
    font-size: 28px;
  }

  .gesture-visual {
    min-height: 330px;
    padding: 35px 25px;
  }

  .gesture-quote {
    font-size: 36px;
  }

  .gesture-visual svg {
    height: 48px;
    margin-top: -25px;
  }

  .notebook-visual {
    min-height: 400px;
  }

  .notebook-page {
    width: 82%;
    min-height: 170px;
    padding: 18px 18px 16px 35px;
  }

  .notebook-page q {
    font-size: 18px;
  }

  .page-b { top: 108px; }

  .feature-quote {
    padding: 27px 22px;
    box-shadow: 8px 8px 0 var(--yellow);
  }

  .feature-mark {
    height: 54px;
    font-size: 76px;
  }

  .feature-quote blockquote {
    font-size: 34px;
  }

  .feature-credit {
    align-items: flex-start;
    flex-direction: column;
  }

  .source-panel {
    --source-tilt: 0deg;
    width: calc(100% - 10px);
    margin: -12px 0 0 auto;
    padding: 18px;
    box-shadow: 6px 6px 0 var(--lavender);
  }

  .cards-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .carousel-actions {
    align-self: flex-end;
  }

  .card-track {
    margin-top: 48px;
    grid-auto-columns: min(78vw, 300px);
    gap: 22px;
  }

  .share-card blockquote {
    font-size: 29px;
  }

  .habit-copy > p:not(.eyebrow, .habit-note) {
    font-size: 18px;
  }

  .home-screen {
    width: min(100%, 340px);
    padding: 18px;
    border-radius: 46px;
    box-shadow: 10px 10px 0 var(--ink);
  }

  .widget-card {
    margin-top: 25px;
    border-radius: 26px;
  }

  .home-icons {
    margin-top: 35px;
    gap: 24px 18px;
  }

  .plus-summary,
  .pricing {
    grid-template-columns: 1fr;
  }

  .price-plan.featured {
    transform: none;
  }

  .price-plan:last-child {
    grid-column: auto;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 50px 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-coming {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    padding-block: 23px;
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .site-nav {
    grid-template-columns: 1fr;
  }

  .hero-art {
    margin-inline: -18px;
  }

  .phone-frame {
    width: 258px;
    height: 555px;
  }

  .screen-title {
    font-size: 19px;
  }

  .quote-card blockquote {
    font-size: 14px;
  }

  .source-panel dl {
    grid-template-columns: 1fr;
  }

  .loose-page {
    width: 136px;
    min-height: 220px;
  }

  .loose-page q {
    font-size: 16px;
  }

}

@media (prefers-reduced-motion: no-preference) {
  .js .step-read .page-slip {
    opacity: 0;
    transform: translateY(20px) rotate(-3deg);
    transition: opacity 500ms ease 180ms, transform 650ms ease 180ms;
  }

  .js .step-read.is-visible .page-slip {
    opacity: 1;
    transform: translateY(0) rotate(-3deg);
  }

  .js .step-underline .gesture-visual path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 800ms ease 220ms;
  }

  .js .step-underline.is-visible .gesture-visual path {
    stroke-dashoffset: 0;
  }

  .js .step-notebook .notebook-page {
    opacity: 0;
    transform: translateY(22px) rotate(var(--page-rotation));
    transition: opacity 420ms ease, transform 600ms ease;
  }

  .js .step-notebook.is-visible .notebook-page {
    opacity: 1;
    transform: translateY(0) rotate(var(--page-rotation));
  }

  .js .step-notebook .page-b {
    transition-delay: 100ms;
  }

  .js .step-notebook .page-c {
    transition-delay: 200ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}