/*
  Conscious · Rutin Seti sayfası
  Sözleşme: DESIGN.md (Bilge · Yön A · Etiket). Önce 375 px.
  Web ölçeği §3: gövde ≥ 17 px, dipnot ≥ 14 px, düğme ≥ 52 px.
  Renk çiftleri §2'deki izinli listeden: Mürekkep/Kâğıt 16,0 · Mühür/Kâğıt 9,1 · Mürekkep/Yulaf 13,5 · Kâğıt/Mürekkep 16,0 · Kurşun/Kâğıt 5,5.
*/

:root {
  --kagit: #FAF7F2;
  --yulaf: #EDE3D6;
  --murekkep: #1F1B17;
  --muhur: #2F4A3A;
  --kursun: #6B645B;

  --serif: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --kenar: 20px;
  --sutun: 720px;
  --cizgi: 1.5px solid var(--kursun);
}

/* ---------- Temel ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 17px/1.55 var(--sans);
}

img, video { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--muhur); outline-offset: 3px; }

h1, h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.015em;
}
h1 { font-size: 44px; line-height: 1.02; }
h2 { font-size: 30px; line-height: 1.1; }
@media (min-width: 720px) { h1 { font-size: 56px; } }

.sutun { max-width: var(--sutun); margin: 0 auto; padding: 0 var(--kenar); }
.olcu { max-width: 34em; }

section { padding-top: 64px; }
/* Sabit sepet satırı .devam bloğuyla sınırlı: bloğun üst boşluğu dışarıda (margin) kalsın ki satır girişin ilk ekranında görünmesin. */
.devam { margin-top: 64px; }
.devam > section:first-child { padding-top: 0; }
.bolum-giris { margin-top: 12px; }

/* ---------- Üst satır ---------- */

.ust { padding-top: 14px; padding-bottom: 10px; }
.imza { font: 400 26px/1 var(--serif); letter-spacing: -0.01em; }

/* ---------- §5 Düğme: Yulaf zemin, Mürekkep yazı, Mono; Kâğıt üstünde Mürekkep sınır ---------- */

