/* ============================================================= *
 * Diyet Burda — stil dosyası
 * Marka: Mor (#AE8CA3) · Beyaz · Siyah  |  Yazı tipi: Inter
 * ============================================================= */

:root {
  /* Marka renkleri */
  --mor: #AE8CA3;
  --mor-koyu: #96738A;
  --mor-acik: #C7A9BC;
  --mor-soft: #F3ECF0;
  /* İkincil vurgu rengi (tasarım incelemesi #3) — SADECE başarı/tamamlanma
     anlarında kullanılır (ör. Meydan Okuma tamamlandı, Tabak Puanı halkası
     "iyi" seviyesi) ki mor markanın ana rengi olarak baskın kalsın. */
  --basari: #4CAF7D;
  --basari-soft: #E3F3EA;
  --siyah: #1A1A1A;
  --siyah-yumusak: #2b2b2b;
  --beyaz: #ffffff;

  /* Yüzeyler / metin */
  --zemin: #FAFAFA;
  --kart: #ffffff;
  --metin: var(--siyah);
  --metin-soluk: #6e6e6e;
  --cizgi: #ece4e8;

  --golge: 0 4px 14px rgba(20, 20, 20, 0.06);
  --golge-hover: 0 10px 28px rgba(174, 140, 163, 0.18);
  --yuvarlak: 18px;
  --gecis: 0.22s ease;
}

/* ---------- Karanlık Mod ---------- */
:root[data-tema="karanlik"] {
  color-scheme: dark;
  --zemin: #121212;
  --kart: #1e1e1e;
  --siyah: #ededed;
  --siyah-yumusak: #b5b5b5;
  --metin-soluk: #9a9a9a;
  --cizgi: #333333;
  --golge: 0 4px 14px rgba(0, 0, 0, 0.35);
  --golge-hover: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* --siyah karanlık modda metin rengi oldu; asıl koyu buton/rozet yüzeyi
   kullanan birkaç öğeyi eski koyu tonda sabit tut (beyaz yazıları okunur kalsın) */
:root[data-tema="karanlik"] .back,
:root[data-tema="karanlik"] .btn--outline:hover,
:root[data-tema="karanlik"] .btn--ikincil:hover,
:root[data-tema="karanlik"] .btn--whatsapp,
:root[data-tema="karanlik"] .besin-grup-rozet,
:root[data-tema="karanlik"] .quiz-btn--false {
  background-color: #1a1a1a;
}

/* Formlar ve küçük "beyaz yüzey" bileşenleri koyu modda göz yormasın */
:root[data-tema="karanlik"] .form-row input,
:root[data-tema="karanlik"] .form-row select,
:root[data-tema="karanlik"] .dropdown,
:root[data-tema="karanlik"] .search-input,
:root[data-tema="karanlik"] .chip,
:root[data-tema="karanlik"] .timer,
:root[data-tema="karanlik"] .su-bottle,
:root[data-tema="karanlik"] .btn--google,
:root[data-tema="karanlik"] .kilo-satir,
:root[data-tema="karanlik"] .sh-cup,
:root[data-tema="karanlik"] .sh-saat-ekle-satir input {
  background-color: #262626;
}

.tema-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--gecis);
}

.tema-btn:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Ana sayfa üstünde Duolingo tarzı seri (streak) rozeti — Su
   Hatırlatıcısı'ndaki mevcut seri mantığını (sy-suhatir localStorage,
   bkz. app.js initDashboard) burada da gösteriyoruz, retention için
   ilk bakışta görünür olsun diye tema butonunun yanına, sayfanın en
   üstüne konuldu. */
.dash-seri {
  position: absolute;
  top: 14px;
  right: 60px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  font-weight: 800;
  font-size: 1rem;
  color: var(--beyaz);
}

.dash-seri__alev {
  font-size: 1.05rem;
  line-height: 1;
}

* {
  box-sizing: border-box;
}

/* hidden özniteliği, display kurallarını her zaman ezsin. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  touch-action: manipulation; /* çift dokunuşla yakınlaştırmayı önler (viewport meta ile birlikte) */
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: var(--zemin);
  color: var(--metin);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Genel düzen ---------- */
.app-main {
  max-width: 660px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}

/* ---------- Ana menü ---------- */
.grid-container {
  display: grid;
  /* Tabağını Çek artık hero'nun içinde kahraman CTA olarak duruyor — geri kalan
     16 araç bilerek daha küçük/ikincil görünsün diye 3 sütuna çıkarıldı (önceden
     masaüstünde 2 sütundu). */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

/* Ana sayfa grid'inde araçları kategoriye göre gruplayan ince başlıklar
   (tasarım incelemesi #15) — 16 araç tek uzun liste yerine 4 anlamlı
   gruba bölünüyor, tarama hızını artırır. İlkinde üstte fazla boşluk
   olmasın diye margin-top sıfırlanıyor. */
.grid-kategori-baslik {
  grid-column: 1 / -1;
  margin: 0.8rem 0.1rem 0.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--metin-soluk);
}

.grid-kategori-baslik:first-of-type {
  margin-top: 0.3rem;
}

/* "Tüm Tarifler" sekmesinde aktif kategoriye göre değişen banner —
   Gemini ile üretilen 5 görsel (tasarım incelemesi #9), her biri SAĞDA
   yoğunlaşıp SOLDA başlık için boş bırakılmış. Görsel oranı korunur
   (1024:318), background-image JS'te kategoriye göre değiştiriliyor. */
.np-kategori-banner {
  position: relative;
  aspect-ratio: 1024 / 318;
  border-radius: var(--yuvarlak);
  overflow: hidden;
  margin-bottom: 0.8rem;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.np-kategori-banner span {
  margin-left: 6%;
  font-size: 1.3rem;
  font-weight: 800;
  color: #2b2223;
}

/* Hero banner */
.menu-hero {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-radius: var(--yuvarlak);
  padding: 1.8rem 1.4rem;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.1rem;
  color: var(--beyaz);
  background: linear-gradient(120deg, #AE8CA3, #96738A 45%, #C7A9BC);
  background-size: 200% 200%;
  /* Hero, sayfadaki EN önemli yüzey — geri kalan kartlardan (--golge)
     bilerek daha derin bir gölgeyle ayrışıyor (tasarım incelemesi #4). */
  box-shadow: 0 12px 32px rgba(120, 90, 110, 0.28);
  animation: heroIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both,
             heroGrad 9s ease-in-out infinite;
}

/* Hero'nun içindeki "Tabağını Çek" kahraman CTA'sı — .grid-item'ın
   tıklama mekanizmasını (initRouter'daki data-target delegasyonu) aynen
   kullanır, sadece görünümü hero'ya uygun şekilde geçersiz kılınıyor.
   Descendant seçici bilerek kullanıldı (.grid-item ile aynı özgüllükte
   çakışmayı, dosya sırasına bağlı kalmadan kesin kazanmak için). */
.menu-hero .menu-hero__cta {
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1rem;
  background-color: rgba(255, 255, 255, 0.94);
  border: none;
  animation: none;
  opacity: 1;
  transform: none;
}

.menu-hero .menu-hero__cta:hover,
.menu-hero .menu-hero__cta:focus-visible {
  transform: translateY(-2px);
  background-color: #fff;
}

.menu-hero .menu-hero__cta span {
  /* var(--siyah) BİLEREK kullanılmadı — karanlık modda #ededed'e (metin
     rengi) dönüşüyor, bu buton her temada AYNI açık/beyaz zeminde kaldığı
     için (hero gradyanına karşı kontrast için) sabit koyu renk gerekiyor. */
  color: #2b2223;
  font-weight: 800;
  font-size: 1rem;
}

.menu-hero__cta-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--mor);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  /* "cover": video, banner genişliğini tamamen doldurur (yatay yerleşim) —
     kısa/geniş banner oranına göre üstten/alttan hafifçe taşan kısım
     kırpılır. */
  object-fit: cover;
  object-position: center center;
  opacity: 0.55;
  pointer-events: none;
}

