/* İstanbul Pilav — "Terazi ve Tabak", ferah sürüm, renk "Zeytin ve Tereyağı" (4 Eki 2026, feyz 2. varyantı seçti). Kurallar: docs/superpowers/specs/2026-10-04-istpilav17-marka-yonu.md
   Satır içi stil yok (güvenlik politikası); renkler yalnız :root'ta, anlamlı adlarla. Telefon önce.
   Ferahlık kuralları: açık zemin, beyaz yüzey, tek vurgu rengi (yalnız ana eylem ve seçili durum), koyu bant yok, geniş boşluk. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/varliklar/fontlar/fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/varliklar/fontlar/fraunces-italik.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/varliklar/fontlar/bricolage.woff2') format('woff2'); }
@font-face { font-family: 'Caveat Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url('/varliklar/fontlar/caveat-brush.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces Yedek'; src: local('Georgia'); size-adjust: 104%; }
@font-face { font-family: 'Bricolage Yedek'; src: local('Segoe UI'), local('Roboto'), local('Arial'); size-adjust: 101%; }

:root {
  /* zemin ve yüzey */
  --zemin: #FAFBF6;
  --zemin-2: #F1F4EA;
  --yuzey: #FFFFFF;
  --yuzey-2: #EEF2E6;
  /* yazı */
  --yazi-1: #1E2417;
  --yazi-2: #4A5340;
  --yazi-3: #626C57;
  /* vurgu (zeytin yeşili): yalnız ana eylem, seçili durum, bağlantı · --marka logo turuncusu, vurgu değildir */
  --vurgu: #3E6A2B;
  --vurgu-uzeri: #FFFFFF;
  --vurgu-koyu: #33591F;
  --vurgu-acik: #E4EED8;
  --vurgu-cizgi: #BFD3A8;
  --ikincil: #E3A63A;
  --marka: #B84A0C;
  /* çizgi ve gölge */
  --cizgi: rgba(30, 36, 23, 0.09);
  --cizgi-2: rgba(30, 36, 23, 0.16);
  --cizgi-alan: rgba(30, 36, 23, 0.5);
  --golge-1: 0 1px 2px rgba(30, 36, 23, 0.04);
  --golge-2: 0 1px 2px rgba(30, 36, 23, 0.04), 0 16px 36px -20px rgba(30, 36, 23, 0.22);
  --halka: rgba(62, 106, 43, 0.26);
  --cam: rgba(250, 251, 246, 0.88);
  /* durum */
  --tamam: #2F7A45;
  --tamam-acik: #E4F2E8;
  --uyari-zemin: #FCE8E1;
  --uyari-yazi: #8A2A16;
  --bilgi-zemin: #FFF4D6;
  --bilgi-yazi: #6B4E00;
  --wa: #147A3E;
  --wa-acik: #1FA855;
  --beyaz: #FFFFFF;
  --koyu-yuzey: #1E2417;
  /* yazı aileleri ve ölçüler */
  --baslik: 'Fraunces', 'Fraunces Yedek', Georgia, serif;
  --yazi: 'Bricolage', 'Bricolage Yedek', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --el: 'Caveat Brush', 'Brush Script MT', cursive;
  --kenar: clamp(1.25rem, 5vw, 3.5rem);
  --bolum: clamp(4.25rem, 10vw, 8rem);
  --r-kucuk: 8px;
  --r: 12px;
  --r-buyuk: 18px;
  --r-bolum: 28px;
  --dokunma: 2.75rem;
  --ada-h: 3.6rem;               /* yüzen ada yüksekliği */
  --ust-h: 4.6rem;               /* ada + üst boşluk: kategori şeridi ve çekmece bunun altından başlar */
  /* ada, çekmece ve hap etiket (varyantlar ezer) */
  --ada-zemin: rgba(255, 255, 255, 0.78);
  --ada-cizgi: rgba(30, 36, 23, 0.08);
  --ada-yazi: #1E2417;
  --ada-yazi-2: #4A5340;
  --ada-vurgu: rgba(30, 36, 23, 0.05);
  --ada-dugme: #1E2417;
  --ada-dugme-yazi: #FFFFFF;
  --golge-ada: 0 10px 30px -18px rgba(30, 36, 23, 0.35), 0 1px 2px rgba(30, 36, 23, 0.05);
  --cekmece-zemin: #FAFBF6;
  --etiket-zemin: rgba(62, 106, 43, 0.07);
  --etiket-cizgi: rgba(62, 106, 43, 0.14);
  --gecis-yay: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--zemin); color: var(--yazi-1); font-family: var(--yazi); font-size: 1.0625rem; line-height: 1.6; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--vurgu-koyu); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--yazi-1); }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--baslik); font-weight: 560; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.6em; color: var(--yazi-1); }
h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
h3 { font-size: 1.2rem; }
h1 em, h2 em { font-style: italic; font-weight: 480; color: var(--vurgu-koyu); }
p { margin: 0 0 1em; }
.ic { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--kenar); }
.dar { max-width: 44rem; }
.atla { position: absolute; left: -9999px; top: 0; background: var(--yazi-1); color: var(--beyaz); padding: 0.6rem 1rem; z-index: 50; }
.atla:focus { left: 1rem; }
.sr, .gorunmez { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
.ikon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ust-etiket { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vurgu-koyu); margin-bottom: 0.9rem; }
.giris { font-size: clamp(1.08rem, 2.1vw, 1.22rem); color: var(--yazi-2); max-width: 38rem; line-height: 1.6; }
.el { font-family: var(--el); font-weight: 400; color: var(--vurgu-koyu); letter-spacing: 0.01em; }
.ortala { text-align: center; margin-top: 2.5rem; }
.kucuk { font-size: 0.8rem; color: var(--yazi-3); font-weight: 500; }
code { font-size: 0.9em; background: var(--yuzey-2); padding: 0.1em 0.35em; border-radius: 4px; }

/* düğmeler: ana eylem dolu vurgu, ikincil beyaz */
.dugme, .dugme-cizgi, .dugme-wa, .dugme-tehlike { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--dokunma); padding: 0.7rem 1.4rem;
  border-radius: 999px; font: 650 1rem/1.2 var(--yazi); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform 0.2s var(--gecis-yay), background-color 0.2s, border-color 0.2s, color 0.2s; }
.dugme { background: var(--vurgu); color: var(--vurgu-uzeri); }
.dugme:hover { background: var(--vurgu-koyu); color: var(--vurgu-uzeri); }
.dugme:active, .dugme-cizgi:active { transform: scale(0.98); }
.dugme[disabled] { opacity: 0.5; cursor: not-allowed; }
.dugme-cizgi { background: var(--yuzey); color: var(--yazi-1); border-color: var(--cizgi-2); }
.dugme-cizgi:hover { border-color: var(--yazi-1); color: var(--yazi-1); }
.dugme-wa { background: var(--wa); color: var(--beyaz); }
.dugme-wa:hover { background: var(--yazi-1); color: var(--beyaz); }
.dugme-tehlike { background: var(--yuzey); color: var(--uyari-yazi); border-color: rgba(138, 42, 22, 0.35); }
.dugme-tehlike:hover { background: var(--uyari-zemin); }
.dugme-buyuk { min-height: 3.25rem; padding-inline: 1.8rem; font-size: 1.05rem; }
.dugme-tam { width: 100%; }
.dugme-kucuk { min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: 0.92rem; }
.metin-dugme { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-height: var(--dokunma); }
.metin-baglanti { font-weight: 600; }
.eylemler { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.8rem; }

