/* Daytoon — daytoon.co
 *
 * Tokens are the app's own (docs/tasarim-dili.md on master, "Günce" direction).
 * They are not re-decided here: the site and the app have to look like the same
 * product, and the share page a reader lands on already uses these exact hexes.
 */

:root {
  /* Kâğıt & mürekkep */
  --ink: #3c332a;
  --paper: #fbf5ec;
  --card: #ffffff;
  --sunken: #f3e9dc;
  --raised: #ede0cd;
  --muted: #7a6c5c;
  --outline: #a69582;
  --hairline: #e9dcc8;

  /* Tek sinyal */
  --coral: #f0785a;
  --coral-press: #d9633f;
  --on-coral: #ffffff;

  /* İkincil, dekoratif — eylem değil */
  --sage: #6f8f63;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow-card: 0 10px 24px -16px rgba(60, 51, 42, 0.35);
  --shadow-lift: 0 22px 48px -28px rgba(60, 51, 42, 0.45);
  --shadow-coral: 0 10px 24px -10px rgba(240, 120, 90, 0.5);

  --display: "Fredoka", ui-sans-serif, system-ui, sans-serif;
  --body: "Lora", ui-serif, Georgia, serif;
  --meta: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* Koyu tema: uygulamanın kendi dark mode'uyla aynı mantık — token'lar
   yeniden tanımlanır, bileşen kodu değişmez. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2e8da;
    --paper: #1e1813;
    --card: #271f19;
    --sunken: #2c241d;
    --raised: #342a22;
    --muted: #b6a794;
    --outline: #6d5f50;
    --hairline: #3b322a;
    --shadow-card: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 22px 48px -28px rgba(0, 0, 0, 0.7);
  }
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

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

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Yapı ---------- */

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

section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

.eyebrow {
  font-family: var(--meta);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.lede {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  color: var(--muted);
  max-width: var(--measure);
}

/* ---------- Butonlar ---------- */

.btn {
  font-family: var(--meta);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--coral);
  color: var(--on-coral);
  box-shadow: var(--shadow-coral);
}

.btn-primary:hover {
  background: var(--coral-press);
}

.btn-quiet {
  border-color: var(--hairline);
  color: var(--ink);
}

.btn-quiet:hover {
  background: var(--sunken);
}

/* ---------- Başlık ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.masthead > .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
}

.wordmark img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Dil seçimi: iki dil olduğu için açılır menü değil, iki bağlantı. Aktif olan
   tıklanabilir değil — kullanıcı zaten orada. */
.lang {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--meta);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lang a {
  text-decoration: none;
  color: var(--muted);
  padding: 0.25rem 0.1rem;
}

.lang a:hover {
  color: var(--ink);
}

.lang [aria-current="true"] {
  color: var(--ink);
}

.lang span[aria-hidden] {
  color: var(--hairline);
}

.masthead nav {
  display: none;
  gap: 1.75rem;
  font-family: var(--meta);
  font-size: 0.875rem;
  font-weight: 600;
}

.masthead nav a {
  text-decoration: none;
  color: var(--muted);
}

.masthead nav a:hover {
  color: var(--ink);
}

@media (min-width: 880px) {
  .masthead nav {
    display: flex;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5rem);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 940px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--coral);
}

.hero .lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.2rem;
}

.hero-note {
  font-family: var(--meta);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 1.1rem;
}

/* Dönüşümün kendisi: solda yazılan satır, sağda çizilmiş sayfa. Ürünün tek
   cümlesi bu, o yüzden hero'da anlatılmıyor — gösteriliyor. */
.transform {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .transform {
    grid-template-columns: minmax(0, 0.88fr) auto minmax(0, 1fr);
    align-items: center;
  }
}

.entry {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.5rem 1.6rem;
}

.entry .date {
  font-family: var(--meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.entry p {
  font-size: 1rem;
  line-height: 1.75;
}

.entry .cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--coral);
  vertical-align: -0.16em;
  margin-left: 2px;
  animation: blink 1.15s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

.arrow {
  display: grid;
  place-items: center;
  color: var(--outline);
  transform: rotate(90deg);
}

@media (min-width: 560px) {
  .arrow {
    transform: none;
  }
}

.page-frame {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--sunken);
  aspect-ratio: 1;
}

.page-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Görsel gelene kadarki yer: boş bir kutu değil, ne geleceğini söyleyen bir
   yüzey — üretim sırasında hangi slotun boş olduğu sayfaya bakınca görünsün. */
.slot {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 14px,
      color-mix(in srgb, var(--outline) 12%, transparent) 14px 15px
    ),
    var(--sunken);
  color: var(--muted);
  font-family: var(--meta);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: 100%;
}

/* ---------- Adımlar ---------- */

.steps {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Numara burada süs değil: bu üçü gerçekten sıralı — yazmadan çizilmiyor,
   çizilmeden paylaşılmıyor. */
.step {
  border-top: 2px solid var(--ink);
  padding-top: 1.25rem;
}

.step .n {
  font-family: var(--meta);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--coral);
  display: block;
  margin-bottom: 0.7rem;
}

.step h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- Stiller ---------- */

.styles-band {
  background: var(--sunken);
  border-block: 1px solid var(--hairline);
}