.menu-hero__filtre {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.menu-hero__content {
  position: relative;
  z-index: 2;
  max-width: 78%;
}

.menu-hero__title {
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Kartlar */
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: var(--kart);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  cursor: pointer;
  box-shadow: var(--golge);
  font: inherit;
  color: inherit;
  text-align: center;
  padding: 0;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
  text-decoration: none;
  /* iOS Safari, <button> öğesine bazen metin hizasını soldan başlatan
     yerel bir görünüm uygular; appearance sıfırlanmazsa ikon altındaki
     etiket (Forum vb.) sola kaymış görünebilir. */
  -webkit-appearance: none;
  appearance: none;
}

/* Kademeli giriş (hero = 1. çocuk; kartlar 2–6) */
.grid-item:nth-child(2) { animation-delay: 0.08s; }
.grid-item:nth-child(3) { animation-delay: 0.16s; }
.grid-item:nth-child(4) { animation-delay: 0.24s; }
.grid-item:nth-child(5) { animation-delay: 0.32s; }
.grid-item:nth-child(6) { animation-delay: 0.40s; }
.grid-item:nth-child(7) { animation-delay: 0.48s; }
.grid-item:nth-child(8) { animation-delay: 0.56s; }
.grid-item:nth-child(9) { animation-delay: 0.64s; }
.grid-item:nth-child(10) { animation-delay: 0.72s; }
.grid-item:nth-child(11) { animation-delay: 0.80s; }
.grid-item:nth-child(12) { animation-delay: 0.88s; }
.grid-item:nth-child(13) { animation-delay: 0.96s; }

.grid-item:hover,
.grid-item:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--golge-hover);
  border-color: var(--mor);
  outline: none;
}

.grid-item__media {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: contain;
  background-color: var(--mor-soft);
}

.grid-item__icon {
  /* Artık PNG (Gemini ile üretilen ikon seti, tasarım incelemesi #2) —
     stroke/fill eski SVG'ler içindi, kalsın (zararsız, PNG'de yok
     sayılır) ama width biraz büyütüldü ki çizgi detayları net görünsün,
     object-fit:contain oranı bozmadan sığdırır. */
  width: 34px;
  height: 34px;
  object-fit: contain;
  stroke: var(--mor);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 1rem auto 0.5rem;
  display: block;
}

.media--besin { background-color: #e3f6e8; }
.media--vki   { background-color: #F3ECF0; }
.media--quiz  { background-color: #F3ECF0; }
.media--yemek { background-color: #ffe9d6; }
.media--su    { background-color: #d9f2ff; }
.media--suhatir { background-color: #d7f0ff; }
.media--yuruyus { background-color: #e3f6e8; }
.media--vitamin { background-color: #e6f7e9; }
.media--kilotakip { background-color: #d9f7f0; }

.grid-item__label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--siyah);
  text-align: center;
  padding: 0.5rem 0.4rem 0.75rem;
  line-height: 1.25;
}

@keyframes cardIn {
  to { opacity: 1; transform: none; }
}

/* Sonuç kartlarının (tabak, etiket, karşılaştırma, sohbet) hidden'dan
   çıkarken aniden belirmesi yerine yumuşak bir giriş yapması için genel
   amaçlı sınıf (tasarım incelemesi #12). JS tarafında classList.remove+
   void offsetWidth+classList.add reflow numarasıyla her seferinde yeniden
   tetiklenir — projedeki mevcut animasyon-yeniden-başlatma deseniyle aynı. */
@keyframes sonucGiris {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.sonuc-giris {
  animation: sonucGiris 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Düşünüyor" nabız animasyonu — AI çağrısı sürerken buton metni
   değişiyor (ör. "Bakıyorum…" → "Tabak analiz ediliyor…"), sadece metin
   değişimi yeterince canlı hissettirmiyordu (tasarım incelemesi #11). */
@keyframes dusunmePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.btn--dusunuyor {
  animation: dusunmePulse 1.2s ease-in-out infinite;
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroGrad {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Kaç Litre Su? — page-body kartının kendi arka planı olarak dikey su
   videosu. Video ve üzerindeki ince "kart tonu" katmanı (.su-arkaplan-filtre)
   page-body'nin İLK iki çocuğu; ikisi de position:absolute + NEGATİF
   z-index ile eklendi. CSS istifleme kuralına göre negatif z-index'li
   pozisyonlanmış çocuklar, aynı ebeveynin statik (position vermeyen)
   çocuklarından (form, sonuç, disclaimer vb.) ÖNCE — yani onların
   arkasında — boyanır; bu yüzden form metni her zaman üstte okunaklı
   kalır, video+filtre sadece kartın kendi dikdörtgeni içinde (overflow:
   hidden ile kartın yuvarlak köşelerine kırpılarak) arka plan olur.
   .su-arkaplan-filtre'nin opaklığı = kullanıcının gördüğü "kart
   opaklığı"; değeri düşürüldükçe video daha belirgin görünür. */
.su-arkaplan-videolu {
  position: relative;
  overflow: hidden;
}

.su-arkaplan-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  z-index: -2;
  pointer-events: none;
}

.su-arkaplan-filtre {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: -1;
  pointer-events: none;
}

:root[data-tema="karanlik"] .su-arkaplan-filtre {
  background-color: rgba(18, 18, 18, 0.35);
}

#su-hesaplayici .page-body {
  background-color: transparent;
}

/* Video üzerinde düz duran soluk gri disclaimer metni, videonun açık
   tonlu bölgelerine denk geldiğinde okunaksızlaşabiliyor — arkasına
   ince bir beyaz parıltı (text-shadow) eklenerek kontrastı, videonun
   görünürlüğünü etkilemeden artırıyoruz. */
#su-hesaplayici .disclaimer {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 255, 255, 0.6);
}

:root[data-tema="karanlik"] #su-hesaplayici .disclaimer {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* ---------- Sayfa (bölüm) ---------- */
.page[hidden] {
  display: none;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
}

.page-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--siyah);
  flex: 1 1 auto;
}

.back {
  background-color: var(--siyah);
  border: none;
  color: var(--beyaz);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background-color var(--gecis);
  text-decoration: none;
}

.back:hover {
  background-color: var(--mor);
}

.page-body {
  background-color: var(--kart);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: 1.6rem;
}

/* ---------- Formlar / butonlar ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-row label {
  font-weight: 600;
  font-size: 0.95rem;
}

.form-row input,
.form-row select,
.dropdown {
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 12px;
  background-color: var(--beyaz);
  color: var(--metin);
  cursor: pointer;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

.form-row input {
  cursor: text;
}

.form-row input:focus,
.form-row select:focus,
.dropdown:focus {
  outline: none;
  border-color: var(--mor);
  box-shadow: 0 0 0 3px var(--mor-soft);
}

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  padding: 0.8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: var(--mor);
  color: var(--beyaz);
  cursor: pointer;
  transition: background-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}

.btn:hover {
  background-color: var(--mor-koyu);
  transform: translateY(-2px);
  box-shadow: var(--golge-hover);
}

.btn--outline {
  background-color: transparent;
  color: var(--siyah);
  border-color: var(--siyah);
}

.btn--outline:hover {
  background-color: var(--siyah);
  color: var(--beyaz);
}

.btn--whatsapp {
  background-color: var(--siyah);
}

.btn--whatsapp:hover {
  background-color: var(--mor);
}

/* Yıkıcı işlem butonu (örn. hesap silme) — .btn ile aynı biçim, kırmızı renk. */
.btn--tehlike {
  background-color: #c62828;
  color: var(--beyaz);
}

.btn--tehlike:hover {
  background-color: #a01d1d;
}

.btn--tehlike:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.35);
}

/* ---------- VKİ sonucu ---------- */
.vki-sonuc {
  display: block;
  margin-top: 1.3rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  font-size: 1.05rem;
  background-color: var(--mor-soft);
  border-left: 5px solid var(--mor);
}

.vki-sonuc:empty {
  display: none;
}

.vki-sonuc--normal { border-left-color: var(--mor); }
.vki-sonuc--dusuk  { border-left-color: var(--siyah); }
.vki-sonuc--fazla  { border-left-color: var(--mor-acik); }
.vki-sonuc--obez,
.vki-sonuc--error  { border-left-color: var(--mor-koyu); }

.disclaimer {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--metin-soluk);
}

/* ---------- Besin değişimleri: arama + çipler + kartlar ---------- */
.besin-controls {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 0.9rem;
  font-size: 1rem;
  pointer-events: none;
}

.search-input {
  width: 100%;
  font: inherit;
  padding: 0.85rem 2.6rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  background-color: var(--beyaz);
  color: var(--metin);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

.search-input:focus {
  outline: none;
  border-color: var(--mor);
  box-shadow: 0 0 0 4px var(--mor-soft);
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-clear {
  position: absolute;
  right: 0.7rem;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background-color: var(--mor-soft);
  color: var(--mor-koyu);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-clear:hover {
  background-color: var(--mor);
  color: var(--beyaz);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  background-color: var(--beyaz);
  color: var(--siyah-yumusak);
  cursor: pointer;
  transition: all var(--gecis);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--mor);
  color: var(--mor-koyu);
}

.chip--active {
  background-color: var(--mor);
  border-color: var(--mor);
  color: var(--beyaz);
}

.besin-sayac {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--metin-soluk);
}

.besin-sayac:empty {
  display: none;
}

.besin-results {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.besin-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background-color: var(--kart);
  border: 1.5px solid var(--cizgi);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  box-shadow: var(--golge);
  opacity: 0;
  transform: translateY(10px);
  animation: kartGir 0.32s ease forwards;
  transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

.besin-card:hover,
.besin-card:focus-visible {
  transform: translateX(3px);
  border-color: var(--mor);
  box-shadow: var(--golge-hover);
  outline: none;
}

.besin-ok {
  margin-left: auto;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--mor);
  line-height: 1;
  flex: 0 0 auto;
}

@keyframes kartGir {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.besin-emoji {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background-color: var(--mor-soft);
  border-radius: 12px;
  overflow: hidden;
}

/* Gerçek foto emoji kutusunu kaplar; yüklenemezse JS img'yi kaldırır. */
.besin-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background-color: var(--mor-soft);
}

.besin-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.besin-ad {
  font-weight: 700;
  font-size: 1rem;
  color: var(--siyah);
}

.besin-ad mark {
  background-color: #ffe08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.besin-grup-rozet {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background-color: var(--siyah);
  color: var(--beyaz);
}

.besin-detay {
  font-size: 0.85rem;
  color: var(--metin-soluk);
}

.besin-bos {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--metin-soluk);
  font-weight: 600;
  background-color: var(--kart);
  border: 1.5px dashed var(--cizgi);
  border-radius: var(--yuvarlak);
}

/* ---------- Eşdeğer (değişim) penceresi ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(20, 20, 20, 0.55);
  animation: modalFade 0.25s ease;
}

.modal__sheet {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 88vh;
  overflow-y: auto;
  background-color: var(--kart);
  border-radius: 22px 22px 0 0;
  padding: 1.5rem 1.4rem 2rem;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
  animation: modalUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 560px) {
  .modal { align-items: center; }
  .modal__sheet { border-radius: 22px; }
}

@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background-color: var(--mor-soft);
  color: var(--mor-koyu);
  font-size: 0.9rem;
  cursor: pointer;
}

.modal__close:hover {
  background-color: var(--mor);
  color: var(--beyaz);
}

.modal__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 2.4rem;
  margin-bottom: 1.1rem;
}

.modal__emoji {
  position: relative;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background-color: var(--mor-soft);
  border-radius: 16px;
  overflow: hidden;
}

.modal__grup {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mor-koyu);
  background-color: var(--mor-soft);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.modal__title {
  margin: 0.3rem 0 0.2rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--siyah);
}

.modal__portion {
  margin: 0;
  font-size: 0.92rem;
  color: var(--metin-soluk);
  font-weight: 600;
}

.modal__intro {
  margin: 0 0 1rem;
  font-weight: 600;
}

.modal__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.esdeger {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 12px;
  background-color: var(--zemin);
}

.esdeger-emoji {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background-color: var(--mor-soft);
  border-radius: 10px;
  overflow: hidden;
}

.esdeger-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.esdeger-ad {
  font-weight: 700;
  color: var(--siyah);
}

.esdeger-detay {
  font-size: 0.85rem;
  color: var(--metin-soluk);
}

.modal__note {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  background-color: var(--mor-soft);
  border-radius: 12px;
  color: var(--siyah-yumusak);
}

/* ---------- Quiz ---------- */
.quiz {
  text-align: center;
}

.timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--mor);
  color: var(--mor);
  font-weight: 800;
  font-size: 1.2rem;
  background-color: var(--beyaz);
}

.soru {
  font-size: 1.3rem;
  font-weight: 700;
  min-height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.4rem;
}

.quiz-btn-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.quiz-btn {
  flex: 1 1 0;
  max-width: 160px;
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--beyaz);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform var(--gecis), opacity var(--gecis), box-shadow var(--gecis);
}

.quiz-btn--true { background-color: var(--mor); }
.quiz-btn--false { background-color: var(--siyah); }

.quiz-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: var(--golge-hover);
}