/* üst: yüzen ada (Revizyon 2). Cam efekti ::before'da: backdrop-filter atanın kendisinde olursa çekmece (position: fixed) adaya hapsolur. */
.ust { position: sticky; top: 0; z-index: 30; padding: 0.6rem var(--kenar) 0; pointer-events: none; }
.ust-ada { pointer-events: auto; position: relative; isolation: isolate; max-width: 72rem; margin-inline: auto; min-height: var(--ada-h); display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem 0.35rem 1.1rem; border-radius: 999px; }
.ust-ada::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ada-zemin); border: 1px solid var(--ada-cizgi); box-shadow: var(--golge-ada); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.marka { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--marka); font-family: var(--el); text-transform: uppercase; line-height: 0.82; font-size: 1.45rem; transform: rotate(-4deg); padding: 0.2rem 0; min-height: var(--dokunma); justify-content: center; flex: none; }
.marka:hover { color: var(--ada-yazi); }
.marka-alt { padding-left: 0.55em; }
.ust-menu { display: flex; gap: 0.1rem; flex: 1; justify-content: center; }
.ust-menu a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1rem; border-radius: 999px; color: var(--ada-yazi-2); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background-color 0.25s var(--gecis-yay), color 0.25s var(--gecis-yay); }
.ust-menu a:hover { color: var(--ada-yazi); background: var(--ada-vurgu); }
.ust-menu a[aria-current="page"] { color: var(--ada-yazi); background: var(--ada-vurgu); }
.ust-durum { display: inline-flex; align-items: center; gap: 0.1rem; margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ada-yazi-2); white-space: nowrap; padding: 0 0.6rem; }
.sepet-dugme { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.85rem; padding: 0 1.1rem; border-radius: 999px; background: var(--ada-dugme); color: var(--ada-dugme-yazi); text-decoration: none; font-weight: 650; flex: none; transition: transform 0.25s var(--gecis-yay); }
.sepet-dugme:hover { color: var(--ada-dugme-yazi); }
.sepet-dugme:active { transform: scale(0.97); }
.sepet-sayi { min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--ikincil); color: var(--yazi-1); font-size: 0.78rem; font-weight: 800; display: inline-grid; place-items: center; padding: 0 0.3rem; }
.durum-serit { margin: 0; font-size: 0.82rem; padding: 0.55rem var(--kenar) 0; color: var(--yazi-2); max-width: 72rem; margin-inline: auto; }
.durum-nokta { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--yazi-3); margin-right: 0.45rem; vertical-align: 0.06em; }
.acik .durum-nokta, .durum-serit.acik .durum-nokta { background: var(--wa-acik); box-shadow: 0 0 0 3px rgba(31, 168, 85, 0.18); }

/* hamburger: üç çizgi açılınca X olur (yalnız transform/opacity) */
.cekmece { flex: none; }
.hamburger { list-style: none; display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border-radius: 50%; cursor: pointer; color: var(--ada-yazi); background: var(--ada-vurgu); }
.hamburger::-webkit-details-marker { display: none; }
.hamburger-cizgi { position: relative; width: 1.15rem; height: 0.8rem; display: block; }
.hamburger-cizgi > span { position: absolute; left: 0; right: 0; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 0.45s var(--gecis-yay), opacity 0.3s var(--gecis-yay); }
.hamburger-cizgi > span:nth-child(1) { top: 0; }
.hamburger-cizgi > span:nth-child(2) { top: calc(50% - 0.8px); }
.hamburger-cizgi > span:nth-child(3) { bottom: 0; }
[open] > .hamburger .hamburger-cizgi > span:nth-child(1) { transform: translateY(calc(0.4rem - 0.8px)) rotate(45deg); }
[open] > .hamburger .hamburger-cizgi > span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
[open] > .hamburger .hamburger-cizgi > span:nth-child(3) { transform: translateY(calc(-0.4rem + 0.8px)) rotate(-45deg); }
html.cekmece-acik { overflow: hidden; }

/* çekmece: tam ekran, ada üstte kalır; öğeler sırayla belirir */
.cekmece-panel { position: fixed; inset: 0; z-index: -2; overflow-y: auto; overscroll-behavior: contain; background: var(--cekmece-zemin); padding: calc(var(--ust-h) + 0.75rem) var(--kenar) calc(1.5rem + env(safe-area-inset-bottom)); }
.cekmece-ic { max-width: 34rem; margin-inline: auto; display: grid; gap: 1.5rem; }
.cekmece-ana { display: grid; }
.cekmece-grup { margin: 1rem 0 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yazi-3); }
.cekmece-grup:first-child { margin-top: 0; }
.cekmece-oge { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--cizgi); color: var(--yazi-1); text-decoration: none; }
.cekmece-oge b { display: flex; align-items: center; gap: 0.5rem; font-family: var(--baslik); font-weight: 520; font-size: clamp(1.6rem, 7vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; }
.cekmece-oge small { display: block; color: var(--yazi-3); font-size: 0.88rem; margin-top: 0.2rem; }
.cekmece-oge > .ikon { width: 2.4rem; height: 2.4rem; padding: 0.65rem; border-radius: 50%; background: var(--yuzey-2); color: var(--yazi-1); transition: transform 0.4s var(--gecis-yay); }
.cekmece-oge:hover { color: var(--yazi-1); }
.cekmece-oge:hover > .ikon { transform: translateX(3px); }
.cekmece-oge[aria-current="page"] b { color: var(--vurgu-koyu); }
.cekmece-oge .sepet-sayi { font-family: var(--yazi); font-size: 0.8rem; letter-spacing: 0; }
.cekmece-kat { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.75rem 0 0.9rem; border-bottom: 1px solid var(--cizgi); }
.cekmece-kat a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.95rem; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--yuzey); color: var(--yazi-2); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.cekmece-alt { display: grid; gap: 0.9rem; }
.cekmece-durum { margin: 0; font-weight: 600; color: var(--yazi-2); font-size: 0.92rem; }
.cekmece-eylem { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0; }
.cekmece-eylem a { padding-inline: 0.6rem; font-size: 0.92rem; }
.cekmece-kucuk { margin: 0; font-size: 0.85rem; color: var(--yazi-3); }
.cekmece-kucuk a { color: var(--yazi-2); display: inline-flex; align-items: center; min-height: 2.5rem; }
.cekmece[open] .cekmece-ana > *, .cekmece[open] .cekmece-alt > * { animation: cekmece-gir 0.6s var(--gecis-yay) both; }
.cekmece[open] .cekmece-ana > :nth-child(2) { animation-delay: 0.04s; }
.cekmece[open] .cekmece-ana > :nth-child(3) { animation-delay: 0.08s; }
.cekmece[open] .cekmece-ana > :nth-child(4) { animation-delay: 0.12s; }
.cekmece[open] .cekmece-ana > :nth-child(5) { animation-delay: 0.16s; }
.cekmece[open] .cekmece-ana > :nth-child(6) { animation-delay: 0.2s; }
.cekmece[open] .cekmece-ana > :nth-child(n+7), .cekmece[open] .cekmece-alt > * { animation-delay: 0.24s; }
@keyframes cekmece-gir { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }

