/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-400-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-400-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/quicksand-300-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/quicksand-300-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tebeşir Tahta — kafenin tahta menüsü: kara tahta, tebeşir el yazısı, ahşap çerçeve.
   Yazı tipleri: Caveat (el yazısı başlık/fiyat) + Quicksand (okunacak metin). Tebeşir renkleri: beyaz, sarı, mavi, yeşil. */

:root {
  --tahta: #1d2a25;
  --tahta-2: #263830;
  --tebesir: #f3f0e6;
  --tebesir-soluk: #c3cdbf;   /* tahta üstünde 9:1 */
  --sari: #f4d35e;
  --mavi: #8fd0e6;
  --yesil: #a9dc9a;
  --ahsap: #8a5a36;
  --ahsap-koyu: #5b3a22;
  --kagit: #f3f0e6;
  --murekkep: #1d2a25;
  --el: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --govde: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kap: 1140px;
  --bosluk: clamp(18px, 4.5vw, 44px);
  --elcizim: 28px 6px 32px 8px / 8px 30px 6px 32px;       /* elle çizilmiş dikdörtgen */
  --elcizim-2: 8px 30px 6px 34px / 30px 8px 32px 6px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 500 1.0625rem/1.65 var(--govde);
  color: var(--tebesir);
  background-color: var(--tahta);
  background-image:
    radial-gradient(ellipse at 15% 8%, rgba(255, 255, 255, 0.07), transparent 52%),
    radial-gradient(ellipse at 85% 92%, rgba(255, 255, 255, 0.05), transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-style: wavy; text-decoration-color: var(--sari); }
a:hover { color: var(--sari); }
:focus-visible { outline: 3px dashed var(--sari); outline-offset: 4px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 12px; background: var(--sari); color: var(--murekkep); padding: 10px 16px; z-index: 60; border-radius: var(--elcizim); }
.skip:focus { left: 12px; }
.kap { width: min(100% - 2 * var(--bosluk), var(--kap)); margin-inline: auto; }
p { max-width: 62ch; }
p + p { margin-top: 0.9em; }

/* ahşap çerçeve (sabit) */
.cerceve { position: fixed; inset: 0; z-index: 40; pointer-events: none; border: clamp(7px, 1.4vw, 16px) solid var(--ahsap);
  box-shadow: inset 0 0 0 3px var(--ahsap-koyu), inset 0 0 50px rgba(0, 0, 0, 0.55);
  border-image: linear-gradient(135deg, #a1693f, #6e4528 45%, #94603a 70%, #5b3a22) 1; }

h1, h2, h3, .marka, .nav a, .nav-toggle, .dugme, .fiyat, .alt-baslik, .cat-chip, .kat-baslik { font-family: var(--el); font-weight: 700; letter-spacing: 0.01em; }
h1 { font-size: clamp(3rem, 8.5vw, 6.2rem); line-height: 0.98; }
h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
h3 { font-size: 1.6rem; line-height: 1.1; }

/* ---------- Üst ---------- */
.ust { padding: clamp(24px, 4vw, 40px) 0 6px; }
.ust-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; }
.marka { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; text-decoration: none; }
.marka:hover { color: var(--tebesir); }
.cizim { width: 44px; height: 44px; flex: none; fill: none; stroke: var(--sari); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; gap: clamp(8px, 2vw, 22px); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 1.7rem; text-decoration: none; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5c12-5 22 3 34-1s24-3 36 0 20 2 28-1' fill='none' stroke='%23f4d35e' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.nav a:hover::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 8px; background: rgba(243, 240, 230, 0.5); border-radius: 4px; opacity: 0.4; }
.nav-toggle { display: none; min-height: 46px; padding: 0 22px; font-size: 1.5rem; color: var(--tebesir); background: transparent; border: 3px solid var(--tebesir); border-radius: var(--elcizim); cursor: pointer; }

/* ---------- Ortak parçalar ---------- */
.yazilir { position: relative; display: inline-block; }
.yazilir::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.16em; height: 0.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c20-8 38 4 60-1s40-6 64-1 50 3 72-2' fill='none' stroke='%23f4d35e' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: ciz 1.4s steps(28) 0.2s backwards; }
@keyframes ciz { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.giris { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--tebesir-soluk); margin-top: 22px; max-width: 36ch; }
.baslik { margin-bottom: 22px; }
.bolum { padding-top: clamp(40px, 7vw, 84px); }
.baslik-satiri { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.baslik-satiri .baslik { margin: 0; }

.dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; font-size: 1.6rem; line-height: 1; color: var(--tebesir);
  background: transparent; border: 3px solid var(--tebesir); border-radius: var(--elcizim); text-decoration: none; cursor: pointer; transition: transform 0.2s; }
.dugme:nth-child(2n) { border-radius: var(--elcizim-2); }
.dugme-ana { background: var(--sari); border-color: var(--sari); color: var(--murekkep); }
.dugme:hover { transform: rotate(-1.5deg) translateY(-2px); color: var(--tebesir); }
.dugme-ana:hover { color: var(--murekkep); }

.kutu, .kutu-buyuk { border: 3px solid rgba(243, 240, 230, 0.85); border-radius: var(--elcizim); }
.kutu-buyuk { padding: clamp(24px, 4vw, 46px); background: rgba(255, 255, 255, 0.025); }

/* fotoğraf: tebeşir beyazı çerçeve + bant */
.resim { position: relative; margin: 0; padding: 10px 10px 12px; background: var(--kagit); color: var(--murekkep); border-radius: 3px; }
.resim img { width: 100%; height: auto; object-fit: cover; }
.resim figcaption { font: 700 1.5rem/1 var(--el); text-align: center; padding-top: 8px; color: var(--murekkep); }
.resim-egik { transform: rotate(2.2deg); }
.resim-egik::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgba(244, 211, 94, 0.82); transform: rotate(-3deg); }
.medya { position: relative; aspect-ratio: 1.1; overflow: hidden; padding: 0; background: var(--tahta-2); }
.medya img { position: relative; width: 100%; height: 100%; }
.medya.lowres::before { content: ""; position: absolute; inset: -14px; background: var(--lr-bg) center / cover; filter: blur(14px); }
.medya.lowres img { object-fit: contain; }

/* ---------- Ana sayfa ---------- */
.kahraman { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(26px, 6vw, 80px); align-items: center; padding-top: clamp(26px, 5vw, 60px); }
/* Geniş (16:9) ekran: ilk ekran yalnızca hero; bölüm başlığı bir sonraki ekranda başlar */
@media (min-width: 1000px) and (min-height: 700px) {
  .kahraman { min-height: calc(100svh - 112px); padding-bottom: 28px; }
}
.bolumler { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.bolumler a { display: block; height: 100%; padding: 16px 20px 14px; text-decoration: none; transition: transform 0.2s; }
.bolumler li:nth-child(2n) a { border-radius: var(--elcizim-2); }
.bolumler li:nth-child(3n+1) a { border-color: rgba(143, 208, 230, 0.9); }
.bolumler li:nth-child(3n+2) a { border-color: rgba(169, 220, 154, 0.9); }
.bolumler li:nth-child(3n) a { border-color: rgba(244, 211, 94, 0.9); }
.bolumler strong { display: block; font: 700 1.8rem/1.05 var(--el); }
.bolumler span { color: var(--tebesir-soluk); font-size: 0.92rem; }
.bolumler a:hover { transform: rotate(-1.5deg) translateY(-2px); color: var(--tebesir); }

.firsatlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px 26px; }
.firsat { display: flex; flex-direction: column; gap: 8px; }
.firsat:nth-child(2n) .resim { transform: rotate(-1.4deg); }
.firsat:nth-child(2n+1) .resim { transform: rotate(1deg); }
.firsat h3 { margin-top: 6px; }
.fiyat { align-self: flex-start; font-size: 1.5rem; line-height: 1; color: var(--sari); padding: 2px 14px 4px; border: 2.5px solid var(--sari); border-radius: 50% 46% 52% 44% / 55% 45% 55% 45%; white-space: nowrap; }

.hikaye-ana { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
.hikaye-metin .cizim-dal { width: 78px; height: 78px; margin-bottom: 8px; stroke: var(--yesil); }
.tabela { max-width: 17rem; justify-self: center; margin: 0; padding: 10px; background: var(--kagit); border-radius: 3px; transform: rotate(-2deg); }

/* ---------- Sayfa başlığı ---------- */
.sayfa-ust { padding-block: clamp(30px, 5vw, 66px) clamp(14px, 3vw, 30px); }

/* ---------- Menü ---------- */
.araclar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.ara input { width: min(100%, 23rem); min-height: 52px; padding: 0 20px; font: 600 1.05rem var(--govde); color: var(--tebesir); background: rgba(255, 255, 255, 0.05); border: 3px solid var(--tebesir); border-radius: var(--elcizim); }
.ara input::placeholder { color: var(--tebesir-soluk); opacity: 1; }
.not { color: var(--tebesir-soluk); font-size: 0.98rem; max-width: none; padding: 8px 16px; border: 2px dashed rgba(243, 240, 230, 0.5); border-radius: var(--elcizim-2); }
.kat-serit { position: sticky; top: 0; z-index: 30; background: var(--tahta); padding-block: 10px; margin-top: 10px; }
.kat-serit-ic { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 3px; }
.kat-serit-ic::-webkit-scrollbar { display: none; }
.cat-chip { flex: none; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; font-size: 1.45rem; line-height: 1; text-decoration: none; border: 2.5px solid rgba(243, 240, 230, 0.7); border-radius: var(--elcizim); white-space: nowrap; }
.cat-chip:nth-child(2n) { border-radius: var(--elcizim-2); }
.cat-chip.on { background: var(--sari); border-color: var(--sari); color: var(--murekkep); }
.menu-govde { padding-bottom: clamp(40px, 6vw, 80px); }
.kat { scroll-margin-top: 84px; padding-top: clamp(34px, 5vw, 60px); }
.kat-baslik { position: relative; font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1; margin-bottom: 18px; padding-bottom: 14px; }
.kat-baslik::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5c20-4 40 3 60 0s40-3 60 0 40 3 78-1' fill='none' stroke='%23f3f0e6' stroke-opacity='.65' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.urunler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px clamp(26px, 5vw, 70px); }
.urun { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.urun-ana { flex: 1; min-width: 0; }
.urun-satir { display: flex; align-items: baseline; gap: 10px; }
.urun-satir h3 { flex: 0 1 auto; font-size: 1.7rem; }
.cizgi { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2.5px dashed rgba(243, 240, 230, 0.4); transform: translateY(-0.3em); }
.urun .fiyat { border: 0; padding: 0; font-size: 1.7rem; border-radius: 0; }
.urun-ana p { color: var(--tebesir-soluk); font-size: 0.97rem; margin-top: 2px; line-height: 1.45; }
.thumb { appearance: none; flex: none; width: 84px; height: 84px; padding: 4px; line-height: 0; background: var(--kagit); border: 0; border-radius: 3px; cursor: zoom-in; transform: rotate(-3deg); transition: transform 0.2s; }
.urun:nth-child(2n) .thumb { transform: rotate(2.5deg); }
.thumb:hover { transform: rotate(0) scale(1.06); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.bos { display: none; padding: 40px 0; text-align: center; max-width: none; font-size: 1.2rem; }
.bos.show { display: block; }

.lightbox { margin: auto; border: 3px solid var(--tebesir); border-radius: var(--elcizim); padding: 16px; background: var(--tahta); color: var(--tebesir); width: min(92vw, 34rem); max-height: 94vh; }
.lightbox::backdrop { background: rgba(8, 14, 11, 0.85); }
.lightbox img { width: 100%; max-height: 64vh; object-fit: contain; background: var(--kagit); padding: 8px; }
.lightbox figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; font: 700 1.5rem var(--el); }
.lightbox-close { display: block; margin: 0 0 12px auto; font: 700 1.5rem var(--el); min-height: 44px; padding: 0 22px; background: var(--sari); color: var(--murekkep); border: 0; border-radius: var(--elcizim-2); cursor: pointer; }

/* ---------- Hakkımızda ---------- */
.hikaye { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(26px, 6vw, 80px); align-items: start; padding-top: 10px; }
.hikaye-metin p { font-size: 1.125rem; line-height: 1.75; }
.alinti { margin: clamp(46px, 7vw, 86px) auto 0; max-width: 24em; text-align: center; font: 700 clamp(2rem, 4.4vw, 3.2rem)/1.12 var(--el); border-color: var(--sari); transform: rotate(-1deg); }
.sahipler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 34px); }
.sahip .cizim-pati { width: 56px; height: 56px; margin-bottom: 6px; stroke: var(--mavi); }
.sahip:nth-child(2) { border-radius: var(--elcizim-2); }
.sahip:nth-child(2) .cizim-pati { stroke: var(--yesil); }
.sahip h3 { font-size: clamp(2.2rem, 4.5vw, 3rem); margin-bottom: 8px; }
.kume { display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px); align-items: flex-start; }
.kume .resim { flex: 1; max-width: 330px; }
.kume .resim:nth-child(1) { transform: rotate(-2.5deg); }
.kume .resim:nth-child(2) { transform: translateY(18px) rotate(1.6deg); }
.kume .resim:nth-child(3) { transform: rotate(-1deg); }
.cta { text-align: center; display: grid; justify-items: center; gap: 10px; }
.cta p { color: var(--tebesir-soluk); }
.cta .dugme { margin-top: 12px; }

/* ---------- İletişim ---------- */
.iletisim { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 60px); align-items: start; padding-bottom: clamp(30px, 5vw, 60px); }
.alan { margin-bottom: 18px; }
.alan label { display: block; font: 700 1.5rem/1 var(--el); margin-bottom: 6px; }
.alan input, .alan select, .alan textarea { width: 100%; font: 600 1.05rem var(--govde); color: var(--tebesir); background: rgba(255, 255, 255, 0.05); border: 2.5px solid rgba(243, 240, 230, 0.8); border-radius: var(--elcizim); padding: 12px 18px; min-height: 52px; }
.alan select option { color: var(--murekkep); }
.alan textarea { min-height: 10rem; resize: vertical; border-radius: var(--elcizim-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bildirim { padding: 14px 20px; margin-bottom: 20px; border: 2.5px solid var(--tebesir); border-radius: var(--elcizim-2); max-width: none; }
.bildirim strong { display: block; font: 700 1.5rem/1.1 var(--el); }
.bildirim-ok { border-color: var(--yesil); }
.bildirim-uyari { border-style: dashed; border-color: var(--sari); }
.bildirim-hata { border-width: 4px; border-style: double; border-color: #ffa98f; }
.bilgiler { display: grid; gap: 16px; }
.bilgi { padding: 14px 20px; border: 2.5px solid rgba(243, 240, 230, 0.55); border-radius: var(--elcizim); }
.bilgi:nth-child(2n) { border-radius: var(--elcizim-2); }
.bilgi span { display: block; font: 700 1.3rem/1 var(--el); color: var(--sari); margin-bottom: 2px; }
.bilgi a, .bilgi p { overflow-wrap: anywhere; font-weight: 600; }

/* ---------- Alt: ahşap raf ---------- */
.alt { position: relative; margin-top: clamp(60px, 9vw, 120px); padding: clamp(40px, 6vw, 70px) 0 clamp(34px, 5vw, 56px); background: linear-gradient(#6e4528, #4c301c); border-top: 8px solid #9a6a42; box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35); }
.alt-izgara { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.alt-baslik { font-size: 2.6rem; line-height: 1; }
.alt-slogan { margin-top: 6px; color: #e9dcc6; font-weight: 600; }
.cizim-pati { stroke: var(--sari); }
.alt .cizim-pati { margin-top: 12px; width: 52px; height: 52px; }
.alt h2 { font-size: 2rem; color: var(--sari); margin-bottom: 8px; }
.alt ul { display: grid; gap: 4px; }
.alt address { font-style: normal; }
.alt p, .alt li { color: #f0e6d4; }
.alt .saatler { white-space: pre-line; }
.alt-not { margin-top: 10px; font-size: 0.95rem; }
.alt-yazi { margin-top: 36px; padding-top: 16px; border-top: 2px dashed rgba(255, 244, 220, 0.35); font-size: 0.92rem; max-width: none; color: #e9dcc6; }

/* ---------- Duyarlı ---------- */
@media (max-width: 880px) {
  .nav { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; flex-direction: column; background: var(--tahta); border: 3px solid var(--tebesir); border-radius: var(--elcizim); padding: 12px 18px; display: none; min-width: 15rem; gap: 0; }
  .nav.open { display: flex; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .kahraman, .hikaye-ana, .hikaye, .iletisim, .sahipler { grid-template-columns: 1fr; }
  .resim-egik { max-width: 520px; margin-inline: auto; }
  .alt-izgara { grid-template-columns: 1fr; }
  .urunler { grid-template-columns: 1fr; }
  .kume { flex-direction: column; align-items: center; }
  .kume .resim { max-width: 320px; width: 100%; }
  .kume .resim:nth-child(2) { transform: rotate(1.6deg); }
}
@media (max-width: 520px) {
  .marka { font-size: 1.9rem; }
  .cizim { width: 38px; height: 38px; }
  .urun { gap: 12px; }
  .thumb { width: 72px; height: 72px; }
  .dugme { font-size: 1.45rem; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .yazilir::after { animation: none; }
  .dugme, .bolumler a, .thumb { transition: none; }
}