.quiz-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.result-animation {
  min-height: 1.6em;
  margin: 1rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  opacity: 0;
}

.result-animation.show {
  animation: fadeInOut 1.2s ease;
}

.result-animation--ok { color: var(--mor); }
.result-animation--no { color: var(--siyah); }

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}

.score {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

#score-bar {
  width: 100%;
  height: 18px;
  appearance: none;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--mor-soft);
}

#score-bar::-webkit-progress-bar { background-color: var(--mor-soft); }
#score-bar::-webkit-progress-value { background-color: var(--mor); }
#score-bar::-moz-progress-bar { background-color: var(--mor); }

#replay-btn {
  margin-top: 1.3rem;
}

#replay-btn[hidden] {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  /* Ana menü mobilde tek ekrana sığsın (aşağı kaydırma gerekmesin) diye
     3 sütun + küçültülmüş hero/kartlar. */
  .app-main {
    padding: 0.9rem 0.7rem calc(1.1rem + env(safe-area-inset-bottom));
  }
  .menu-hero {
    min-height: 84px;
    padding: 0.9rem 1rem;
  }
  .menu-hero__title {
    font-size: 1.05rem;
  }
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .grid-item__media { height: 62px; }
  .grid-item__label { font-size: 0.68rem; padding: 0.4rem 0.35rem; line-height: 1.2; }

  .besin-table th,
  .besin-table td {
    font-size: 0.85rem;
    padding: 0.55rem;
  }

  .soru {
    font-size: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Ne Pişirsem? (Yemek Önerisi) ---------- */
.yemek-aciklama {
  margin: 0 0 1rem;
  color: var(--metin-soluk);
  font-weight: 500;
}

.search-add {
  font-size: 1.3rem;
  font-weight: 700;
}

.malzeme-oneri:empty {
  display: none;
}

.oneri-kutu {
  margin-bottom: 0.8rem;
  padding: 0.7rem 0.9rem;
  background-color: #fff6d9;
  border: 1.5px solid #ffe08a;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.oneri-btn {
  font: inherit;
  font-weight: 700;
  color: var(--beyaz);
  background-color: var(--mor);
  border: none;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  cursor: pointer;
}

.oneri-btn:hover {
  background-color: var(--mor-koyu);
}

.chip--removable {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chip--removable span {
  font-size: 0.75rem;
  opacity: 0.85;
}

#secili-malzemeler:not(:empty) {
  margin-bottom: 1rem;
}

.tam-rozet {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background-color: var(--mor);
  color: var(--beyaz);
}

.tarif-eslesme {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mor-koyu);
  margin-top: 0.1rem;
}