/* telefon: hamburger · logo (ortada) · sepet; menü ve durum çekmecede */
@media (max-width: 59.99rem) {
  .ust-menu, .ust-durum { display: none; }
  .ust-ada { padding: 0.35rem; justify-content: space-between; }
  .ust-ada > .marka { position: absolute; left: 50%; transform: translateX(-50%) rotate(-4deg); font-size: 1.3rem; }
  .sepet-dugme { padding: 0 0.95rem; min-width: 2.85rem; justify-content: center; }
  .sepet-dugme span:not(.sepet-sayi) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 60rem) {
  .cekmece { display: none; }
  .durum-serit { display: none; }
}
@media (max-height: 30rem) { .ust { position: static; } }

/* bölümler: koyu bant yok; ayrım açık tonla */
.bolum { padding-block: var(--bolum); }
.sayfa-bas { padding-bottom: 1.5rem; }
@media (max-width: 47.99rem) { .bolum.sayfa-bas { padding-top: 1.75rem; padding-bottom: 1rem; } }
.bolum-koyu-krem, .bolum-acik-ton, .bolum-murekkep { background: var(--zemin-2); }
.bolum-bas { max-width: 42rem; margin-bottom: 2.5rem; }
.bolum-acik { color: var(--yazi-2); }

/* kapak */
.kapak { padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--bolum); overflow: hidden; }
.kapak-izgara { display: grid; gap: 3rem; align-items: center; }
.kapak-not { display: flex; gap: 0.5rem; align-items: center; color: var(--yazi-3); font-size: 0.93rem; margin-top: 1.4rem; }
.kapak-gorsel { position: relative; max-width: 32rem; justify-self: center; width: 100%; }
.kapak-doku { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-bolum) var(--r-bolum) 48% 48% / var(--r-bolum) var(--r-bolum) 28% 28%; box-shadow: var(--golge-2); }
.kapak-doku-tavuk { position: absolute; inset: 0; height: 100%; box-shadow: none; clip-path: polygon(0 80%, 100% 42%, 100% 100%, 0 100%); }
.kapak-terazi { position: absolute; z-index: 1; left: -0.5rem; top: 12%; margin: 0; background: var(--yuzey); color: var(--yazi-1); border-radius: 999px; padding: 0.5rem 1.05rem; display: flex; gap: 0.45rem; align-items: baseline; box-shadow: var(--golge-2); border: 1px solid var(--cizgi); }
.kapak-terazi.kt-iki { left: auto; right: -0.5rem; top: auto; bottom: 18%; }
.kt-deger { font-family: var(--baslik); font-size: 1.5rem; font-weight: 600; color: var(--vurgu-koyu); }
.kt-ad { font-weight: 600; color: var(--yazi-2); }
@media (min-width: 60rem) { .kapak-izgara { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
@media (max-width: 59.99rem) {
  .kapak { padding-top: 1.75rem; }
  .kapak-izgara { gap: 2rem; }
  .kapak-gorsel { max-width: 21rem; }
  .kapak-doku { aspect-ratio: 1 / 1; }
  .kt-deger { font-size: 1.3rem; }
}

/* terazi şeridi: açık ton, üç sayı kartı */
.terazi-serit { background: var(--zemin-2); padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.terazi-izgara { display: grid; gap: 1.6rem; align-items: center; }
.terazi-baslik { font-family: var(--baslik); font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin: 0; line-height: 1.2; color: var(--yazi-1); }
.terazi-baslik .el { display: block; font-size: 1.1em; }
.terazi-sayilar { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.terazi-sayilar p { margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.1rem 1.2rem; }
.terazi-sayilar b { display: block; white-space: nowrap; font-family: var(--baslik); font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 560; color: var(--yazi-1); }
.terazi-sayilar span { color: var(--yazi-3); font-size: 0.92rem; }
@media (min-width: 60rem) { .terazi-izgara { grid-template-columns: 0.8fr 1.7fr; } }
@media (max-width: 39.99rem) {
  .terazi-sayilar { grid-template-columns: 1fr; gap: 0.5rem; }
  .terazi-sayilar p { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.1rem; }
  .terazi-sayilar b { font-size: 1.45rem; }
  .terazi-sayilar span { text-align: right; }
}

/* hazır kurulum kartları */
.hazir-izgara { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.hazir-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.5rem; display: flex; flex-direction: column; box-shadow: var(--golge-1); }
.hazir-kart.one-cikan { border-color: var(--vurgu-cizgi); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.hazir-kart .ust-etiket { margin-bottom: 0.6rem; }
.hazir-gram { font-family: var(--baslik); font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.35rem; }
.hazir-gram b { font-size: 2.1rem; font-weight: 560; }
.hazir-gram span { color: var(--yazi-3); }
.hazir-ek { color: var(--yazi-3); font-size: 0.94rem; min-height: 1.4em; }
.hazir-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: auto 0 0; padding-top: 1rem; }
.hazir-alt s { color: var(--yazi-3); font-weight: 500; font-size: 0.9em; margin-right: 0.3rem; }

/* ürün kartları */
.urun-izgara { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
.urun { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 0.9rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: center; box-shadow: var(--golge-1); }
.urun.tukendi { opacity: 0.55; }
.gram-karti { width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; }
.urun-foto { width: 6.5rem; height: 4.9rem; object-fit: contain; background: var(--zemin-2); border-radius: var(--r); padding: 0.35rem; filter: drop-shadow(0 6px 8px rgba(30, 36, 23, 0.18)); }
.urun-govde h3 { font-family: var(--yazi); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin: 0 0 0.25rem; }
.urun-acik { color: var(--yazi-3); font-size: 0.89rem; margin: 0 0 0.4rem; }
.urun-alt { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.urun-fiyat { font-family: var(--baslik); font-size: 1.25rem; font-weight: 600; margin: 0; color: var(--yazi-1); }
.urun-kendin { border-color: var(--vurgu-cizgi); box-shadow: 0 0 0 3px var(--vurgu-acik); }
.urun-kendin .dugme { margin-top: 0.6rem; }
.dugme-ekle { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--dokunma); padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--cizgi-2); background: var(--yuzey); color: var(--yazi-1); font: 650 0.94rem var(--yazi); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.dugme-ekle:hover { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-uzeri); }
.dugme-ekle.eklendi { background: var(--tamam); border-color: var(--tamam); color: var(--beyaz); }
.rozet { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--yuzey-2); color: var(--yazi-2); margin: 0; }
.besin-satir { display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem; font-size: 0.84rem; color: var(--yazi-3); margin: 0 0 0.4rem; }
.gram-karti { background: var(--zemin-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; text-align: center; color: var(--yazi-1); border: 1px dashed var(--cizgi-2); }
.gram-karti .ikon { width: 1.2rem; height: 1.2rem; color: var(--vurgu-koyu); margin-bottom: 0.15rem; }
.gk-satir { font-size: 0.72rem; line-height: 1.15; font-weight: 600; color: var(--yazi-2); }
.gk-satir b { font-family: var(--baslik); font-size: 1rem; color: var(--yazi-1); }
.gk-ek { color: var(--yazi-3); font-weight: 500; max-width: 5rem; }
@media (min-width: 40rem) { .urun-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .urun-izgara { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  .urun { grid-template-columns: 1fr; align-items: start; padding: 1.1rem; }
  .gram-karti { width: 75%; height: auto; aspect-ratio: 1; justify-self: center; }
  .urun-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 0.6rem; }
  .gram-karti { gap: 0.2rem; }
  .gk-satir { font-size: 0.9rem; }
  .gk-satir b { font-size: 1.45rem; }
  .gram-karti .ikon { width: 1.7rem; height: 1.7rem; }
  .gk-ek { max-width: 9rem; }
}
.kat-nav { position: sticky; top: calc(var(--ust-h) - 1px); z-index: 20; background: var(--cam); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cizgi); }
.kat-nav-ic { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding-block: 0.55rem; }
.kat-nav-ic::-webkit-scrollbar { display: none; }
.kat-nav a[aria-current="true"] { background: var(--vurgu-acik); border-color: var(--vurgu-cizgi); color: var(--yazi-1); }
.kat-nav a { flex: none; display: inline-flex; align-items: center; min-height: var(--dokunma); padding: 0 1rem; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi-2); color: var(--yazi-2); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.kat-nav a:hover { color: var(--yazi-1); border-color: var(--yazi-1); }
.menu-bolum { padding-block: 1.75rem 2.25rem; scroll-margin-top: calc(var(--ust-h) + 3.5rem); }
.menu-bolum .bolum-bas { margin-bottom: 1.1rem; }
.menu-bolum h2 { font-size: clamp(1.45rem, 3.4vw, 1.9rem); margin-bottom: 0.25rem; }

/* yorumlar */
.yorum-izgara { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .yorum-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .yorum-izgara { grid-template-columns: repeat(4, 1fr); } }
.yorum { margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.6rem 1.5rem 1.3rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--golge-1); }
.yorum blockquote { margin: 0; }
.yorum blockquote p { font-family: var(--baslik); font-style: italic; font-size: 1.14rem; line-height: 1.45; margin: 0 0 1rem; color: var(--yazi-1); }
.yorum blockquote p::before { content: "“"; display: block; font-size: 2.6rem; line-height: 0.6; color: var(--ikincil); font-style: normal; margin-bottom: 0.45rem; }
.yorum figcaption { font-size: 0.84rem; color: var(--yazi-3); font-weight: 600; }

/* adımlar: açık ton üzerinde numaralı kartlar */
.adim-izgara { display: grid; gap: 1.5rem; }
.adimlar { margin: 0; padding: 0; list-style: none; counter-reset: adim; display: grid; gap: 0.9rem; }
.adimlar li { counter-increment: adim; padding: 1.2rem 1.3rem 1.2rem 4rem; position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); color: var(--yazi-2); }
.adimlar li::before { content: counter(adim); position: absolute; left: 1.1rem; top: 1.05rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--vurgu-acik); color: var(--vurgu-koyu); font-family: var(--baslik); font-size: 1.05rem; font-weight: 600; }
.adimlar b { color: var(--yazi-1); }
.adim-not { display: flex; gap: 0.5rem; align-items: center; color: var(--yazi-3); margin: 0; }
@media (min-width: 60rem) { .adimlar { grid-template-columns: repeat(3, 1fr); } .adimlar li { padding: 1.5rem 1.5rem 1.5rem 4.4rem; font-size: 1.02rem; } .adimlar li::before { left: 1.4rem; top: 1.35rem; } }
.adim-kartlar { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.adim-kartlar li { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.5rem; box-shadow: var(--golge-1); }
.adim-kartlar b { font-family: var(--baslik); font-size: 1.8rem; color: var(--vurgu-koyu); display: block; line-height: 1; margin-bottom: 0.6rem; }
.adim-kartlar h3 { margin-bottom: 0.4rem; }
.adim-kartlar p { color: var(--yazi-2); margin: 0; font-size: 0.97rem; }

/* salon ve dükkân */
.salon-tanitim, .dukkan { display: grid; gap: 2.5rem; align-items: center; }
.salon-gorsel { width: 100%; max-width: 26rem; aspect-ratio: 4 / 3; object-fit: contain; justify-self: center; filter: drop-shadow(0 16px 22px rgba(30, 36, 23, 0.22)); }
.salon-gorsel.doku-gorsel { aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-bolum); max-width: 26rem; filter: none; box-shadow: var(--golge-2); }
.dukkan p { display: flex; gap: 0.55rem; align-items: flex-start; color: var(--yazi-2); }
.dukkan p > a { display: inline-flex; align-items: center; min-height: 2.5rem; margin-top: -0.55rem; }
.dukkan .eylemler { display: flex; }
.dukkan-gorsel { width: 100%; max-width: 26rem; aspect-ratio: 4 / 3; object-fit: contain; justify-self: center; filter: drop-shadow(0 16px 22px rgba(30, 36, 23, 0.22)); }
@media (min-width: 60rem) { .salon-tanitim, .dukkan { grid-template-columns: 1.3fr 0.7fr; } }

