* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--inci);
  font-family: var(--font-govde);
  line-height: 1.6;
}
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--font-baslik); font-weight: 400; }
h1 {
  font-size: clamp(4.5rem, 9vw, 9rem);
  font-style: italic;
  line-height: 0.9;
  padding-block-end: 0.22em;
}
h2 { font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.05; }
p { overflow-wrap: break-word; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.3em; }
button {
  min-height: 44px;
  border: 1px solid var(--gul-inci);
  padding: 0.65em 1.4em;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
:focus-visible { outline: 2px solid var(--gul-inci); outline-offset: 3px; }
.ust {
  position: absolute;
  z-index: 2;
  top: 0;
  left: calc((100% - var(--olcu)) / 2);
  width: var(--olcu);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 1.25rem;
}
.wordmark {
  width: fit-content;
  font-family: var(--font-baslik);
  font-size: 2rem;
  letter-spacing: 0.2em;
  text-decoration: none;
}
.konsept { grid-row: 2; grid-column: 1 / -1; color: var(--inci-soluk); font-size: 0.75rem; }
.sepet { grid-column: 2; grid-row: 1; color: var(--gul-inci); background: var(--zemin); font-size: 0.875rem; }
.sahne { height: auto; }
.sahne-yapiskan, .duragan-hareket { display: none; }
.js .sahne { height: var(--sahne-boy); }
.js .sahne-yapiskan { display: block; position: sticky; top: 0; height: 100svh; }
canvas { display: block; width: 100%; height: 100%; }
.anlati {
  position: absolute;
  left: calc((100% - var(--olcu)) / 2);
  bottom: 10svh;
  width: var(--olcu);
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--sure-anlati) var(--egri-cikis), transform var(--sure-anlati) var(--egri-cikis);
}
.anlati[data-gorunur="true"] { opacity: 1; transform: translateY(0); }
.anlati h2 { max-width: 10ch; padding-block-end: 0.3em; }
.anlati p { max-width: 32ch; text-wrap: pretty; }
.kaydir {
  position: absolute;
  left: calc((100% - var(--olcu)) / 2);
  bottom: 3svh;
  color: var(--inci-soluk);
  font-size: 0.75rem;
  transition: opacity var(--sure-anlati) var(--egri-cikis);
}
.kaydir span { display: inline-block; margin-inline-start: 1em; }
.kaydir[data-gorunur="false"] { opacity: 0; }
.duragan { width: var(--olcu); margin-inline: auto; padding-block: 9rem 3rem; }
.duragan figure + figure { margin-block-start: 4rem; }
.duragan figcaption { padding-block: 1.5rem; max-width: 40rem; }
.duragan h2 { margin-block-end: 0.4em; }
.urun, .ayrinti, footer { width: var(--olcu); margin-inline: auto; }
.urun { display: grid; align-items: center; gap: 2rem; padding-block: 5rem; border-top: 1px solid var(--sampanya); }
.urun-bilgi { min-width: 0; }
.urun-bilgi > p { margin-block-start: 1rem; color: var(--inci-soluk); }
.fiyat-satiri { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem; margin-block: 2rem; }
.fiyat { font-family: var(--font-baslik); font-size: 3rem; line-height: 1; }
.ornek { color: var(--inci-soluk); font-size: 0.75rem; }
.ekle { background: var(--gul-inci); color: var(--zemin); min-width: 12rem; }
.durum { min-height: 3.2em; font-size: 0.875rem; }
.ayrinti { display: grid; gap: 3rem; padding-block: 3rem 6rem; }
.ayrinti article { min-width: 0; border-top: 1px solid var(--sampanya); }
.ayrinti h2 { font-size: 2.5rem; margin-block: 1.5rem 0.5rem; }
.ayrinti p { color: var(--inci-soluk); max-width: 32ch; }
footer { border-top: 1px solid var(--sampanya); padding-block: 2rem 3rem; font-size: 0.875rem; }
footer p { color: var(--inci-soluk); max-width: 65ch; }
footer a { display: inline-flex; align-items: center; min-height: 44px; margin-block-start: 1rem; }
@media (min-width: 900px) {
  .ust { display: flex; gap: 2rem; padding-block: 1.5rem; }
  .konsept { margin-inline-start: auto; }
  .anlati { bottom: 17svh; }
  .urun { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; padding-block: 7rem; }
  .ayrinti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}
@media (min-aspect-ratio: 1/1) {
  .anlati { width: calc(36vw - (100vw - var(--olcu)) / 2); }
  .anlati h2 { max-width: 12ch; }
}
@media (max-aspect-ratio: 1/1) {
  .anlati { top: 7.5rem; bottom: auto; }
  .anlati h2 { max-width: 14ch; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  .anlati { top: 6.25rem; }
  h1 { font-size: 3.5rem; }
  .anlati h2 { font-size: 2rem; }
  .anlati p { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sahne { height: auto; }
  .js .sahne-yapiskan, canvas { display: none; }
  .js .duragan-hareket { display: block; }
  *, *::before, *::after { transition: none; animation: none; }
}