.tarif-altbaslik {
  margin: 1.3rem 0 0.7rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--siyah);
}

.tarif-malzeme-satir {
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  font-weight: 600;
  border: 1.5px solid var(--cizgi);
}

.tarif-malzeme-satir.var {
  background-color: var(--mor-soft);
  border-color: var(--mor);
  color: var(--mor-koyu);
}

.tarif-malzeme-satir.yok {
  background-color: var(--zemin);
  color: var(--metin-soluk);
}

.tarif-adimlar {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tarif-adimlar li {
  line-height: 1.55;
  padding-left: 0.3rem;
}

.tarif-adimlar li::marker {
  color: var(--mor);
  font-weight: 800;
}

/* ---------- Kaç Litre Su? ---------- */
.su-sonuc {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.4rem;
  padding: 1.2rem;
  border-radius: var(--yuvarlak);
  background-color: var(--mor-soft);
  animation: cardIn 0.4s ease both;
}

.su-bottle {
  position: relative;
  flex: 0 0 auto;
  width: 70px;
  height: 130px;
  border: 3px solid var(--mor);
  border-radius: 16px 16px 20px 20px;
  background-color: var(--beyaz);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Şişe kapağı */
.su-bottle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 10px;
  border-radius: 4px 4px 0 0;
  background-color: var(--mor);
}

.su-bottle__fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #4fc3f7, #0288d1);
  transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.su-bottle__litre {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--siyah);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  z-index: 2;
}

.su-buyuk {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  color: var(--siyah);
}

.su-detay {
  margin: 0;
  font-size: 0.92rem;
  color: var(--siyah-yumusak);
  font-weight: 500;
}

/* ---------- Değişim sayacı + besin değeri (modal) ---------- */
.degisim-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.2rem 0 0.7rem;
  padding: 0.6rem 0.9rem;
  background-color: var(--mor-soft);
  border-radius: 12px;
}

.degisim-label {
  font-weight: 700;
  color: var(--siyah);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.stepper__btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background-color: var(--mor);
  color: var(--beyaz);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--gecis), transform var(--gecis);
}

.stepper__btn:hover {
  background-color: var(--mor-koyu);
  transform: scale(1.08);
}

.stepper__val {
  min-width: 84px;
  text-align: center;
  font-weight: 600;
  color: var(--siyah);
}

.stepper__val strong {
  font-size: 1.15rem;
  color: var(--mor-koyu);
}

.modal__besindeger {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--siyah-yumusak);
  background-color: var(--zemin);
  border: 1.5px dashed var(--mor-acik);
  border-radius: 12px;
  text-align: center;
}

/* ---------- Günlük değişim takibi ---------- */
.takip {
  margin-bottom: 1.1rem;
  padding: 0.9rem 1rem;
  background-color: var(--kart);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
}

.takip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.takip__title {
  font-weight: 800;
  color: var(--siyah);
}

.takip__sifirla {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mor-koyu);
  background-color: var(--mor-soft);
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis);
}

.takip__sifirla:hover {
  background-color: var(--mor);
  color: var(--beyaz);
}

.takip__gruplar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.takip-chip {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mor-koyu);
  background-color: var(--mor-soft);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  animation: cardIn 0.3s ease both;
}

.takip-bos {
  font-size: 0.85rem;
  color: var(--metin-soluk);
  font-weight: 500;
}

.takip__toplam {
  margin-top: 0.6rem;
  font-weight: 800;
  color: var(--siyah);
}

.takip__toplam:empty {
  display: none;
}

/* Modal "Güne ekle" butonu */
.modal__ekle {
  width: 100%;
  margin: 0 0 1rem;
}

.modal__ekle--ok {
  background-color: var(--mor-koyu);
}

/* ---------- Ortak sonuç başlığı (VKİ/Su/Kilo geçmişi vb.) ---------- */
.sonuc-baslik {
  margin: 1.3rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--siyah);
}
.sonuc-baslik:first-child {
  margin-top: 0;
}

/* ---------- Fiyatlandırma (paywall) ---------- */
.fiyat-kart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--kart);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
  padding: 1.6rem;
}

/* Kilit ekranına (paywall) Gemini ile üretilen doku arka planı (tasarım
   incelemesi #20) — SADECE #fiyat-kilit içindeki .fiyat-kart'ı etkiler,
   .fiyat-kart'ın giriş ekranındaki (auth) diğer kullanımına dokunmaz.
   Görsel her zaman açık pastel tonda olduğu için, kart içindeki TÜM
   metin/yüzey renklerini (--siyah vb.) tema ne olursa olsun açık moddaki
   değerlere SABİTLİYORUZ — CSS değişkenleri bu elemandan aşağıya doğru
   miras kaldığı için tek satırda tüm alt öğeleri kapsıyor (aksi halde
   karanlık modda --siyah beyaza döner, görsel üzerinde okunmaz olur —
   bkz. menu-hero__cta'da öğrenilen aynı ders). */
#fiyat-kilit .fiyat-kart {
  background-image: url("img/kilit-arkaplan.jpg");
  background-size: cover;
  background-position: center;
  background-color: transparent;
  --siyah: #1A1A1A;
  --siyah-yumusak: #2b2b2b;
  --metin-soluk: #6e6e6e;
  --kart: #ffffff;
  --zemin: #FAFAFA;
  --cizgi: #ece4e8;
  --mor-soft: #F3ECF0;
}

.fiyat-vurgu {
  margin: 0;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--mor-koyu);
}

.fiyat-liste {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.3rem;
  color: var(--metin);
}

.fiyat-liste li {
  font-size: 0.95rem;
  line-height: 1.4;
}

.btn--ikincil {
  background-color: transparent;
  color: var(--siyah);
  border-color: var(--siyah);
}

.btn--ikincil:hover {
  background-color: var(--siyah);
  color: var(--beyaz);
}

.linkbtn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 800;
  color: var(--mor-koyu);
  text-decoration: underline;
  cursor: pointer;
}

/* KVKK / Gizlilik Politikası sayfaları için ortak stiller. */
.legal-guncelleme {
  color: var(--metin-soluk);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

/* ---------- Profil sayfası ---------- */
.profil-hesap-kart {
  background-color: var(--mor-soft);
  border-radius: var(--yuvarlak);
  padding: 1rem 1.2rem;
  margin-bottom: 1.4rem;
}

.profil-isim {
  margin: 0 0 0.2rem;
  font-weight: 800;
  font-size: 1.1rem;
}

.profil-email {
  margin: 0;
  color: var(--metin-soluk);
  font-size: 0.9rem;
}

.profil-top-ozet {
  margin: 0.6rem 0 0.3rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.pf-rumuz-kart {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-bottom: 0.4rem;
}

.pf-avatar-buyuk {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--mor);
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.6rem;
  object-fit: cover;
}

.pf-rumuz-govde {
  flex: 1;
  min-width: 0;
}

.pf-rumuz-adi {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}

.gecmis-tablo-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.6rem;
}

.gecmis-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.gecmis-tablo th,
.gecmis-tablo td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}

.gecmis-tablo th {
  font-weight: 700;
  color: var(--metin-soluk);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.gecmis-tablo tr:last-child td {
  border-bottom: none;
}

/* .besin-bos ile AYNI "davetkar bos durum" görünümü (tasarim incelemesi
   #14) - önceden sadece düz gri metindi, tutarlilik icin ayni kart
   stiline getirildi. */
.gecmis-bos {
  text-align: center;
  padding: 1.6rem 1rem;
  color: var(--metin-soluk);
  font-size: 0.9rem;
  font-weight: 600;
  background-color: var(--kart);
  border: 1.5px dashed var(--cizgi);
  border-radius: var(--yuvarlak);
  margin-bottom: 1.6rem;
}

/* ---------- Giriş / Kayıt / Deneme-kilit ekranı (tam paywall kapısı) ---------- */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background-color: var(--zemin);
}