/* Kendin Yap */
.hazir-seridi { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hazir-cip { padding: 0.55rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--cizgi-2); background: var(--yuzey); color: var(--yazi-1); text-decoration: none; font-weight: 650; font-size: 0.92rem; min-height: var(--dokunma); display: inline-flex; align-items: center; }
.hazir-cip:hover { border-color: var(--yazi-1); color: var(--yazi-1); }
.hazir-cip.secili { background: var(--vurgu-acik); border-color: var(--vurgu); color: var(--yazi-1); }
.kendin-bolum { padding-top: 1rem; }
.kendin-izgara { display: grid; gap: 1.75rem; align-items: start; }
.kendin-form { display: grid; gap: 1rem; }
.secenek-grup { border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); background: var(--yuzey); padding: 1.1rem 1.1rem 1.25rem; margin: 0; min-width: 0; box-shadow: var(--golge-1); }
.secenek-grup legend { font-family: var(--baslik); font-weight: 600; font-size: 1.15rem; padding: 0; color: var(--yazi-1); float: left; width: 100%; margin-bottom: 0.7rem; }
.secenek-grup legend + * { clear: both; }
.cipler { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cip-girdi { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 4.6rem; min-height: 3.2rem; padding: 0.45rem 0.85rem; border-radius: var(--r); border: 1.5px solid var(--cizgi-2); background: var(--yuzey); cursor: pointer; line-height: 1.15; text-align: center; transition: border-color 0.15s, background-color 0.15s; }
.cip:hover { border-color: var(--yazi-3); }
.cip-ad { font-weight: 700; font-size: 0.97rem; color: var(--yazi-1); }
.cip-fiyat { font-size: 0.74rem; color: var(--yazi-3); font-weight: 600; }
.cip-girdi:checked + .cip { background: var(--vurgu-acik); border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.cip-girdi:checked + .cip .cip-fiyat { color: var(--vurgu-koyu); }
.cip-girdi:focus-visible + .cip { outline: 3px solid var(--vurgu); outline-offset: 2px; }
.secenek-pilav .cip, .secenek-tavuk .cip { min-width: 4.2rem; }
.kendin-ozet { background: var(--yuzey); color: var(--yazi-1); border: 1px solid var(--cizgi); border-radius: var(--r-bolum); padding: 1.6rem; box-shadow: var(--golge-2); }
.tabak-cizim { width: 9.5rem; margin: 0 auto 0.9rem; }
@media (max-width: 59.99rem) { .tabak-cizim { width: 6rem; margin-bottom: 0.5rem; } .kendin-ozet { padding: 1.25rem; } }
.tabak-svg .tabak-dis { fill: var(--zemin-2); }
.tabak-svg .tabak-ic { fill: var(--yuzey); stroke: var(--cizgi-2); stroke-width: 1.5; }
.tabak-svg .tabak-pilav { fill: var(--yuzey-2); stroke: var(--cizgi-2); stroke-width: 1; transition: r 0.35s var(--gecis-yay); }
.tabak-svg .tabak-tavuk { fill: var(--ikincil); transition: r 0.35s var(--gecis-yay); }
.tabak-svg.baharatli .tabak-tavuk { fill: var(--vurgu); }
.ozet-gram { font-family: var(--baslik); font-size: 1.3rem; text-align: center; margin-bottom: 0.2rem; color: var(--yazi-2); }
.ozet-gram b { font-size: 2.1rem; font-weight: 560; color: var(--yazi-1); }
.ozet-gram span { color: var(--yazi-3); }
.ozet-ek { text-align: center; color: var(--yazi-3); font-size: 0.92rem; min-height: 1.4em; margin-bottom: 1rem; }
.ozet-besin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0 0 0.5rem; }
.ozet-besin div { background: var(--zemin-2); border-radius: var(--r); padding: 0.6rem 0.8rem; }
.ozet-besin dt { font-size: 0.74rem; color: var(--yazi-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.ozet-besin dd { margin: 0; font-family: var(--baslik); font-size: 1.35rem; font-weight: 600; }
.ozet-not { font-size: 0.8rem; color: var(--yazi-3); text-align: center; }
.ozet-not a { color: var(--vurgu-koyu); }
.ozet-alt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0; padding-top: 1.1rem; border-top: 1px solid var(--cizgi); }
.ozet-fiyat { font-family: var(--baslik); font-size: 2rem; font-weight: 600; margin: 0; color: var(--yazi-1); }
.adet { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--cizgi-2); border-radius: 999px; padding: 0.2rem; background: var(--yuzey); }
.adet output { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.adet-dugme { width: var(--dokunma); height: var(--dokunma); border-radius: 50%; border: 0; background: var(--yuzey-2); color: var(--yazi-1); display: grid; place-items: center; cursor: pointer; }
.adet-dugme:hover { background: var(--vurgu-acik); }
.adet-dugme .ikon { width: 1.05rem; height: 1.05rem; }
.ozet-bildirim { min-height: 1.4em; margin: 0.7rem 0 0; text-align: center; color: var(--tamam); font-weight: 700; }
.ozet-bildirim a { color: var(--tamam); }
.kendin-ozet .uyari { color: var(--uyari-yazi); }
.kendin-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--cam); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--yazi-1); border-top: 1px solid var(--cizgi); padding: 0.65rem var(--kenar) calc(0.65rem + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; box-shadow: 0 -8px 24px -16px rgba(30, 36, 23, 0.3); }
.kendin-cubuk p { margin: 0; line-height: 1.2; min-width: 0; flex: 1 1 auto; }
.kendin-cubuk b { font-family: var(--baslik); font-size: 1.3rem; font-weight: 600; }
.kendin-cubuk span { display: block; font-size: 0.8rem; color: var(--yazi-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kendin-cubuk-sepet { margin-left: auto; color: var(--yazi-1); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--dokunma); padding: 0 0.4rem; }
.kendin-cubuk-sepet span { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--vurgu); color: var(--vurgu-uzeri); font-size: 0.78rem; }
.kendin-cubuk .dugme { flex: none; }
@media (max-width: 59.99rem) { .sayfa-kendin .sepet-cubuk { display: none; } }
@media (min-width: 60rem) {
  .kendin-izgara { grid-template-columns: 1.5fr 1fr; gap: 2.25rem; }
  .kendin-ozet { position: sticky; top: 6.5rem; }
  .kendin-cubuk { display: none; }
}
@media (max-width: 59.99rem) { .sayfa-kendin .alt { padding-bottom: 5.5rem; } }

