/* Tost Ustası / Toastie Master — tanıtım sitesi. Fikir: sayfa, dükkânın tebeşirli menü tahtası. */
:root {
  --tahta: #1f3a2f;        /* kara tahta yeşili: ana zemin */
  --tahta-2: #2a4a3c;      /* bir ton açığı */
  --tebesir: #eef0ea;      /* tahta üstündeki yazı */
  --tebesir-2: #c9d6c8;    /* ikincil yazı (tam okunur) */
  --kagit: #e6e4dd;        /* kâğıt sayfalar */
  --murekkep: #3b2212;     /* kâğıttaki yazı: logonun kahvesi */
  --murekkep-2: #6a4a33;
  --altin: #f5a623;        /* tek vurgu: altın kıvam */
  --altin-ink: #3b2212;
  --tente: #c8342b;        /* tente kırmızısı */
  --bogaz: #2a63a0;        /* Boğaz mavisi */
  --cerceve: #6b3f22;      /* tahtanın ahşap çerçevesi */
  --kenar: clamp(16px, 3vw, 40px);
  --step-small: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  --step-dev: clamp(3.25rem, 1.6rem + 7vw, 8.5rem);
  --yaz: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--tahta); color: var(--tebesir); font: 500 var(--step-body)/1.5 var(--yaz); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--altin); outline-offset: 3px; }