.auth__box {
  width: 100%;
  max-width: 420px;
}

.auth__baslik {
  margin: 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--siyah);
}

.auth__alt {
  margin: 0;
  text-align: center;
  color: var(--metin-soluk);
}

.auth__ayrac {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--metin-soluk);
  font-size: 0.85rem;
}

.auth__ayrac::before,
.auth__ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--cizgi);
}

.auth__hata {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background-color: #fdecea;
  border: 1.5px solid #f3c2bb;
  border-radius: 12px;
  color: #b3261e;
  font-size: 0.88rem;
}

.auth__atla {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  background: none;
  border: none;
  color: var(--metin-soluk);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: var(--beyaz);
  color: var(--siyah);
  border: 1.5px solid var(--cizgi);
}

.btn--google:hover {
  background-color: var(--zemin);
}

/* Giriş ekranı kartının arka planındaki tanıtım videosu — düşük opaklıkla
   kartın beyaz zemininin üzerine biner, böylece yazılar/form alanları
   rahatlıkla okunur/kullanılırken hafif bir hareket hissi kalır. */
.auth__box--video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.auth__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

.auth__icerik {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- Vitamin & Mineral rehberi ---------- */
.vitamin-metin {
  margin: 0;
  line-height: 1.55;
  color: var(--siyah-yumusak);
}

.kaynak-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.kaynak-chip {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mor-koyu);
  background-color: var(--mor-soft);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* ---------- Kilo Takibi ---------- */
.kilo-ozet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.3rem;
}

.kilo-ozet:empty {
  display: none;
}

.ozet-kart {
  flex: 1 1 0;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.8rem 0.6rem;
  background-color: var(--mor-soft);
  border-radius: 14px;
}

.ozet-deger {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--mor-koyu);
}

.ozet-etiket {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--siyah-yumusak);
  text-align: center;
}

.kilo-bos {
  margin: 0;
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--metin-soluk);
  font-weight: 500;
  background-color: var(--zemin);
  border: 1.5px dashed var(--cizgi);
  border-radius: var(--yuvarlak);
}

.kilo-bos-gorsel {
  width: 100%;
  max-width: 280px;
  border-radius: var(--yuvarlak);
  margin: 0 auto 1rem;
  display: block;
}

.kilo-grafik {
  margin-top: 1rem;
}

.kilo-grafik:empty {
  display: none;
}

.kilo-svg {
  width: 100%;
  height: auto;
  background-color: var(--zemin);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 0.4rem;
}

.kilo-cizgi {
  fill: none;
  stroke: var(--mor);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cizgiCiz 0.9s ease forwards;
}

@keyframes cizgiCiz {
  to { stroke-dashoffset: 0; }
}

.kilo-nokta {
  fill: var(--mor);
  stroke: var(--beyaz);
  stroke-width: 1.5;
}

.kilo-hedef-cizgi {
  stroke: var(--siyah);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0.55;
}

.kilo-hedef-yazi {
  fill: var(--siyah-yumusak);
  font-size: 9px;
  font-weight: 700;
}

.kilo-eksen {
  fill: var(--metin-soluk);
  font-size: 9px;
  font-weight: 600;
}

.kilo-liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kilo-satir {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  background-color: var(--beyaz);
  border: 1.5px solid var(--cizgi);
  border-radius: 12px;
}

.kilo-tarih {
  flex: 1 1 auto;
  font-weight: 600;
  color: var(--siyah-yumusak);
}

.kilo-deger {
  font-weight: 800;
  color: var(--siyah);
}

.kilo-sil {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background-color: var(--mor-soft);
  color: var(--mor-koyu);
  font-size: 0.8rem;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--gecis), color var(--gecis);
}

.kilo-sil:hover {
  background-color: var(--mor);
  color: var(--beyaz);
}

/* ---------- Kilo Takibi ↔ VKİ/Kalori bağlantısı ---------- */
.kilo-baglanti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.kilo-baglanti:empty {
  display: none;
}

.baglanti-kart {
  flex: 1 1 0;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.8rem 0.6rem;
  background-color: #e0f5f0;
  border: 1.5px solid #bfe9e0;
  border-radius: 14px;
}

.baglanti-deger {
  font-size: 1.2rem;
  font-weight: 800;
  color: #127a68;
}

.baglanti-etiket {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--siyah-yumusak);
  text-align: center;
}

.kilo-ipucu {
  margin: 0;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  background-color: var(--zemin);
  border: 1.5px dashed var(--cizgi);
  border-radius: 12px;
  color: var(--metin-soluk);
}

/* ---------- Su Hatırlatıcısı ---------- */
.sh-gosterge {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}

.sh-cup {
  position: relative;
  flex: 0 0 auto;
  width: 86px;
  height: 110px;
  border: 3px solid #29b6f6;
  border-top: none;
  border-radius: 8px 8px 26px 26px;
  background-color: var(--beyaz);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
}

.sh-cup-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #4fc3f7, #0288d1);
  transition: height 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-yuzde {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--siyah);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  z-index: 2;
}

.sh-bilgi {
  flex: 1 1 auto;
}

.sh-sayi {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--siyah);
}

.sh-litre {
  margin: 0.1rem 0 0.8rem;
  font-weight: 600;
  color: var(--siyah-yumusak);
}

.sh-btns {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sh-saat-ekle-satir {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.sh-saat-ekle-satir input {
  flex: 1 1 0;
  font: inherit;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--cizgi);
  border-radius: 12px;
  background-color: var(--beyaz);
  color: var(--metin);
}

.sh-saat-ekle-satir input:focus {
  outline: none;
  border-color: var(--mor);
  box-shadow: 0 0 0 3px var(--mor-soft);
}

.sh-saat-ekle-satir .btn {
  flex: 0 0 auto;
  padding: 0.7rem 1.1rem;
}

.sh-saat-sayac {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--metin-soluk);
}

.sh-saat-liste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.sh-saat-liste:empty {
  display: none;
}

.sh-saat-bos {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--metin-soluk);
  padding: 0.45rem 0;
}

.sh-aktif-satir {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.sh-aktif-satir input {
  width: 18px;
  height: 18px;
  accent-color: var(--mor);
  cursor: pointer;
}

.sh-durum {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--siyah-yumusak);
  background-color: #e7f5fe;
  border-radius: 12px;
}

.sh-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  max-width: 90%;
  padding: 0.8rem 1.2rem;
  background-color: #0288d1;
  color: var(--beyaz);
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sh-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Doğru-Yanlış: efektler ---------- */
/* Kart arka planı — sağlıklı besinler flat-lay fotoğrafı, üzerine
   okunaklılık için yumuşak beyaz bir örtü (overlay). Oyun kartı
   (.quiz2) kendi opak beyaz zeminini koruyor, fotoğraf esas olarak
   başlangıç ekranı ve liderlik tablosu bölgesinde görünüyor. */
/* Tasarım incelemesi #10 — eski arka plan gerçek bir fotoğraftı (Meyve
   Patlatma/Raf Dizme'nin illüstrasyon diliyle tutarsızdı, bkz. #1).
   Gemini ile üretilen eğlenceli karakter illüstrasyonu — üst ve alt
   şeritler halinde (orijinal görselin ortasındaki sahte "True/False"
   metnini/pankartını KIRPARAK attık, sadece temiz kısımlar kullanıldı)
   — artık diğer oyunlarla aynı ailede. Orta bölge soru/buton alanı
   için sade bırakıldı. */
#dogru-yanlis .page-body.quiz {
  position: relative;
  background-color: var(--mor-soft);
  background-image:
    url("img/dogru-yanlis-ust.jpg"),
    url("img/dogru-yanlis-alt.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  /* Sabit yükseklik — "auto" kart genişliğine göre orantılı büyüyüp
     şeritlerin ortada üst üste binmesine, içeriğin okunmaz olmasına
     neden oluyordu. 110px her ekran genişliğinde kompakt bir aksan
     şeridi olarak kalır. */
  background-size: 100% 110px, 100% 110px;
}