/* sepet ve formlar */
.sepet-izgara { display: grid; gap: 2rem; align-items: start; }
.sepet-bolum { padding-top: 0.5rem; }
.adres-alanlari { display: grid; gap: 1.1rem; }
.adres-alanlari[hidden] { display: none; }
@media (max-width: 47.99rem) { .sepet-liste-kutu { padding: 1.1rem; } .sepet-izgara { gap: 1.5rem; } }
.sepet-liste-kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.4rem; box-shadow: var(--golge-1); }
.kucuk-baslik { font-size: 1.35rem; margin-bottom: 0.9rem; }
.bos-sepet { color: var(--yazi-3); }
.sepet-kalem { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--cizgi); }
.sepet-kalem:first-child { padding-top: 0; }
.sk-ad { font-weight: 700; margin: 0; }
.sk-ayrinti { font-size: 0.88rem; color: var(--yazi-3); margin: 0; grid-column: 1; }
.sk-fiyat { font-family: var(--baslik); font-weight: 600; font-size: 1.12rem; margin: 0; text-align: right; }
.sk-kontrol, .sk-arac { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; }
.sk-kontrol .adet, .sk-arac .adet { border-color: var(--cizgi-2); }
.sk-sil { margin-left: auto; color: var(--uyari-yazi); background: none; border: 0; min-width: var(--dokunma); min-height: var(--dokunma); display: inline-grid; place-items: center; border-radius: 50%; cursor: pointer; }
.sk-sil:hover { background: var(--uyari-zemin); }
.sepet-toplam { margin: 1.1rem 0 0; display: grid; gap: 0.4rem; }
.sepet-toplam div { display: flex; justify-content: space-between; gap: 1rem; }
.sepet-toplam dt { color: var(--yazi-2); }
.sepet-toplam dd { margin: 0; font-weight: 700; }
.sepet-toplam .genel { border-top: 1px solid var(--cizgi-2); padding-top: 0.6rem; margin-top: 0.3rem; font-size: 1.15rem; }
.sepet-toplam .genel dt { color: var(--yazi-1); font-weight: 700; }
.sepet-not { font-size: 0.85rem; color: var(--yazi-3); margin-top: 1rem; }
.salon-seridi { display: inline-flex; gap: 0.6rem; align-items: flex-start; max-width: 100%; background: var(--tamam-acik); color: var(--yazi-1); padding: 0.7rem 1rem; border-radius: var(--r); }
.salon-seridi .ikon { flex: none; margin-top: 0.2rem; color: var(--tamam); }
.siparis-form { display: grid; gap: 1.1rem; }
.alan { display: grid; gap: 0.4rem; }
.alan label, .alan legend { font-weight: 650; font-size: 0.95rem; color: var(--yazi-1); }
.alan input:not([type="checkbox"]):not([type="radio"]), .alan select, .alan textarea { width: 100%; font: 400 1rem/1.4 var(--yazi); color: var(--yazi-1); background: var(--yuzey); border: 1px solid var(--cizgi-alan); border-radius: var(--r); padding: 0.75rem 0.9rem; min-height: 3rem; transition: border-color 0.15s, box-shadow 0.15s; }
.alan textarea { resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 4px var(--halka); }
.alan [aria-invalid="true"] { border-color: var(--uyari-yazi); }
.alan-hata { color: var(--uyari-yazi); font-weight: 600; font-size: 0.9rem; margin: 0; }
.alan-yardim { color: var(--yazi-3); font-size: 0.87rem; margin: 0; }
.istege { font-weight: 500; color: var(--yazi-3); }
.secim-grup { border: 0; padding: 0; margin: 0; }
.secim { display: flex; gap: 0.65rem; align-items: flex-start; font-weight: 500; min-height: var(--dokunma); padding: 0.35rem 0; cursor: pointer; }
.secim input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--vurgu); flex: none; }
.onay .secim { font-size: 0.93rem; }
.form-alt { font-size: 0.85rem; color: var(--yazi-3); margin: 0; }
.uyari { background: var(--uyari-zemin); color: var(--uyari-yazi); border-radius: var(--r); padding: 0.85rem 1rem; }
.uyari p { margin: 0 0 0.3rem; font-weight: 700; }
.uyari ul { margin: 0; padding-left: 1.2rem; }
.uyari a { color: var(--uyari-yazi); }
.flas { display: flex; gap: 0.6rem; align-items: center; background: var(--tamam-acik); color: var(--yazi-1); border-radius: var(--r); padding: 0.8rem 1rem; }
.flas .ikon { color: var(--tamam); }
@media (min-width: 60rem) { .sepet-izgara { grid-template-columns: 1fr 1.1fr; gap: 2.5rem; } .sepet-liste-kutu { position: sticky; top: 6.5rem; } }
.sepet-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--cam); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--yazi-1); border-top: 1px solid var(--cizgi); padding: 0.65rem 0 calc(0.65rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -16px rgba(30, 36, 23, 0.3); }
.sepet-cubuk-ic { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sepet-cubuk p { margin: 0; font-weight: 650; }

/* panel girişi (ziyaretçi düzeninde açılır) */
.sayfa-giris .ust-menu, .sayfa-giris .sepet-dugme, .sayfa-giris .durum-serit, .sayfa-giris .ust-durum, .sayfa-giris .cekmece, .sayfa-giris .alt-izgara, .sayfa-giris .alt-cagri { display: none; }
.sayfa-giris .ust-ada { justify-content: center; }
.sayfa-giris .alt { padding-top: 0.5rem; }
.sayfa-giris .alt-son { margin-top: 0; border-top: 0; }
.giris-form { max-width: 26rem; margin: 1rem 0 0; background: var(--yuzey); border-radius: var(--r-buyuk); padding: 1.6rem; border: 1px solid var(--cizgi); box-shadow: var(--golge-2); }
.giris-form code, .ornek-bilgi code { background: var(--yuzey-2); padding: 0.1rem 0.35rem; border-radius: var(--r-kucuk); }

/* sipariş durumu ve q */
.durum-cizgi { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.durum-cizgi li { border-top: 4px solid var(--cizgi-2); padding-top: 0.55rem; font-size: 0.84rem; font-weight: 600; color: var(--yazi-3); border-radius: 2px; }
.durum-cizgi li.gecti { border-color: var(--tamam); color: var(--yazi-1); }
.durum-cizgi li.simdi { border-color: var(--vurgu); color: var(--yazi-1); }
.kalem-liste { list-style: none; margin: 0; padding: 0; }
.kalem-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--cizgi); }
.kalem-ad { font-weight: 700; margin: 0; }
.kalem-ayrinti { font-size: 0.9rem; color: var(--yazi-3); margin: 0 0 0.2rem; }
.kalem-fiyat { font-family: var(--baslik); font-weight: 600; margin: 0; white-space: nowrap; }
p.ikram { display: flex; gap: 0.5rem; align-items: center; background: var(--bilgi-zemin); color: var(--bilgi-yazi); border-radius: var(--r); padding: 0.75rem 0.95rem; font-weight: 600; }
.q-kapak h1 { margin-bottom: 0.4rem; }
.q-dugmeler { display: grid; gap: 0.6rem; margin-top: 1.6rem; }
.q-dugme { display: flex; gap: 0.9rem; align-items: center; width: 100%; text-align: left; padding: 0.95rem 1.15rem; border-radius: var(--r-buyuk); border: 1px solid var(--cizgi-2); background: var(--yuzey); color: var(--yazi-1); text-decoration: none; font: inherit; cursor: pointer; min-height: 4rem; box-shadow: var(--golge-1); transition: border-color 0.15s; }
.q-dugme:hover { border-color: var(--yazi-1); color: var(--yazi-1); }
.q-dugme .ikon { width: 1.5rem; height: 1.5rem; color: var(--vurgu-koyu); }
.q-dugme b { display: block; font-size: 1.03rem; }
.q-dugme small { color: var(--yazi-3); font-size: 0.85rem; }
.q-birincil { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-uzeri); }
.q-birincil:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); color: var(--vurgu-uzeri); }
.q-birincil .ikon, .q-birincil small { color: var(--vurgu-uzeri); }