::selection { background: var(--altin); color: var(--altin-ink); }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
p { margin: 0; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Düğme: tek biçim, tam yuvarlak */
.dugme { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.7em 1.4em; border-radius: 999px; background: var(--altin);
  color: var(--altin-ink); font: 800 var(--step-body)/1 var(--yaz); text-decoration: none; border: 0; cursor: pointer;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background-color 160ms; }
.dugme:hover { transform: translateY(-2px); background: #ffb83d; }
.dugme:active { transform: translateY(1px) scale(.98); }
.dugme.ikinci { background: var(--tahta-2); color: var(--tebesir); }
.dugme.ikinci:hover { background: #355a49; }

/* Üst çubuk */
.ust { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--kenar); position: relative; z-index: 5; }
.ust .marka img { height: 56px; width: auto; }
.ust nav { display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; font-weight: 700; font-size: var(--step-small); }
.ust nav a { text-decoration: none; padding: 6px 2px; transition: color 160ms; }
.ust nav a:hover { color: var(--altin); }
.ust .dil { background: var(--tahta-2); border-radius: 999px; padding: 6px 14px; }
@media (max-width: 860px) { .ust nav .bolum { display: none; } .ust .marka img { height: 44px; } }

/* Kahraman: dükkân önü ve menü tahtası */
.kahraman { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; background: #8fc3e6; overflow: hidden; }
.kahraman .sokak { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.kahraman .ic { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px);
  align-items: center; padding: 8px var(--kenar) clamp(32px, 5vw, 72px); }
.tahta { background: var(--tahta); border: clamp(14px, 1.6vw, 22px) solid var(--cerceve); border-radius: 18px; padding: clamp(24px, 3.4vw, 52px);
  max-width: 820px; }
.tahta h1 { font-size: var(--step-head); color: var(--tebesir); }
.tahta .giris { font-size: var(--step-lead); color: var(--tebesir); margin-top: 18px; max-width: 32ch; line-height: 1.35; }
.menu { list-style: none; padding: 0; margin: clamp(20px, 2.6vw, 36px) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px); row-gap: 4px; font-size: var(--step-lead); font-weight: 700; }
.menu li { display: flex; gap: 10px; align-items: baseline; }
.menu li::after { content: ""; order: 1; flex: 1; border-bottom: 4px dotted var(--tebesir-2); transform: translateY(-0.3em); }
.menu li span { order: 2; color: var(--altin); }
.menu .baslik { grid-column: 1 / -1; font-size: var(--step-small); color: var(--tebesir-2); }
.menu .baslik::after { display: none; }
.eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.eylem small { font-size: var(--step-small); color: var(--tebesir-2); }

/* Canlı şey: tost makinesi */
.makine { background: var(--kagit); color: var(--murekkep); border-radius: 18px; padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 14px; justify-items: center;
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); max-width: 460px; justify-self: end; width: 100%; }
.makine h2 { font-size: var(--step-lead); text-align: center; }
.makine .sahne { position: relative; width: min(100%, 340px); aspect-ratio: 1; }
.makine .sahne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.makine .tost-gor { transform: scale(.72) translateY(8%); filter: brightness(1.45) saturate(.35); transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.makine.pisiyor .tost-gor { transform: scale(.72) translateY(4%); }
.makine .cubuk { width: 100%; height: 18px; border-radius: 999px; background: #e5d6b8; overflow: hidden; position: relative; }
.makine .cubuk i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--altin); border-radius: 999px; }
.makine .cubuk::after { content: ""; position: absolute; left: 55%; width: 22%; inset-block: 0; background: #d6b98a; border-radius: 999px; }
.makine .sonuc { min-height: 3em; text-align: center; font-weight: 700; font-size: var(--step-body); line-height: 1.3; }
.makine .bas { user-select: none; -webkit-user-select: none; touch-action: none; }
.makine.pisiyor .bas { transform: scale(.96); }

/* Bölüm aralığı */
.bolum-ara { padding: clamp(96px, 12vw, 200px) var(--kenar); }

/* Vitrin: geniş oyun görüntüsü (kırpılmaz), yanında sekmeler ve yazı */
.vitrin { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.vitrin .kare { width: 100%; height: auto; aspect-ratio: 1800 / 828; object-fit: cover; border-radius: 18px; }
.vitrin .yan { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.sekmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.sekmeler button { font: 700 var(--step-small)/1 var(--yaz); color: var(--tebesir); background: var(--tahta-2); border: 0; border-radius: 999px;
  padding: 10px 16px; cursor: pointer; transition: background-color 160ms, color 160ms, transform 160ms; }
.sekmeler button:hover { transform: translateY(-1px); }
.sekmeler button[aria-selected="true"] { background: var(--altin); color: var(--altin-ink); }
.vitrin h2 { font-size: var(--step-head); }
.vitrin .metin p { margin-top: 20px; max-width: 34ch; font-size: var(--step-lead); line-height: 1.35; color: var(--tebesir); }
.vitrin .hucre { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vitrin .hucre a { display: flex; align-items: center; justify-content: center; min-height: 64px; border-radius: 999px; text-decoration: none;
  font-weight: 800; text-align: center; padding: 0 12px; transition: transform 160ms; }
.vitrin .hucre a:hover { transform: translateY(-2px); }
.vitrin .hucre a:first-child { background: var(--altin); color: var(--altin-ink); }
.vitrin .hucre a:last-child { background: var(--tahta-2); }

/* Yaprak yaprak üst üste binen renkli sayfalar */
.yapraklar-baslik { padding: 0 var(--kenar) 48px; font-size: var(--step-head); }
.yaprak { position: relative; border-radius: 28px 28px 0 0; margin-top: -28px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(24px, 4vw, 72px); padding: clamp(36px, 4vw, 56px) var(--kenar) 0; overflow: hidden; align-items: end; }
.yaprak:nth-of-type(1) { margin-top: 0; background: var(--tente); color: #f4f4f1; }
.yaprak:nth-of-type(2) { background: var(--bogaz); color: #f2f6fb; }
.yaprak:nth-of-type(3) { background: var(--altin); color: var(--murekkep); }
.yaprak:nth-of-type(4) { background: var(--kagit); color: var(--murekkep); }
.yaprak .yazi-kutu { align-self: start; padding-bottom: 64px; }
.yaprak h3 { font-size: clamp(32px, 3.6vw, 56px); }
.yaprak .yazi { margin-top: 20px; font-size: var(--step-lead); line-height: 1.38; max-width: 30ch; }
/* Kişiler: belden yukarı çizimler, sütuna eşit bölünür, alt kenara oturur */
.yaprak .kisiler { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 300px); justify-content: center; align-items: end; gap: 0; padding-top: 24px; }
.yaprak .kisiler img { width: 100%; height: auto; }
/* Ekran görüntüsü ya da video: sütunun tamamını kaplar, alt kenara oturur */
.yaprak .ekran { width: 100%; height: auto; border-radius: 18px 18px 0 0; display: block; margin-top: 24px; }

/* Abi'nin mektubu: kâğıt, tırtıklı alt kenar, koparılan şerit */
.mektup-zemin { background: var(--bogaz); }
.mektup { width: min(100%, 680px); margin: 0 auto; }
.mektup .kagit { background: var(--kagit); color: var(--murekkep); padding: clamp(28px, 5vw, 60px); padding-bottom: 72px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 97.5% 100%, 95% calc(100% - 18px), 92.5% 100%, 90% calc(100% - 18px), 87.5% 100%, 85% calc(100% - 18px), 82.5% 100%, 80% calc(100% - 18px), 77.5% 100%, 75% calc(100% - 18px), 72.5% 100%, 70% calc(100% - 18px), 67.5% 100%, 65% calc(100% - 18px), 62.5% 100%, 60% calc(100% - 18px), 57.5% 100%, 55% calc(100% - 18px), 52.5% 100%, 50% calc(100% - 18px), 47.5% 100%, 45% calc(100% - 18px), 42.5% 100%, 40% calc(100% - 18px), 37.5% 100%, 35% calc(100% - 18px), 32.5% 100%, 30% calc(100% - 18px), 27.5% 100%, 25% calc(100% - 18px), 22.5% 100%, 20% calc(100% - 18px), 17.5% 100%, 15% calc(100% - 18px), 12.5% 100%, 10% calc(100% - 18px), 7.5% 100%, 5% calc(100% - 18px), 2.5% 100%, 0 calc(100% - 18px)); }
.mektup .portre { width: 76px; height: 76px; border-radius: 50%; background: #f6cf8e; object-fit: contain; object-position: 50% 15%; }
.mektup .kagit p { margin-top: 1.1em; font-size: var(--step-body); line-height: 1.6; max-width: 52ch; }
.mektup .imza { margin-top: 1.6em; font-size: var(--step-lead); font-weight: 800; }
.mektup .imza small { display: block; font-size: var(--step-small); font-weight: 600; color: var(--murekkep-2); }
.mektup mark { background: var(--altin); color: var(--murekkep); padding: 0 .2em; border-radius: 4px; }
.mektup .serit { margin-top: 14px; background: var(--kagit); color: var(--murekkep); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  justify-content: space-between; padding: 20px clamp(20px, 4vw, 40px); border-radius: 0 0 14px 14px; border-top: 6px dotted var(--bogaz); }
.mektup .serit a { font-weight: 800; font-size: var(--step-lead); }

/* Sorular: arka sayfa notları gibi düz okuma */
.sorular { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 32px; }
.sorular h2 { grid-column: 1 / 4; font-size: clamp(28px, 2.6vw, 40px); }
.sorular .metin { grid-column: 5 / -1; columns: 2; column-gap: 56px; }
.sorular .metin p { break-inside: avoid; margin-bottom: 22px; line-height: 1.55; color: var(--tebesir); }
.sorular .metin b { font-weight: 800; color: var(--altin); }

/* Kapanış cümlesi */
.kapanis { background: var(--altin); color: var(--murekkep); }
.kapanis p.cumle { font-size: var(--step-head); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; }
.kapanis .dugme { background: var(--murekkep); color: var(--kagit); font-size: inherit; padding: 0.08em 0.5em 0.12em; vertical-align: baseline; }
.kapanis .dugme:hover { background: #5a3420; }
.kapanis .not { margin-top: 24px; font-size: var(--step-body); color: var(--murekkep-2); font-weight: 600; }

/* Alt kısım: önce ad */
.alt { background: var(--murekkep); color: var(--kagit); overflow: hidden; padding: clamp(72px, 9vw, 140px) var(--kenar) 32px; }
.alt .ad { font-size: clamp(64px, 15vw, 260px); font-weight: 800; line-height: .82; letter-spacing: -0.04em; white-space: nowrap; color: var(--altin); }
.alt .sira { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; margin-top: 72px; }
.alt .yollar a { display: block; font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; color: var(--altin); text-decoration: none; }
.alt .yollar a:hover { text-decoration: underline; text-underline-offset: 6px; }
.alt .baglar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 24px; font-size: var(--step-small); }
.alt .baglar a { text-decoration: none; color: #e9dcc4; }
.alt .baglar a:hover { color: var(--altin); }
.alt .son { display: flex; justify-content: space-between; gap: 16px; margin-top: 96px; font-size: var(--step-small); color: #d8c8ad; flex-wrap: wrap; }

/* Destek ve gizlilik sayfaları */
.belge { background: var(--kagit); color: var(--murekkep); min-height: 100svh; }
.belge .ust { color: var(--tebesir); background: var(--tahta); }
.belge main { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--kenar) 120px; }
.belge h1 { font-size: var(--step-head); }
.belge h2 { font-size: var(--step-lead); margin-top: 48px; color: var(--tente); }
.belge p { margin-top: 14px; line-height: 1.6; }
.belge .tarih { color: var(--murekkep-2); margin-top: 12px; }
.belge .soru { margin-top: 28px; }
.belge .soru b { display: block; font-size: var(--step-lead); }

/* Telefon */
@media (max-width: 860px) {
  .kahraman .ic { grid-template-columns: 1fr; }
  .makine { justify-self: stretch; max-width: none; }
  .menu { grid-template-columns: 1fr; }
  .vitrin { grid-template-columns: 1fr; }
  .vitrin .hucre { grid-template-columns: 1fr; }
  .vitrin .hucre a { min-height: 56px; }
  .yaprak { grid-template-columns: 1fr; padding-top: 28px; }
  .yaprak .yazi-kutu { padding-bottom: 8px; }
  .yaprak h3 { font-size: 28px; }
  .yaprak .yazi { font-size: var(--step-body); margin-top: 12px; }
  .sorular { grid-template-columns: 1fr; }
  .sorular h2, .sorular .metin { grid-column: 1; }
  .sorular .metin { columns: 1; }
  .alt .sira { grid-template-columns: 1fr; }
  .alt .baglar { grid-template-columns: 1fr 1fr; }
}

/* Hareket: bölüm parçalarının girişi */
.gir { opacity: 0; transform: translateY(24px); transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1); }
.gir.gor { opacity: 1; transform: none; }
.js-yok .gir { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gir { opacity: 1; transform: none; transition: none; } }
.kahraman .sokak { animation: suzul 26s ease-in-out infinite alternate; transform-origin: 30% 60%; }
@keyframes suzul { from { transform: scale(1.02); } to { transform: scale(1.09) translateX(-1.5%); } }
@media (prefers-reduced-motion: reduce) { .kahraman .sokak { animation: none; } }