/* Şeritler artık kompakt olsa da, başlangıç ekranının (oyun kartı
   OYNANMADAN önceki hâli, .quiz2'nin aksine kendi arka planı yoktu)
   metni doğrudan illüstrasyonun üzerine düşebiliyordu — .quiz2 ile
   AYNI opak kart deseni verildi, tutarlılık + okunabilirlik için. */
#dogru-yanlis .q-baslangic {
  position: relative;
  z-index: 1;
  background-color: var(--kart);
  border: 1.5px solid var(--cizgi);
  border-radius: 20px;
  box-shadow: var(--golge);
  margin: 90px 0;
}

/* Seri (streak) rozeti — üst üste doğru cevaplarda görünür, nabız atar. */
.q-seri {
  font-weight: 900;
  font-size: 0.95rem;
  color: #c2410c;
  background: #ffedd5;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.q-seri.q-seri--pop {
  animation: seriPop 0.4s ease;
}
@keyframes seriPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Kart geneli tepki — doğru cevapta parıltı, yanlışta sallanma. */
.quiz2.karti-parla {
  animation: kartiParla 0.55s ease;
}
@keyframes kartiParla {
  0% { box-shadow: var(--golge); }
  35% { box-shadow: 0 0 0 6px rgba(46, 158, 79, 0.28), 0 0 40px 6px rgba(46, 158, 79, 0.25); }
  100% { box-shadow: var(--golge); }
}
.quiz2.karti-salla {
  animation: kartiSalla 0.5s ease;
}
@keyframes kartiSalla {
  0%, 100% { transform: translateX(0); box-shadow: var(--golge); }
  20% { transform: translateX(-9px); box-shadow: 0 0 0 6px rgba(229, 57, 53, 0.22); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* Ambient yüzen besin emojileri — oyun boyunca sürekli, hafif hareket. */
.q-yuzen {
  position: absolute;
  font-size: 1.3rem;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  animation: qYuzenHareket 6.5s ease-in-out infinite;
}
.q-yuzen--1 { top: 8%; left: 4%; animation-delay: 0s; }
.q-yuzen--2 { top: 14%; right: 5%; animation-delay: 1.4s; font-size: 1.5rem; }
.q-yuzen--3 { bottom: 10%; left: 6%; animation-delay: 2.8s; font-size: 1.15rem; }
.q-yuzen--4 { bottom: 16%; right: 4%; animation-delay: 4.1s; }
@keyframes qYuzenHareket {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(10deg); }
}

.quiz {
  position: relative;
}

/* Buton geri bildirimi */
.quiz-btn.flash-dogru {
  background-color: #2e9e4f !important;
  box-shadow: 0 0 0 4px rgba(46, 158, 79, 0.25);
  animation: btnNabiz 0.45s ease;
}

.quiz-btn.flash-yanlis {
  background-color: #e53935 !important;
  box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.25);
  animation: btnSalla 0.45s ease;
}