/* metin sayfaları ve tablolar */
.metin-sayfa h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.duz-liste { padding-left: 1.2rem; color: var(--yazi-2); }
.duz-liste li { margin-bottom: 0.5rem; }
span.eksik { background: var(--bilgi-zemin); color: var(--bilgi-yazi); padding: 0 0.35rem; border-radius: 4px; font-weight: 600; }
.dort-sayi { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.dort-sayi p { margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.3rem; }
.dort-sayi b { display: block; font-family: var(--baslik); font-size: 1.9rem; font-weight: 600; color: var(--yazi-1); }
.dort-sayi span { color: var(--yazi-3); font-size: 0.92rem; }
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); background: var(--yuzey); }
.tablo { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tablo th, .tablo td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo tbody tr:last-child th, .tablo tbody tr:last-child td { border-bottom: 0; }
.tablo thead th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yazi-3); background: var(--yuzey-2); font-weight: 700; }
.tablo tbody th { font-weight: 700; }
.tablo-alt { display: block; font-weight: 400; font-size: 0.82rem; color: var(--yazi-3); }
.ornek-bilgi { margin-top: 2rem; background: var(--zemin-2); border-radius: var(--r-buyuk); padding: 1rem 1.2rem; font-size: 0.92rem; }

/* alt: açık ton */
.alt { background: var(--zemin-2); color: var(--yazi-2); padding-block: 3.5rem 1.6rem; margin-top: auto; border-top: 1px solid var(--cizgi); }
.alt a { color: var(--yazi-1); }
.alt a:hover { color: var(--vurgu-koyu); }
.alt-izgara { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.alt-marka { font-family: var(--el); text-transform: uppercase; font-size: 1.9rem; line-height: 0.82; color: var(--marka); transform: rotate(-4deg); display: inline-flex; flex-direction: column; margin: 0 0 1rem; }
.alt-marka .marka-alt { padding-left: 0.55em; }
.alt-soz { max-width: 18rem; }
.alt-baslik { color: var(--yazi-1); font-weight: 700; margin-bottom: 0.6rem; }
.alt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; font-size: 0.95rem; }
.alt-liste a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; }
.alt-liste a:hover { text-decoration: underline; }
@media (max-width: 47.99rem) {
  .alt { padding-block: 2.25rem 1.2rem; }
  .alt-izgara { grid-template-columns: 1fr 1fr; grid-template-areas: "marka marka" "siparis takip" "dukkan dukkan"; gap: 1.5rem 1rem; }
  .alt-k-marka { grid-area: marka; }
  .alt-k-siparis { grid-area: siparis; }
  .alt-k-takip { grid-area: takip; }
  .alt-k-dukkan { grid-area: dukkan; }
  .alt-marka { font-size: 1.6rem; margin-bottom: 0.6rem; }
  .alt-liste { font-size: 0.93rem; }
  .alt-son { margin-top: 1.5rem; }
}
.alt-son { border-top: 1px solid var(--cizgi); margin-top: 2.5rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.86rem; color: var(--yazi-3); }
.alt-son p { margin: 0; }
.alt-son a { display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--yazi-2); }
.alt .metin-dugme { color: var(--yazi-2); }
.cerez { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 0.8rem var(--kenar) calc(0.8rem + env(safe-area-inset-bottom)); }
.cerez-ic { max-width: 44rem; margin: 0 auto; background: var(--yuzey); color: var(--yazi-1); border-radius: var(--r-buyuk); box-shadow: var(--golge-2); padding: 1.15rem 1.25rem; border: 1px solid var(--cizgi); }
.cerez-ic p { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--yazi-2); }
.cerez-ic a { color: var(--vurgu-koyu); }
.cerez-dugmeler { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.bildirim { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 45; background: var(--koyu-yuzey); color: var(--beyaz); padding: 0.7rem 1.15rem; border-radius: 999px; font-weight: 600; box-shadow: var(--golge-2); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.bildirim.gorunur { opacity: 1; }

/* ---------- premium iskelet (Revizyon 2; yüzey karakteri tema-*.css'te) ---------- */
h1 { font-size: clamp(2.6rem, 8.2vw, 5.4rem); line-height: 1.02; letter-spacing: -0.028em; font-weight: 520; }
h2 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.06; letter-spacing: -0.022em; font-weight: 520; }
h1 em, h2 em { font-weight: 440; }
.giris { font-size: clamp(1.1rem, 2.2vw, 1.28rem); line-height: 1.55; }
/* hap etiket (eyebrow) */
.ust-etiket { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.38rem 0.85rem; border-radius: 999px; background: var(--etiket-zemin); color: var(--vurgu-koyu); font-size: 0.7rem; letter-spacing: 0.2em; margin-bottom: 1.15rem; border: 1px solid var(--etiket-cizgi); }
/* düğme içinde düğme: sondaki ok kendi dairesinde, üzerine gelince kayar */
.dugme > .ikon-ok:last-child, .dugme-cizgi > .ikon-ok:last-child { width: 2rem; height: 2rem; padding: 0.45rem; margin: -0.3rem -0.85rem -0.3rem 0.15rem; border-radius: 50%; transition: transform 0.45s var(--gecis-yay); }
.dugme > .ikon-ok:last-child { background: rgba(255, 255, 255, 0.16); }
.dugme-cizgi > .ikon-ok:last-child { background: var(--yuzey-2); }
.dugme:hover > .ikon-ok:last-child, .dugme-cizgi:hover > .ikon-ok:last-child { transform: translate(2px, -1px) scale(1.05); }
.dugme, .dugme-cizgi, .dugme-wa { transition: transform 0.3s var(--gecis-yay), background-color 0.3s var(--gecis-yay), border-color 0.3s var(--gecis-yay), color 0.3s var(--gecis-yay); }
.dugme-buyuk { min-height: 3.4rem; padding-inline: 1.9rem; }
/* kapak: meta satırı ve kaynaklı puan */
.kapak-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; margin-top: 1.6rem; color: var(--yazi-3); font-size: 0.9rem; }
.kapak-meta > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.kapak-meta > span + span::before { content: ""; width: 1px; height: 0.9rem; background: var(--cizgi-2); margin-right: 0.65rem; }
.kapak-meta .ikon { color: var(--vurgu-koyu); }
.kapak-meta > .kapak-puan { flex-basis: 100%; }
.kapak-meta > .kapak-puan::before { content: none; }
.hazir-kart .ust-etiket { align-self: flex-start; }
@media (min-width: 60rem) { .hazir-gram b { font-size: 1.85rem; } }
@media (max-width: 47.99rem) { .kapak-meta { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .kapak-meta > span + span::before { content: none; } }
/* masaüstü kapak: metne daha çok yer (büyük serif başlık iki satırda kalsın) */
@media (min-width: 60rem) { .kapak-izgara { grid-template-columns: 1.25fr 0.75fr; } .kapak h1 { font-size: clamp(3rem, 5.6vw, 4.9rem); } }
/* alt bilgi kapanış çağrısı */
.alt-cagri { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--cizgi); }
.alt-cagri > p:first-child { margin: 0; font-family: var(--baslik); font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--yazi-1); max-width: 14em; }
.alt-cagri em { font-style: italic; color: var(--vurgu-koyu); font-weight: 440; }
/* kartlarda dokunma: hafif basılma */
.hazir-kart, .urun, .q-dugme { transition: transform 0.4s var(--gecis-yay), box-shadow 0.4s var(--gecis-yay), border-color 0.3s; }
@media (hover: hover) { .hazir-kart:hover, .q-dugme:hover { transform: translateY(-3px); } }