.dugme {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 12px 20px;
  background: var(--yulaf); color: var(--murekkep);
  border: 1.5px solid var(--murekkep); border-radius: 0;
  font: 400 17px/1.2 var(--mono);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 1 · Giriş ---------- */

.giris { padding-top: 0; }
.giris figure { margin: 0 calc(var(--kenar) * -1) 18px; }
@media (min-width: 720px) { .giris figure { margin: 0 0 22px; } }
.giris figure img { width: 100%; aspect-ratio: 1080 / 700; object-fit: cover; object-position: 50% 48%; }
.alt-baslik { margin-top: 8px; font-size: 22px; line-height: 1.3; }
.fiyat { margin-top: 12px; font-size: 22px; line-height: 1.3; }
.fiyat b, .bar b { font-weight: 500; color: var(--muhur); white-space: nowrap; }
.son { margin-top: 4px; }
.giris .dugme { margin-top: 16px; }
.kargo { margin-top: 10px; font-size: 15px; line-height: 1.5; }

/* ---------- 2 · Rutin: sayfanın tek iddialı öğesi, büyük sıra numaraları ---------- */

.adimlar { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 36px; }
.adim { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
@media (min-width: 560px) { .adim { grid-template-columns: 200px 1fr; gap: 28px; } }
.adim .gorsel { aspect-ratio: 1; overflow: hidden; background: var(--yulaf); }
.adim .gorsel img, .adim .gorsel video { width: 100%; height: 100%; object-fit: cover; }
.adim h3 { margin: 0; font-weight: 400; }
.adim h3 .no {
  display: block;
  font: 400 64px/0.85 var(--serif); font-optical-sizing: auto; letter-spacing: -0.03em;
}
@media (min-width: 560px) { .adim h3 .no { font-size: 88px; } }
.adim h3 .ad { display: block; margin-top: 10px; font: 500 17px/1.3 var(--sans); }
.adim dl { margin-top: 10px; }
.adim dt { font: 400 14px/1.4 var(--mono); }
.adim dd + dt { margin-top: 8px; }
.not { margin-top: 32px; padding: 14px 16px; background: var(--yulaf); }

/* ---------- 3 · Ürünler ---------- */

.urunler { list-style: none; margin: 24px 0 0; padding: 0; }
.urun { padding: 18px 0; border-top: var(--cizgi); }
.urun:last-child { border-bottom: var(--cizgi); }
.urun h3 { display: flex; align-items: baseline; gap: 14px; margin: 0; font-weight: 400; }
.urun h3 .no { min-width: 50px; font: 400 40px/0.95 var(--serif); letter-spacing: -0.02em; }
.urun h3 .ad { font: 500 19px/1.3 var(--sans); }
.urun dl { margin: 8px 0 0 64px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.urun dt { font: 400 14px/1.75 var(--mono); }
.urun .tutar { font-weight: 500; }
.ek { margin-top: 18px; }

/* ---------- 4 · Etiketi okuyalım ---------- */

.etiket { list-style: none; margin: 24px 0 0; padding: 0; }
.etiket li { display: grid; gap: 4px; padding: 14px 0; border-top: var(--cizgi); }
.etiket li:last-child { border-bottom: var(--cizgi); }
.etiket .ad { font: 400 15px/1.45 var(--mono); }
.etiket .hangi { font: 400 14px/1.4 var(--mono); }
@media (min-width: 640px) {
  .etiket li { grid-template-columns: 15em 1fr 6em; gap: 16px; align-items: baseline; }
  .etiket .hangi { text-align: right; }
}

/* ---------- 5 · Nil'in notu ---------- */

.nil figure { margin-top: 24px; }
.nil figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nil .metin { margin-top: 20px; display: grid; gap: 12px; }
.nil blockquote { margin-top: 28px; }
.nil blockquote p { font: 400 28px/1.25 var(--serif); letter-spacing: -0.01em; }
.nil blockquote footer { margin-top: 10px; font-size: 15px; }

/* ---------- 6 · Sorular ---------- */

.sorular { margin-top: 20px; }
details { border-top: var(--cizgi); }
details:last-of-type { border-bottom: var(--cizgi); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 12px 0;
  font-weight: 500; list-style: none; cursor: pointer;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font: 400 24px/1 var(--mono); }
details[open] summary::after { content: "−"; }
.cevap { display: grid; gap: 8px; padding-bottom: 16px; }
.liste { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.liste dt { font: 400 14px/1.75 var(--mono); }
/* Bağlantı da dokunma alanı: en az 44 px (denetim, madde 1) */
.git { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.yer-tutucu { justify-self: start; padding: 2px 6px; background: var(--yulaf); font: 400 15px/1.45 var(--mono); }

/* ---------- Altta sabit sepet satırı (yalnız CSS) ----------
   .devam bloğunun son çocuğu, position: sticky; bottom: 0.
   Blok ekrandayken altta yapışır; bloğun üstünden yukarı çıkamadığı için girişin ilk ekranında görünmez,
   alt bilgiye gelince blokla birlikte kayar. */

.bar {
  position: sticky; bottom: 0; z-index: 10;
  margin: 0 calc(var(--kenar) * -1);
  padding: 10px var(--kenar) calc(10px + env(safe-area-inset-bottom));
  background: var(--kagit);
  border-top: 1.5px solid var(--murekkep);
  display: flex; align-items: center; gap: 14px;
}
@media (min-width: 720px) { .bar { margin: 0; padding-left: 0; padding-right: 0; } }
.bar .ozet { flex: 1; font-size: 15px; line-height: 1.3; }
.bar .dugme { width: auto; flex: none; }

/* ---------- "Sepete ekle" notu: HTML popover, yalnız CSS ---------- */

.duyuru {
  inset: auto var(--kenar) 96px;
  max-width: calc(var(--sutun) - 2 * var(--kenar));
  margin: 0 auto; padding: 14px 16px;
  border: 0;
  background: var(--murekkep); color: var(--kagit);
  font: 400 17px/1.45 var(--sans);
}
.duyuru::backdrop { background: transparent; }

/* ---------- 7 · Alt bilgi ---------- */

footer.alt { margin-top: 64px; padding: 28px 0 40px; border-top: var(--cizgi); font: 400 14px/1.6 var(--mono); }
footer.alt p + p { margin-top: 6px; }

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