.style-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.75rem;
}

@media (min-width: 720px) {
  .style-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.style {
  background: var(--card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.style .art {
  aspect-ratio: 1;
  background: var(--sunken);
}

.style .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.style figcaption {
  font-family: var(--meta);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.85rem 1rem 1rem;
}

/* ---------- Özellikler ---------- */

.feature-grid {
  display: grid;
  gap: 1.1rem;
  margin-top: 3rem;
}

@media (min-width: 680px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  background: var(--card);
}

.feature h3 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.feature p {
  color: var(--muted);
  font-size: 0.975rem;
}

/* ---------- Örnek gün: sayfa kaydırmasına bağlı yatay şerit ---------- */

/* Uygulama dikey okunuyor; buradaki yatay akış sitenin kendi anlatım biçimi.
   Kareler elle sürüklenmiyor: bölüm ekrana yapışıyor ve sayfa aşağı
   kaydırıldıkça şerit yana akıyor, yani bir günü okumak tek bir hareket.

   JS çalışmazsa (ya da kullanıcı hareketi azalttıysa) aynı şerit sıradan bir
   yatay kaydırıcıya düşüyor — içerik hiçbir durumda erişilemez kalmıyor. */
.strip {
  background: var(--sunken);
  border-block: 1px solid var(--hairline);
}

.strip-head {
  padding-bottom: 2rem;
}

/* Kaydırma çubuğu her durumda gizli: şerit zaten sayfa kaydırmasıyla
   sürülüyor, altta duran ikinci bir çubuk hem gereksiz hem de o anda neyin
   sürükleneceği konusunda kafa karıştırıcı. */
.strip-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.strip-track::-webkit-scrollbar {
  display: none;
}

.strip-frame {
  flex: none;
  width: clamp(230px, 68vw, 330px);
  margin: 0;
}

.strip-frame .art {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.strip-frame .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.strip-frame figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.75rem;
  font-family: var(--meta);
  font-size: 0.78rem;
  color: var(--muted);
}

.strip-frame figcaption b {
  font-weight: 800;
  color: var(--outline);
  font-variant-numeric: tabular-nums;
}

.strip-hint {
  font-family: var(--meta);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
  padding-top: 1.25rem;
}

/* --- JS kurulduğunda: yapışan sahne + sayfa kaydırmasıyla sürülen şerit --- */

.strip.is-pinned {
  padding-block: 0;
}

.strip.is-pinned .strip-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  padding-block: clamp(2rem, 5vh, 4rem);
}

/* Yapışmış hâlde şerit artık kendi kendine kaydırılmıyor: JS onu sürüyor. */
.strip.is-pinned .strip-track {
  overflow: visible;
  will-change: transform;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* Kare genişliği YÜKSEKLİKTEN türetilmiyor.
   İlk sürüm kareyi flex:1 + aspect-ratio ile yüksekliğe göre boyutluyordu; o
   zincir çöktüğünde kareler sıfır genişlik veriyor, şerit "zaten sığıyor" gibi
   ölçülüyor ve yapışma kapanıyordu. Sonuç, touchpad'le yatay sürüklenebilen
   ama fare tekeriyle hiç kımıldamayan bir şeritti. Genişlik artık doğrudan
   yazılı; svh sınırı kısa ekranda karenin taşmasını engelliyor. */
.strip.is-pinned .strip-frame {
  width: min(clamp(240px, 30vw, 420px), 58svh);
}

.strip.is-pinned .strip-hint {
  padding-top: 0;
}

/* ---------- Gizlilik ---------- */

.trust {
  background: var(--ink);
  color: var(--paper);
}

.trust .eyebrow,
.trust .lede {
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

.trust h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  max-width: 18ch;
}

.trust-list {
  list-style: none;
  padding: 0;
  margin: 2.75rem 0 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .trust-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.trust-list li {
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  padding-top: 1.1rem;
}

.trust-list strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.4rem;
}

.trust-list span {
  color: color-mix(in srgb, var(--paper) 66%, transparent);
  font-size: 0.975rem;
}

/* ---------- Kapanış + altbilgi ---------- */

.closing {
  text-align: center;
}

.closing h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  max-width: 16ch;
  margin-inline: auto;
}

.closing .lede {
  margin-inline: auto;
  margin-top: 1rem;
}

.end-mark {
  width: 2.5rem;
  height: 3px;
  border-radius: 999px;
  background: var(--coral);
  margin: 0 auto 2.5rem;
}

footer {
  border-top: 1px solid var(--hairline);
  padding-block: 2.5rem 3rem;
  font-family: var(--meta);
  font-size: 0.875rem;
  color: var(--muted);
}

footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
}

footer nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
}

footer a {
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

/* ---------- Hukuki sayfalar ---------- */

.legal {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.legal .shell {
  width: min(760px, 100%);
}

.legal h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin-bottom: 0.6rem;
}

.legal .updated {
  font-family: var(--meta);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 0.75rem;
}

.legal p,
.legal li {
  color: var(--ink);
}

.legal p + p {
  margin-top: 1rem;
}

.legal ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}

.legal .back {
  font-family: var(--meta);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  display: inline-block;
  margin-bottom: 2rem;
}