/* fark yarattığımız alanlar (terazi şeridi yerine) */
.fark { padding-block: clamp(3.5rem, 8vw, 6rem); }
.fark-bas { max-width: 40rem; margin-bottom: 2.25rem; }
.fark-bas .terazi-baslik { font-size: clamp(2rem, 5vw, 3.2rem); }
.fark-bas .terazi-baslik .el { display: block; }
.fark-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: fark; }
.fark-liste li { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 1.4rem 1.35rem 1.3rem; display: grid; align-content: start; gap: 0.35rem; }
.fark-sayi { font-family: var(--baslik); font-weight: 520; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--vurgu-koyu); min-height: 2.6rem; display: flex; align-items: center; }
.fark-sayi .ikon { width: 2.4rem; height: 2.4rem; stroke-width: 1.4; }
.fark-liste h3 { font-family: var(--yazi); font-size: 1.05rem; font-weight: 700; margin: 0.5rem 0 0.1rem; letter-spacing: 0; }
.fark-liste p { margin: 0; font-size: 0.94rem; color: var(--yazi-2); }
.fark-alinti { margin: 2rem 0 0; max-width: 44rem; }
.fark-alinti blockquote { margin: 0; }
.fark-alinti p { margin: 0 0 0.6rem; font-family: var(--baslik); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.35; }
.fark-alinti figcaption { font-size: 0.85rem; font-weight: 600; }

/* ---------- vitrin (5 Eki): sipariş WhatsApp/SepetTakip'ten; site tanıtım + ölçüm ---------- */
.siparis-ust .ikon { width: 1.15rem; height: 1.15rem; }
@media (max-width: 59.99rem) {
  .ust-ada:has(.siparis-ust) { justify-content: flex-start; }
  .ust-ada:has(.siparis-ust) > .marka { position: static; transform: rotate(-4deg); margin: 0 auto 0 0.35rem; }
}
@media (max-width: 23rem) { .siparis-ust { padding: 0 0.8rem; font-size: 0.86rem; } .ust-ada:has(.siparis-ust) > .marka { font-size: 1.15rem; } }
@media (max-width: 59.99rem) { .siparis-ust span:not(.sepet-sayi) { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; } .siparis-ust { padding: 0 1rem; font-size: 0.92rem; } }
.cekmece-siparis b { color: var(--vurgu-koyu); }
.cekmece-siparis > .ikon { background: var(--vurgu); color: var(--vurgu-uzeri); }
.siparis-cubuk p { font-weight: 650; line-height: 1.25; }
@media (max-width: 29.99rem) { .siparis-cubuk p { font-size: 0.92rem; } .siparis-cubuk p span { display: none; } }
.siparis-cubuk p span { display: block; font-size: 0.8rem; color: var(--yazi-3); font-weight: 500; }
.siparis-cubuk .dugme { flex: none; }
body:has(.siparis-cubuk) .alt { padding-bottom: 6rem; }
.alt-cagri-eylem { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.adim-eylem { margin: 1.4rem 0 0; }
.ozet-adet-baslik { margin: 0; font-weight: 650; color: var(--yazi-2); }
body[data-vitrin="1"] .kendin-cubuk b { font-size: 1.05rem; line-height: 1.2; display: block; }
.hazir-alt { flex-wrap: wrap; }
.baglanti-sonuc { display: grid; gap: 1.25rem; align-items: start; margin-top: 1rem; }
.baglanti-sonuc input { font-family: var(--p-sabit, ui-monospace, monospace); font-size: 0.9rem; }
.baglanti-sonuc .qr-kutu { width: 11rem; }
@media (min-width: 48rem) { .baglanti-sonuc { grid-template-columns: minmax(0, 1fr) 11rem; } }

/* giriş hareketi */
.js .belir { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--gecis-yay), transform 0.6s var(--gecis-yay); }
.js .belir.gorundu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .belir { opacity: 1; transform: none; }
}