@keyframes btnNabiz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes btnSalla {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Soru giriş animasyonu */
.soru.soru-gir {
  animation: soruGir 0.4s ease;
}

@keyframes soruGir {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Süre azalınca kırmızı nabız */
.timer--low {
  color: #e53935 !important;
  border-color: #e53935 !important;
  animation: timerNabiz 1s ease-in-out infinite;
}

@keyframes timerNabiz {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* Skor pop */
.score--pop {
  animation: skorPop 0.4s ease;
}

@keyframes skorPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

/* Uçan puan göstergesi */
.puan-ucan {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 1.4rem;
  pointer-events: none;
  z-index: 6;
  animation: puanUc 0.9s ease forwards;
}

.puan-ucan.arti { color: #2e9e4f; }
.puan-ucan.eksi { color: #e53935; }

@keyframes puanUc {
  0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.8); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-52px) scale(1.1); }
}

/* Konfeti */
.konfeti {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  z-index: 5;
  pointer-events: none;
  animation: konfetiDus 1.1s ease-in forwards;
}

@keyframes konfetiDus {
  to { transform: translateY(240px) rotate(540deg); opacity: 0; }
}

/* Sonuç metni — büyüyerek belirir */
.result-animation.show {
  animation: sonucPop 1.3s ease;
}

@keyframes sonucPop {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; transform: scale(1.12); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- Safe-area boşluğu ---------- */
.app-main {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

/* ---------- Dashboard (hero içi) ---------- */
.dash-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.dash-stats:empty {
  display: none;
}
.dash-stat {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
/* ====== Doğru-Yanlış Yarışı (renkli + zamanlı) ve canlı lider tablosu ====== */
.q-baslangic { padding: 1.4rem 0.4rem 1.8rem; }
.q-baslangic .yemek-aciklama { margin-bottom: 1.1rem; }

.quiz2 { position: relative; background: #fff; border: 1.5px solid var(--cizgi); border-radius: 20px; padding: 1.1rem; box-shadow: var(--golge); overflow: hidden; }
.quiz2-ust { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.q-no { font-weight: 800; font-size: .9rem; color: var(--metin-soluk); }
.q-skor { font-weight: 900; font-size: 1.05rem; color: var(--mor-koyu); }
.q-bar { position: relative; height: 22px; border-radius: 999px; background: #eef3f2; overflow: hidden; margin-bottom: 1rem; }
.q-bar-ic { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg,#C7A9BC,#AE8CA3); }
.q-bar-sn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .8rem; color: #0d3b36; text-shadow: 0 1px 2px rgba(255,255,255,.5); }
.soru2 { min-height: 3.2em; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.18rem; font-weight: 800; line-height: 1.35; margin: 0 0 1rem; }
.quiz2-btnler { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.q-btn { font: inherit; font-weight: 900; font-size: 1.05rem; color: #fff; border: none; border-radius: 16px; padding: 1rem .6rem; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0,0,0,.35); transition: transform .12s, filter .12s; }
.q-btn:active { transform: scale(.97); }
.q-btn--d { background: linear-gradient(135deg,#34d399,#059669); }
.q-btn--y { background: linear-gradient(135deg,#fb7185,#e11d48); }
.q-btn:disabled { opacity: .65; }
.q-ipuc { margin: .9rem 0 0; font-size: .78rem; color: var(--metin-soluk); text-align: center; line-height: 1.4; }
.q-bitti { position: absolute; inset: 0; background: rgba(255,255,255,.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.2rem; text-align: center; z-index: 8; }
.q-bitti-emoji { font-size: 3rem; }
.q-bitti-skor { font-size: 2rem; font-weight: 900; background: linear-gradient(135deg,#C7A9BC,#96738A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-bitti-mesaj { font-size: .92rem; color: var(--metin-soluk); max-width: 28ch; min-height: 2.4em; }
.q-bitti .btn { margin-top: .4rem; }

/* ---------- Profil — PDF çıktısı ---------- */
/* "PDF İndir" tarayıcının yazdırma diyaloğunu açar (bkz. app.js); burada
   yazdırırken sadece Profil sayfasının içeriği görünür kalır, geri kalan
   uygulama (menü, diğer sayfalar, butonlar) gizlenir. */
@media print {
  body * {
    visibility: hidden;
  }
  #profil,
  #profil * {
    visibility: visible;
  }
  #profil {
    position: absolute;
    inset: 0;
    padding: 0;
  }
  #profil .back,
  #profil-pdf-btns,
  #profil-pdf-durum {
    display: none !important;
  }
}

/* ---------- AI ile Kalori Tanı ---------- */
.ya-onizleme {
  display: block;
  width: 100%;
  max-width: 320px;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--yuvarlak);
  border: 1.5px solid var(--cizgi);
  margin: 0.8rem 0;
}

.ya-sonuc {
  position: relative;
  overflow: hidden;
  background-color: var(--zemin);
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 1.2rem;
  margin: 1rem 0 1.6rem;
}

.ya-makrolar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.ya-makrolar div {
  text-align: center;
}

.ya-makrolar strong {
  display: block;
  font-size: 1.15rem;
  color: var(--mor-koyu);
}

.ya-makrolar span {
  font-size: 0.72rem;
  color: var(--metin-soluk);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Barkod/Etiket Şeffaflık Tarayıcı ---------- */
#bt-okuyucu {
  margin: 0.8rem 0;
  border-radius: var(--yuvarlak);
  overflow: hidden;
}

.bt-skor-rozet {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
  background-color: var(--cizgi);
}

.bt-skor-rozet--iyi { background-color: #d7f2e0; }
.bt-skor-rozet--dikkat { background-color: #fdedc9; }
.bt-skor-rozet--kacin { background-color: #fbdada; }
.bt-skor-rozet--bilinmiyor { background-color: var(--cizgi); }

/* AI Tabak Puanı (0-100) — Tabağını Çek sonucunda büyük, tek bakışta
   okunur bir rozet (bt-skor-rozet ile aynı yeşil/sarı/kırmızı dil,
   ama "X/100" formatında ve daha büyük punto — paylaşım kartındaki
   ile aynı vurguyu sayfa içinde de vermek için, bkz. app.js). */
.ya-tabak-puani {
  display: flex;
  justify-content: center;
  margin-bottom: 0.6rem;
}

/* Dairesel puan halkası (tasarım incelemesi #6/#7) — 0-100 arası herhangi
   bir puanı göstermek için genel amaçlı, puanHalkasiOlustur() ile
   üretiliyor. Sadece Tabak Puanı'nda değil, aynı desenin geçerli olduğu
   her yerde (ör. ileride VKİ) yeniden kullanılabilir. */
.puan-halka {
  position: relative;
  width: 92px;
  height: 92px;
}

.puan-halka svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.puan-halka-arka {
  fill: none;
  stroke: var(--cizgi);
  stroke-width: 8;
}

.puan-halka-on {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.puan-halka--iyi .puan-halka-on { stroke: var(--basari); }
.puan-halka--orta .puan-halka-on { stroke: #e0a52a; }
.puan-halka--dusuk .puan-halka-on { stroke: #e05d5d; }

.puan-halka-sayi {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--siyah);
}

/* "Daha iyi alternatif var" önerisi — skor rozetinin altında, ayrışan
   bir kutu içinde vurgulanır ("sade sonuç": rozet+bu kutu tek bakışta
   yeterli, ayrıntılar (puanAciklama/katkı maddeleri) altında kalır). */
.bt-alternatif {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  background-color: var(--mor-soft);
  border: 1px solid var(--mor-acik);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--siyah);
}

.bt-katki-listesi {
  margin: 0.6rem 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--siyah-yumusak);
}

.bt-katki-listesi li {
  margin-bottom: 0.2rem;
}

/* ---------- Topluluk / Haftalık Meydan Okuma ---------- */
/* Meydan Okumalar — Topluluk sayfasında, mevcut su/yürüyüş/sebze
   serilerini (bkz. app.js/initMeydanOkumalar) temalı bir hedef kartı
   olarak gösterir. Yeni bir "katılma" akışı yok — kullanıcı zaten o
   aracı kullandıkça ilerleme otomatik yükselir, tamamlanınca paylaşım
   butonu çıkar. */
.meydan-kartlar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}

.meydan-kart {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background-color: var(--kart);
}

.meydan-kart--tamam {
  border-color: var(--basari);
  background-color: var(--basari-soft);
}

.meydan-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

.meydan-bar {
  height: 8px;
  border-radius: 999px;
  background-color: var(--cizgi);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.meydan-bar-ic {
  height: 100%;
  background: linear-gradient(90deg, var(--mor-acik), var(--mor));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.meydan-kart .kilo-ipucu {
  margin: 0;
}

.meydan-kart .meydan-paylas-btn {
  width: 100%;
}

/* Haftalık Diyet Burda Özeti — Topluluk sayfasında Meydan Okumalar'ın
   üstünde, son 7 günün tabak/su/yürüyüş/sebze istatistiklerini özetleyen
   ve paylaşılabilir bir görsele dönüştürülebilen kart. */
.ozet-kart {
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  background: linear-gradient(135deg, var(--mor-soft), var(--kart));
  margin-bottom: 1.2rem;
}

.ozet-satir {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.4rem 0;
}

.ozet-satir + .ozet-satir {
  border-top: 1px solid var(--cizgi);
}

.ozet-bos {
  margin: 0;
  color: var(--metin-soluk);
  font-weight: 500;
}

.ozet-paylas-btn {
  width: 100%;
  margin-top: 0.7rem;
}

/* Kilit ekranındaki tek premium kart — .ozet-kart ile AYNI temel görünüm,
   sadece mor kenarlıkla biraz daha öne çıkarılıyor (bkz. kilitOzetiRenderEt). */
.kilit-premium-kart {
  border-color: var(--mor);
  margin-bottom: 1rem;
}

.kilit-premium-kart .kilo-ipucu {
  margin: 0.3rem 0 0;
}

.top-sen-satir {
  margin: 0.6rem 0;
  padding: 0.5rem 0.8rem;
  border-radius: var(--yuvarlak);
  background-color: var(--cizgi);
  font-weight: 700;
  font-size: 0.9rem;
}

.gecmis-tablo tr.top-satir--sen td {
  font-weight: 700;
  background-color: var(--cizgi);
}

.top-rumuz-hucre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.top-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--mor);
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  object-fit: cover;
}

/* ---------- Forum (Twitter tarzı akış) ---------- */
.fr-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--mor);
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  object-fit: cover;
}

.fr-satir {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid var(--cizgi);
  transition: background-color 0.15s;
}

.fr-satir:hover {
  background-color: var(--mor-soft);
}

.fr-satir--yorum {
  border-bottom: none;
  padding: 0.6rem 0.2rem;
  margin-bottom: 0.4rem;
}

.fr-satir--yorum .fr-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
}

.fr-govde {
  flex: 1;
  min-width: 0;
}

.fr-yazi-ust {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.fr-yazi-rumuz {
  font-weight: 700;
}

.fr-yazi-tarih {
  font-size: 0.8rem;
  color: var(--metin-soluk);
  white-space: nowrap;
}

.fr-yazi-metin {
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0.5rem;
}

.fr-yazi-aksiyonlar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fr-yazi-aksiyonlar button {
  background: none;
  border: none;
  color: var(--metin-soluk);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  transition: background-color 0.15s, color 0.15s;
}

.fr-yazi-aksiyonlar button:hover {
  background-color: var(--mor-soft);
  color: var(--mor);
}

.fr-yorum-alani {
  margin-top: 0.6rem;
}

/* Paylaşım kutusu — Twitter tarzı compose */
.fr-compose {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 0.4rem;
}

.fr-compose-govde {
  flex: 1;
  min-width: 0;
}

.fr-compose-label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.fr-compose textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--cizgi);
  padding: 0.4rem 0;
  font: inherit;
  resize: vertical;
  background-color: transparent;
}

.fr-compose textarea:focus {
  outline: none;
  border-bottom-color: var(--mor);
}

.fr-compose-alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.fr-rozet-gizli {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background-color: #fbdada;
  margin-left: 0.4rem;
}

.fra-satir {
  border-bottom: 1px solid var(--cizgi);
  padding: 0.8rem 0;
}

/* ---------- Lottie dinamik dokunuşlar (başarı onayı) ---------- */

/* Etiket Tarayıcı üst videosu — kısa, sessiz, döngülü bir etiket okuma
   klibi; üzerine hafif beyaz bir örtü (overlay) konarak sayfanın açık
   renk paletiyle uyumlu, göz yormayan bir arka plan görüntüsü elde
   ediliyor (metin/kart üstünde net okunabilirlik korunuyor). */
.bt-video-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 0.8rem;
  border-radius: 14px;
  overflow: hidden;
}
.bt-video-wrap .bt-video {
  display: block;
  width: 100%;
  height: auto;
}
.bt-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* VKİ Hesaplayıcı videosu — dikey (9:16) bir video; kırpılmadan (doğal
   en-boy oranıyla) tam gösterilir, form/butonlar videonun ÜSTÜNE
   bindirilmiş bir katman olarak, alta yaslı durur. Videonun üst kısmı
   (yüz/gövde) net kalsın diye katman aşağıdan yukarı beyaza açılan bir
   geçişle başlıyor. */
.vki-video-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
}
.vki-video-wrap .vki-video {
  display: block;
  width: 100%;
  height: auto;
}
.vki-video-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.5rem 1.1rem 1.1rem;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(174, 140, 163, 0.16) 20%,
    rgba(250, 246, 248, 0.8) 42%,
    rgba(255, 255, 255, 0.82) 100%
  );
}
.vki-video-overlay .form {
  margin-top: 0;
}

.basari-animasyon {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0;
}

.basari-animasyon dotlottie-wc {
  width: 64px;
  height: 64px;
}

.fr-bos-durum {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

.fr-bos-durum dotlottie-wc {
  width: 140px;
  height: 140px;
}

/* ---------- Meyve Patlatma ---------- */
.mo-oyun-alani {
  position: relative;
  max-width: 320px;
  margin: 0 auto 1.2rem;
}

/* Oyun tuvali her karede clearRect ile temizleniyor (opak fillRect yok,
   bkz. oyun.js), yani arkasındaki CSS arka planı meyveler arasındaki
   boşluklardan hep görünür kalır — bu yüzden görsel doğrudan canvas'ın
   kendi background'u olarak eklenebiliyor, ekstra bir kaplama katmanı
   gerekmiyor. */
#mo-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 460;
  background: var(--zemin) url("img/oyun-arkaplan.jpg") center / cover no-repeat;
  border-radius: var(--yuvarlak);
  border: 1px solid var(--cizgi);
  touch-action: none;
}

.mo-ust-bilgi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.7rem;
}

.mo-skor {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--metin);
}

.mo-bitis {
  text-align: center;
  margin-top: 0.8rem;
  padding: 0.9rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
}

/* Oyun sonu paneli giriş animasyonu + kazanma/kaybetme tepkisi.
   .karti-parla/.karti-salla (Doğru-Yanlış quiz'inde tanımlı, bkz.
   yukarıda) buradan da aynen kullanılıyor — yeniden tanımlamaya gerek
   yok, tutarlı bir "kazan/kaybet" görsel dili kuruyor. */
.mo-bitis.mo-bitis--gir {
  animation: moBitisGir 0.5s ease;
}

.mo-bitis.mo-bitis--gir.mo-bitis--kazandi {
  animation: moBitisGir 0.5s ease, kartiParla 0.9s ease 0.15s;
}

.mo-bitis.mo-bitis--gir.mo-bitis--kayip {
  animation: moBitisGir 0.5s ease, kartiSalla 0.5s ease 0.15s;
}

@keyframes moBitisGir {
  0% { opacity: 0; transform: scale(0.85) translateY(10px); }
  60% { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

#mo-konfeti dotlottie-wc {
  width: 160px;
  height: 160px;
}

/* ---------- Raf Dizme ---------- */
.rd-ust-bilgi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.rd-skor,
.rd-sure {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--metin);
}

.rd-oyun-alani {
  position: relative;
  max-width: 420px;
  margin: 0 auto 1.2rem;
}

#rd-raflar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.rd-raf {
  position: relative;
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem;
  background: var(--zemin) url("img/rd-raf-tekstur.jpg") center / cover no-repeat;
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  transition: box-shadow 0.3s ease;
}

/* Bir raf eşleşip boşaldığında kısa bir yeşil parıltıyla "başardın"
   tepkisi verir — kartiParla ile aynı görsel dil (bkz. Doğru-Yanlış
   quiz), JS'te reflow hilesiyle (classList remove+offsetWidth+add)
   tetikleniyor çünkü #rd-raflar her tıklamada innerHTML ile TAMAMEN
   yeniden çiziliyor (bkz. oyun.js'teki not: incremental DOM diff yok). */
.rd-raf.rd-raf--eslesti {
  animation: kartiParla 0.6s ease;
}

.rd-slot {
  flex: 1;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}

/* Dolu her slot, her yeniden çizimde (seçim/taşıma/kuyruk kayması) hafif
   bir "yerine oturma" pop'uyla belirir — sütuna göre kademeli gecikme,
   sürekli hareket hissi (istenen "üst seviye dinamiklik") katıyor. Süre
   kısa tutuluyor ki her tıklamada tekrar tetiklenmesi göz yormasın. */
.rd-slot:not(.rd-slot--bos) {
  animation: rdSlotGir 0.22s ease backwards;
}
.rd-raf .rd-slot:nth-child(1) { animation-delay: 0s; }
.rd-raf .rd-slot:nth-child(2) { animation-delay: 0.03s; }
.rd-raf .rd-slot:nth-child(3) { animation-delay: 0.06s; }

@keyframes rdSlotGir {
  0% { opacity: 0; transform: scale(0.55); }
  100% { opacity: 1; transform: scale(1); }
}

.rd-slot--bos {
  background: transparent;
  border-style: dashed;
}

.rd-slot--secili {
  border-color: var(--mor);
  border-width: 2px;
  background: var(--mor-soft);
  animation: rdSeciliNabiz 1s ease-in-out infinite;
}

@keyframes rdSeciliNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(174, 140, 163, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(174, 140, 163, 0); transform: scale(1.06); }
}

.rd-kuyruk-rozet {
  position: absolute;
  top: -8px;
  right: -6px;
  background: var(--mor);
  color: var(--beyaz);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

.rd-alt-bilgi {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 0.8rem;
}

.rd-bitis {
  text-align: center;
  margin-top: 0.8rem;
  padding: 0.9rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
}

/* Oyun sonu paneli giriş animasyonu — Meyve Patlatma'daki .mo-bitis--gir
   ile AYNI keyframe (moBitisGir, bkz. yukarıda), burada tekrar
   tanımlanmıyor, sadece .rd-bitis'e bağlanıyor. */
.rd-bitis.rd-bitis--gir {
  animation: moBitisGir 0.5s ease;
}

/* ---------- iOS: Apple ile Giriş (yalnız Capacitor/iOS app'inde görünür) ---------- */
.btn--apple {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: #000;
  color: #fff;
  border: none;
}
html.ios .btn--apple { display: flex; }
.btn--apple:hover { opacity: 0.88; }

/* ---------- iOS: Apple IAP paywall (yalnız #iap-blok görünür olduğunda) ---------- */
.iap-plan-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0 auto 1rem;
  max-width: 360px;
}

.iap-plan-liste__secenek {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  border: 1.5px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: 0.8rem 0.6rem;
  cursor: pointer;
  text-align: center;
}

.iap-plan-liste__secenek:has(input:checked) {
  border-color: var(--mor);
  background: var(--zemin);
}

.iap-plan-liste__secenek input {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  width: 15px;
  height: 15px;
  margin: 0;
}

.iap-plan-liste__ad {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--metin-soluk);
}

.iap-plan-liste__fiyat {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.iap-plan-liste__fiyat small {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--metin-soluk);
}

.iap-bilgi {
  font-size: 0.95rem;
  margin: 0 auto 0.9rem;
  max-width: 340px;
  text-align: center;
}

#iap-blok .btn { max-width: 340px; margin: 0 auto 0.5rem; display: block; }

.durum { margin: 0; font-size: .9rem; font-weight: 600; min-height: 1.2em; }

.iap-yasal {
  font-size: 0.78rem;
  color: var(--metin-soluk);
  margin: 0.8rem auto 0;
  max-width: 360px;
  line-height: 1.45;
  text-align: center;
}

.iap-yasal a { color: var(--mor); }