/* ---------- yüzey: "Gece Bahçesi" (feyz seçti, 5 Eki 2026; marka yönü Revizyon 2). Bu blok en sonda kalmalı: yukarıdakileri ezer.
   Koyu zeytin ada, kapak, terazi şeridi ve alt bilgi; safran kıl çizgi ve ana düğme; açık bölümlerde çift çerçeve. */
:root {
  --r-kucuk: 8px;
  --r: 14px;
  --r-buyuk: 22px;
  --r-bolum: 30px;
  --gece: #1E2417;
  --gece-2: #29321F;
  --gece-yazi: #F1F4EA;
  --gece-yazi-2: #C9CFBE;
  --gece-cizgi: rgba(241, 244, 234, 0.14);
  --safran: #E3A63A;
  --marka-gece: #EC8A48;
  --ada-zemin: rgba(30, 36, 23, 0.88);
  --ada-cizgi: rgba(241, 244, 234, 0.12);
  --ada-yazi: #F1F4EA;
  --ada-yazi-2: #C9CFBE;
  --ada-vurgu: rgba(241, 244, 234, 0.08);
  --ada-dugme: #E3A63A;
  --ada-dugme-yazi: #1E2417;
  --golge-ada: 0 18px 40px -20px rgba(10, 14, 6, 0.6);
  --cekmece-zemin: #1E2417;
  --bezel: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(30, 36, 23, 0.07), 0 0 0 6px rgba(30, 36, 23, 0.03), 0 0 0 7px rgba(30, 36, 23, 0.06), 0 24px 48px -32px rgba(30, 36, 23, 0.35);
  --gece-doku: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.9 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ust .marka, .ust .marka:hover { color: var(--marka-gece); }
.sepet-sayi { background: var(--gece); color: var(--safran); }

/* koyu bölümler: kapak, terazi şeridi, alt bilgi */
.kapak, .terazi-serit, .alt { background-color: var(--gece); background-image: var(--gece-doku); background-size: 180px; color: var(--gece-yazi-2); }
/* telefonda başlık şeridi ve durum satırı da koyu: ada açık bir bantta asılı kalmasın */
@media (max-width: 59.99rem) { .ust { background: var(--gece); } .durum-serit { background: var(--gece); color: var(--gece-yazi-2); max-width: none; margin-inline: 0; padding-bottom: 0.2rem; } }
/* masaüstünde kapak yüzen adanın altına uzanır (telefonda durum satırı kapanmasın diye uzanmaz) */
@media (min-width: 60rem) { .kapak { margin-top: calc(var(--ust-h) * -1); padding-top: calc(var(--ust-h) + clamp(2.5rem, 7vw, 5.5rem)); } }
.kapak h1, .terazi-baslik, .alt-cagri > p:first-child { color: var(--gece-yazi); }
.kapak h1 em, .alt-cagri em, .terazi-baslik .el { color: var(--safran); }
.kapak .giris, .kapak-meta { color: var(--gece-yazi-2); }
.kapak-meta .ikon { color: var(--safran); }
.kapak-meta > span + span::before { background: var(--gece-cizgi); }
.kapak .ust-etiket, .alt .ust-etiket, .terazi-serit .ust-etiket { color: var(--safran); background: transparent; border-color: rgba(227, 166, 58, 0.35); }
.kapak .dugme, .alt .dugme { background: var(--safran); color: var(--gece); }
.kapak .dugme:hover, .alt .dugme:hover { background: var(--gece-yazi); color: var(--gece); }
.kapak .dugme > .ikon-ok:last-child, .alt .dugme > .ikon-ok:last-child { background: rgba(30, 36, 23, 0.12); }
.kapak .dugme-cizgi { background: transparent; color: var(--gece-yazi); border-color: var(--gece-cizgi); }
.kapak .dugme-cizgi:hover { border-color: var(--gece-yazi); color: var(--gece-yazi); }
.kapak-doku { box-shadow: 0 0 0 1px var(--gece-cizgi), 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.kapak-doku-tavuk { box-shadow: none; }
.durum-serit { color: var(--yazi-2); }
.terazi-serit { border-top: 1px solid var(--gece-cizgi); }
.terazi-sayilar p { background: var(--gece-2); border-color: var(--gece-cizgi); box-shadow: none; }
.terazi-sayilar b { color: var(--gece-yazi); }
.terazi-sayilar span { color: var(--gece-yazi-2); }
.alt a, .alt a:hover, .alt-son a { color: var(--gece-yazi); }
.alt-baslik { color: var(--safran); }
.alt-marka { color: var(--marka-gece); }
.alt-cagri, .alt-son { border-color: var(--gece-cizgi); }
.alt .metin-dugme { color: var(--gece-yazi-2); }

/* çekmece koyu */
.cekmece-panel { color: var(--gece-yazi-2); }
.cekmece-grup { color: var(--safran); }
.cekmece-oge { color: var(--gece-yazi); border-color: var(--gece-cizgi); }
.cekmece-oge:hover, .cekmece-oge[aria-current="page"] b { color: var(--gece-yazi); }
.cekmece-oge small, .cekmece-durum, .cekmece-kucuk { color: var(--gece-yazi-2); }
.cekmece-oge > .ikon { background: var(--gece-2); color: var(--gece-yazi); }
.cekmece-kat { border-color: var(--gece-cizgi); }
.cekmece-kat a { background: var(--gece-2); border-color: var(--gece-cizgi); color: var(--gece-yazi); }
.cekmece-kucuk a { color: var(--gece-yazi); }
.cekmece-eylem .dugme-cizgi { background: var(--gece-2); color: var(--gece-yazi); border-color: var(--gece-cizgi); }

/* açık bölümlerde çift çerçeve */
.hazir-kart, .urun, .yorum, .sepet-liste-kutu, .kendin-ozet, .giris-form, .secenek-grup, .q-dugme, .adim-kartlar li, .adimlar li, .dort-sayi p { border-color: transparent; box-shadow: var(--bezel); }
.hazir-kart.one-cikan, .urun-kendin { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px var(--safran), 0 0 0 6px rgba(227, 166, 58, 0.14), 0 24px 48px -32px rgba(30, 36, 23, 0.35); }
.yorum blockquote p::before { color: var(--safran); }

.cekmece-siparis b { color: var(--safran); }
.cekmece-siparis > .ikon { background: var(--safran); color: var(--gece); }
.alt .dugme-cizgi { background: transparent; color: var(--gece-yazi); border-color: var(--gece-cizgi); }
.alt .dugme-cizgi:hover { border-color: var(--gece-yazi); color: var(--gece-yazi); }
.alt .dugme-cizgi > .ikon-ok:last-child { background: var(--gece-2); }
.fark-liste li { background: var(--gece-2); border-color: var(--gece-cizgi); box-shadow: none; }
.fark-sayi { color: var(--safran); }
.fark-liste h3, .fark-alinti p { color: var(--gece-yazi); }
.fark-liste p, .fark-alinti figcaption { color: var(--gece-yazi-2); }