/* ==========================================================================
   GpFit - Design Tokens
   ========================================================================== */
:root {
  --bg: #0a0c0f;
  --bg-soft: #0e1116;
  --card: #141820;
  --card-alt: #1a2029;
  --card-hover: #1e2530;
  --border: #242b35;
  --border-soft: #1c222b;

  --text: #f4f6f8;
  --text-dim: #9aa3af;
  --text-mute: #6b7481;

  --accent: #c6ff3a;
  --accent-2: #9be600;
  --accent-ink: #0b0d10;
  --accent-soft: rgba(198, 255, 58, 0.12);

  --amber: #ffb300;
  --amber-soft: rgba(255, 179, 0, 0.12);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.12);
  --blue: #4da3ff;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --bottomnav-h: 96px;

  /* Platinum kart/topbar/bottom-nav'in ortak katmanli arkaplani - hem
     karanlik hem acik temada ayni degisken adlariyla, sadece renkleri
     degisen 3 katman. Boylece .card, .modal-box, .topbar, .bottom-nav
     tek bir yerden yonetiliyor. */
  --platinum-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 32%);
  --platinum-base: linear-gradient(158deg, #1d1e22 0%, #131418 45%, #0a0a0c 100%);
  --platinum-border: rgba(255, 255, 255, 0.07);
  --platinum-inset: rgba(255, 255, 255, 0.05);
  /* Modal icindeki "cukur" ogeler (arama kutusu, chip, secim listesi) icin
     notr koyu ton - modal govdesinden bir tık daha koyu/farkli olmali. */
  --platinum-well: #16171b;
  --platinum-well-border: rgba(255, 255, 255, 0.08);
  --platinum-well-hover: rgba(255, 255, 255, 0.06);
  --platinum-grey-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 55%);
  --platinum-grey-base: linear-gradient(135deg, #35373d 0%, #202226 30%, #131418 62%, #0a0a0c 100%);

  color-scheme: dark;
}

/* ==========================================================================
   Platinum White (acik tema) - Ay/Gunes dugmesiyle degistirilir, localStorage'a
   kaydedilir. Ana renk tokenlari burada tersine cevrilir; degisken kullanan
   hemen her ogru otomatik uyum saglar. Platinum kart dokusu ve ambient nokta
   dokusu gibi elle hex yazilmis birkac ozel katman ayrica asagida override
   edilir.
   ========================================================================== */
:root[data-theme="light"] {
  --bg: #d9d5c9;
  --bg-soft: #cdc8b9;
  --card: #e6e2d5;
  --card-alt: #d7d2c2;
  --card-hover: #cac5b3;
  --border: #a89f8c;
  --border-soft: #bcb5a1;

  --text: #131416;
  --text-dim: #3d3f43;
  --text-mute: #63656a;

  /* Parlak neon yesil (#c6ff3a) acik/gri zeminde metin/kenarlik olarak
     neredeyse hic kontrast olusturmuyordu (dolgu-arkaplan olarak
     kullanildiginda - butonlar, tab-pill.active - sorun yok, cunku
     uzerine hep koyu --accent-ink yazi biniyor). Bu yuzden acik temada
     SADECE accent/accent-2'nin kendisini, marka rengiyle ayni yonde ama
     yeterince koyu/okunakli bir zeytin-yesile ceviriyoruz; --accent-ink
     koyu kaldigi icin dolgu butonlarin okunurlugu de etkilenmiyor. */
  --accent: #5f8500;
  --accent-2: #4a6900;
  --accent-ink: #0b0d10;
  --accent-soft: rgba(95, 133, 0, 0.18);

  --amber-soft: rgba(255, 179, 0, 0.2);
  --red-soft: rgba(239, 68, 68, 0.18);

  --shadow-card: 0 8px 22px rgba(20, 17, 8, 0.22);

  --platinum-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%);
  --platinum-base: linear-gradient(158deg, #ece6d7 0%, #d9d3c2 45%, #c2baa4 100%);
  --platinum-border: rgba(20, 16, 0, 0.12);
  --platinum-inset: rgba(255, 255, 255, 0.55);
  --platinum-well: #d2ccbb;
  --platinum-well-border: rgba(20, 16, 0, 0.16);
  --platinum-well-hover: rgba(20, 16, 0, 0.08);
  --platinum-grey-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.15) 28%, rgba(255, 255, 255, 0) 55%);
  --platinum-grey-base: linear-gradient(135deg, #ece6d7 0%, #d9d3c2 30%, #c2baa4 62%, #a89f88 100%);
  --ambient-dot-color: rgba(20, 20, 20, 0.07);

  color-scheme: light;
}

.icon { width: 20px; height: 20px; flex: none; }

/* Mobil tarayici/WebView'in dokununca cikardigi varsayilan koyu "golge"
   (tap highlight) tum uygulamada kapali - kartlar, linkler, butonlar; basma
   hissi gereken yerlerde kendi :active stilleri var. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; touch-action: manipulation; }
/* .field, .card gibi display:flex/grid veren siniflarla ayni ozguculukte
   oldugu icin [hidden] tek basina yeterli olmuyordu - burada zorluyoruz. */
[hidden] { display: none !important; }

/* Menu/sekme gecisleri tam sayfa yuklemesi oldugundan eski sayfa kapanip yenisi
   cizilene kadar ekran bir an siyah kaliyordu. Cross-document View Transitions
   ile tarayici yeni sayfa hazir olana kadar eskisini ekranda tutar, sonra kisa
   bir gecisle degistirir (iOS 18.2+ / Chrome 126+; eski surumlerde etkisiz).
   Alt/ust barlar kendi gruplarinda kaldigindan gecis sirasinda yerinde durur. */
@view-transition { navigation: auto; }
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.12s; }
.bottom-nav { view-transition-name: bottom-nav; }
.topbar { view-transition-name: topbar; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Uygulama icindeki sayfalarin arkasinda, sabit (scroll'dan bagimsiz), cok
   hafif/kurumsal bir dekor: iki koseden giren ince neon-yesil kavis + bir
   kosede belli belirsiz nokta dokusu. Tum ana icerigin (kartlar, barlar zaten
   kendi opak arkaplanina sahip) arkasinda kalir, tiklanabilirligi etkilemez. */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
  /* Kendi GPU katmanina izole et - modal acilirken body'nin position:fixed'e
     gecmesi gibi ust seviye layout degisikliklerinde bu (mask + gradient
     iceren, pahali) sabit katman gereksiz yere yeniden boyanmasin. */
  will-change: transform;
  transform: translateZ(0);
}
.ambient-arc {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  opacity: 0.55;
}
.ambient-arc circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.ambient-arc-tl { top: -20vmax; left: -20vmax; }
.ambient-arc-br { bottom: -20vmax; right: -20vmax; }
.ambient-dots {
  position: absolute;
  top: 0; left: 0;
  width: 46vmax;
  height: 46vmax;
  background-image: radial-gradient(var(--ambient-dot-color, rgba(244, 246, 248, 0.14)) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0,0,0,0.5) 0%, transparent 70%);
  mask-image: radial-gradient(circle at 0 0, rgba(0,0,0,0.5) 0%, transparent 70%);
}

a { color: inherit; text-decoration: none; -webkit-touch-callout: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

/* ==========================================================================
   Logo
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.5px;
  line-height: 1;
}
.brand .brand-gp { color: var(--accent); }
.brand .brand-fit { color: var(--text); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.brand-tagline {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
}

/* ==========================================================================
   App shell
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--border-soft);
  padding: calc(env(safe-area-inset-top) + 22px) 16px calc(env(safe-area-inset-bottom) + 22px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  z-index: 40;
  box-sizing: border-box;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 12px;
}
.sidebar-logo .brand { font-size: 22px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-mute);
  margin: 14px 10px 4px;
  font-weight: 600;
}
.sidebar-section-title-admin {
  color: var(--red);
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  /* Sol menu sekmeleri: ust/alt barlarla ayni firçalanmis metal gri buton +
     altin neon yazi (temadan bagimsiz sabit gorunum). GpBot sekmesi de ayni
     metal buton olur ama kendi yesil neon yazisini korur. */
  background-image: url('../icons/nav/bar-bg.jpg');
  background-size: cover;
  background-position: center;
  color: #fff6dd;
  text-shadow: 0 0 3px #ffd766, 0 0 8px rgba(255, 194, 61, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  font-weight: 700;
  font-size: 14.5px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.nav-link .icon { width: 19px; height: 19px; flex: none; filter: drop-shadow(0 0 3px rgba(255, 214, 102, 0.7)); }
.nav-link-gpbot { padding: 8px 14px; }
.nav-gpbot-img-wrap { position: relative; display: inline-flex; flex: none; }
.nav-gpbot-img { width: 38px; height: 38px; object-fit: contain; flex: none; }
.gpbot-nav-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  border: 2px solid var(--bg-soft);
  font-size: 10.5px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.gpbot-icon-bounce { animation: gpbot-jump 0.5s ease-in-out 3; }
@keyframes gpbot-jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.nav-gpbot-text {
  font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: 1px;
  color: #7dffb0;
  text-shadow: 0 0 4px #7dffb0, 0 0 10px #4dffa0, 0 0 20px #22ff88, 0 0 32px rgba(34, 255, 136, 0.6);
}
.nav-link-gpbot.active .nav-gpbot-text { color: #eafff0; }
.nav-link:hover { filter: brightness(1.12); }
.nav-link:active { transform: scale(0.98); filter: brightness(0.9); }
/* Secili sekme: ince altin neon cerceve + parlama (alt navigasyondaki secili
   buton gostergesiyle ayni dil). */
.nav-link.active {
  border-color: #f2d27a;
  color: #fff6dd;
  text-shadow: 0 0 4px #ffe28a, 0 0 11px #ffd158, 0 0 22px rgba(255, 200, 70, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 221, 122, 0.55),
    0 0 10px rgba(255, 214, 90, 0.6),
    0 0 22px rgba(255, 200, 60, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}
/* Cikis anlamsal olarak uyari rengi kalsin: metal buton + kirmizi neon. */
.nav-link.logout {
  color: #ffc9c9;
  text-shadow: 0 0 3px #ff8f8f, 0 0 9px rgba(239, 68, 68, 0.7);
  border-color: rgba(239, 68, 68, 0.45);
}
.nav-link.logout .icon { filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.85)); }

.sidebar-footer { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: auto; flex: none; padding-bottom: 16px; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.main-col { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

/* Ust bar: alt navigasyon bariyla AYNI mermer/altin "mucevher" temasi -
   kullanicinin istegiyle, uygulamanin acik/koyu tema anahtarindan
   BAGIMSIZ, her zaman bu sabit gorunumde (GpBot sayfasi gibi). Bu yuzden
   degisken degil, sabit hex degerleri kullanir - asagidaki genis override
   bloku da (topbar-title, icon-btn, arama kutusu, avatar...) ayni sebeple
   sabit renklere pinlendi, aksi halde tema degiskenleri mermer uzerinde
   okunmaz/gorunmez hale gelirdi. */
.topbar {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 8px) 28px 8px;
  position: sticky;
  top: 0;
  background-image: url('../icons/nav/bar-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 26px 26px;
  /* Mermer kenarina kabarik/embossed bir derinlik veren SABIT (animasyonsuz)
     golge katmani: alt kenar hizasinda ince bir parlak "isik yakalama"
     cizgisi + hemen ustunde yumusak bir ic golge - gercek bir mermer
     plakanin kenar profili gibi. */
  box-shadow:
    0 4px 20px rgba(40, 30, 10, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 7px rgba(40, 30, 10, 0.28);
  z-index: 30;
  gap: 16px;
  box-sizing: border-box;
}
.topbar-title {
  color: #fff6dd !important;
  text-shadow: 0 0 3px #ffd766, 0 0 8px #ffc23d, 0 0 16px rgba(255, 186, 40, 0.7);
}
.topbar .hamburger,
.topbar .icon-btn,
.topbar .avatar {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 100%);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border-color: rgba(255, 255, 255, 0.8);
  color: #6b4f18;
}
.topbar .icon-btn-android { border-color: #3ddc84; }
.topbar .icon-btn-android .icon { color: #3ddc84; }
.topbar .theme-toggle-btn .icon-moon,
.topbar .theme-toggle-btn .icon-sun { color: #6b4f18; }
.topbar .theme-toggle-btn .icon-sun { color: #d99a1f; }
.topbar .avatar {
  background: linear-gradient(145deg, #ffe28a, #d4af37);
  color: #3a2c08;
  border-color: rgba(255, 255, 255, 0.85);
}
.topbar .topbar-search {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.22) 100%);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border-color: rgba(255, 255, 255, 0.8);
  color: #6b4f18;
}
.topbar .topbar-search input { color: #40331f; }
.topbar .topbar-search input::placeholder { color: #7a6a4a; }
.topbar .icon-btn .notif-count { border-color: #ede4cc; }
.topbar .icon-btn .dot { border-color: #ede4cc; }

.streak-digit-badge { display: flex; flex-direction: column; align-items: center; margin-left: 12px; flex: none; }
.streak-digit-row { display: flex; align-items: flex-end; gap: 1px; height: 32px; }
.streak-digit-img { height: 32px; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.streak-digit-caption {
  margin-top: 2px; font-size: 7.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  font-family: Georgia, 'Times New Roman', serif; white-space: nowrap;
  background: linear-gradient(180deg, #ecc588, #a97a3c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.topbar-title { font-size: 15px; font-weight: 700; color: var(--text-dim); }
.hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  align-items: center; justify-content: center;
  flex: none;
}
.hamburger .icon { width: 20px; height: 20px; }

.topbar-search {
  flex: 1;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--text-mute);
}
.topbar-search .icon { width: 17px; height: 17px; flex: none; }
.topbar-search input {
  background: transparent; border: none; outline: none; color: var(--text);
  width: 100%; font-size: 13.5px;
}

.topbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  position: relative;
}
.icon-btn .icon { width: 18px; height: 18px; }

/* Ay/Gunes gorunum degistirme dugmesi - Apple'daki gibi tiklaninca donerek
   birbirinin yerine geciyor. Karanlik tema (varsayilan): Ay gorunur.
   Acik tema ([data-theme="light"]): Gunes gorunur. */
.theme-toggle-btn .icon-moon,
.theme-toggle-btn .icon-sun {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
  transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.3s ease;
  color: var(--text-dim);
}
.theme-toggle-btn .icon-sun {
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
  opacity: 0;
  color: var(--amber);
}
:root[data-theme="light"] .theme-toggle-btn .icon-moon {
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
  opacity: 0;
}
:root[data-theme="light"] .theme-toggle-btn .icon-sun {
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
}
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-soft);
}
.icon-btn .notif-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  border: 2px solid var(--bg-soft);
  font-size: 11px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), #6fae00);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  border: 2px solid var(--border);
  flex: none;
}
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }

/* ==========================================================================
   Content / cards
   ========================================================================== */
.content { padding: 26px 28px 110px; flex: 1; min-width: 0; }

.page-head { margin-bottom: 22px; }
.premium-badge-wrap { position: relative; width: 64px; height: 64px; flex: none; }
.premium-badge-wrap::before {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 162, 76, 0.55) 0%, rgba(212, 162, 76, 0.25) 45%, rgba(212, 162, 76, 0) 72%);
  filter: blur(2px);
  animation: premium-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes premium-glow-pulse {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.premium-badge-img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; max-width: none; height: auto; object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(184, 138, 60, 0.5));
}
.calorie-detail-page-head {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 20;
  background: var(--bg); padding: 7px 0; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.page-head h1 { font-size: 24px; margin: 0 0 4px; font-weight: 800; }
.calorie-detail-page-head h1 { font-size: 13px; margin: 0; }
.page-head p { margin: 0; color: var(--text-dim); font-size: 14px; }

.card {
  background:
    var(--platinum-sheen),
    var(--platinum-base);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 20px;
}
/* Ana sayfa "Gunluk Kalori Hedefin" karti - sol ust griden sag alt siyaha diagonal */
.card-platinum-grey {
  background: var(--platinum-grey-sheen), var(--platinum-grey-base);
}
/* Beslenme sayfasi Kalori Hedefi/Ogun Sayisi karti - gold LED cerceve */
.card-gold-led {
  border: 1.5px solid #d4af37;
  box-shadow:
    var(--shadow-card),
    0 0 9px rgba(212, 175, 55, 0.5),
    0 0 20px rgba(212, 175, 55, 0.28);
}
/* Ana sayfa Gunluk Kalori Hedefin karti - ayni gold LED cerceve, daha soluk */
.card-gold-led-soft {
  border: 1px solid rgba(212, 175, 55, 0.5);
  box-shadow:
    var(--shadow-card),
    0 0 6px rgba(212, 175, 55, 0.25),
    0 0 13px rgba(212, 175, 55, 0.12);
}

/* Grup Uye Takip: lider gorunumunde uyeler arasi hizli gecis yapan kart seti */
.group-member-card { display: none; }
.group-member-card.active { display: block; }
.card-title {
  font-weight: 700; font-size: 15.5px; margin: 0 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-title .muted { font-size: 12.5px; color: var(--text-mute); font-weight: 500; }

.weight-bar-row { display: flex; align-items: center; gap: 12px; }
.weight-bar-value { font-weight: 800; font-size: 15px; white-space: nowrap; flex: none; }
.weight-bar-track { position: relative; flex: 1; height: 6px; background: var(--border-soft); border-radius: 999px; }
.weight-bar-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
.weight-bar-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--accent); background: var(--accent); }
.weight-bar-dot.start { left: 0; }
.weight-bar-dot.end { left: 100%; background: var(--bg); }
.weight-bar-labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-top: 6px; }

.meal-log-group { border: 1px solid var(--accent); border-radius: var(--radius-md); padding: 12px 14px; }

.grid { display: grid; gap: 18px; min-width: 0; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.dashboard-stack { display: flex; flex-direction: column; gap: 18px; }
.weight-card-compact { padding: 12px 20px; }
.weight-card-compact .card-title { margin-bottom: 8px; }
.weight-card-compact .weight-bar-labels { margin-top: 2px; }
.weight-card-compact .muted { margin-top: 6px !important; }
.programs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Stat cards */
.stat-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.stat-icon .icon { width: 22px; height: 22px; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.stat-card .stat-value { font-size: 21px; font-weight: 800; margin-top: 2px; }

/* Progress bars */
.progress-track {
  height: 12px; border-radius: 999px; background: var(--card-alt);
  border: 1px solid var(--border-soft); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.progress-fill.over { background: linear-gradient(90deg, #c0392b, var(--red)); }
.progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.progress-row .big { font-size: 22px; font-weight: 800; }
.calorie-over-badge { color: var(--red); font-weight: 800; font-size: 14px; }
.progress-row .big small { font-size: 13px; color: var(--text-dim); font-weight: 600; }

#calorie-summary-card { padding: 10px 20px; }
#calorie-summary-card .progress-row { margin-bottom: 5px; }
#calorie-summary-card .big { font-size: 12px; }
#calorie-summary-card .big small { font-size: 8px; }
#calorie-summary-card .calorie-over-badge { font-size: 8px; }
#calorie-summary-card .progress-track { height: 6px; }

.macro-row { display: flex; justify-content: space-between; margin-top: 16px; gap: 10px; }
.macro-item { text-align: left; }
.macro-item .label { font-size: 12px; color: var(--text-mute); font-weight: 600; }
.macro-item .value { font-size: 15px; font-weight: 700; margin-top: 2px; }
.macro-mini-track { width: 100%; height: 5px; border-radius: 999px; background: var(--border-soft); margin-top: 8px; overflow: hidden; }
.macro-mini-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.macro-mini-fill.protein { background: var(--red); }
.macro-mini-fill.carbs { background: var(--amber); }
.macro-mini-fill.fat { background: var(--blue); }
@keyframes macro-exceeded-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.macro-exceeded {
  display: inline-block;
  color: var(--red);
  font-size: 1.2em;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.85), 0 0 14px rgba(239, 68, 68, 0.5);
  animation: macro-exceeded-blink 1s ease-in-out infinite;
}

/* Week program strip */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.week-day {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--card-alt);
  padding: 12px 8px;
  text-align: center;
}
.week-day.today { border-color: var(--accent); background: var(--accent-soft); }
.week-day.rest { opacity: 0.55; }
.week-day .d { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.week-day.today .d { color: var(--accent); }
.week-day .m { font-size: 11.5px; font-weight: 600; line-height: 1.5; }

/* Measurements list */
.measure-list { display: flex; flex-direction: column; gap: 12px; }
.measure-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.food-log-row { gap: 10px; }
.food-log-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-log-row .flex.gap-8 { flex: none; }
.food-log-row .val { display: inline-block; min-width: 58px; text-align: right; }
.food-log-edit-trigger {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: none; padding: 4px 0; margin: -4px 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm);
}
.food-log-edit-trigger:active { opacity: 0.7; }
.meal-heading-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.meal-heading-img {
  display: block;
  width: calc(100% + 28px);
  max-width: none;
  height: auto;
  margin: -12px -14px 0 -14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.meal-heading-row .food-log-macros { align-self: flex-start; width: 100%; }
.food-log-macros { display: flex; gap: 24px; padding-left: 2px; }
.macro-tag { font-size: 15px; color: var(--text-mute); font-weight: 600; }
.macro-letter { font-weight: 800; margin-right: 4px; }
.macro-letter.protein { color: var(--red); }
.macro-letter.carbs { color: var(--amber); }
.macro-letter.fat { color: var(--blue); }
.macro-letter.total { color: var(--accent); }
.meal-total-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-right: 48px; }
.btn-quick-meal-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent); background: var(--card-alt);
  color: var(--accent); font-size: 12px; font-weight: 700; font-family: inherit;
  box-shadow: 0 0 6px rgba(198, 255, 58, 0.55), 0 0 14px rgba(198, 255, 58, 0.28);
}
.btn-quick-meal-add .icon { width: 13px; height: 13px; }
.btn-quick-meal-add:active { transform: scale(0.96); }
.meal-total-tag { flex: none; white-space: nowrap; padding-top: 4px; border-top: 1px solid var(--border-soft); }
.measure-row .name { color: var(--text-dim); font-weight: 600; }
.measure-row .val { font-weight: 800; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: 12px 20px;
  font-weight: 700; font-size: 14px;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; filter: grayscale(0.4); cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }

/* Platinum/altin buton - ozellikle "Ogun Ekle" gibi one cikan tekil CTA'lar icin */
.btn-platinum-gold {
  background: radial-gradient(120% 140% at 50% 38%, #e2c585 0%, #cda558 32%, #a9843e 58%, #7a5c26 80%, #4d3a18 100%);
  border: 1.5px solid #4a3616;
  color: #241a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 5px 1px rgba(90, 65, 28, 0.8),
    0 0 15px rgba(201, 163, 85, 0.45),
    0 0 30px rgba(201, 163, 85, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(10, 7, 2, 0.55);
  font-weight: 800;
}
.btn-platinum-gold:active { filter: brightness(0.94); transform: scale(0.98); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: var(--card-alt); color: var(--text-dim); }
/* Ana sayfa / kalori detayi: Dun - Bugun - Yarin secici (Bugun tam ortada).
   Ust/alt barlarla ayni firçalanmis metal + altin neon dil, temadan bagimsiz;
   secili gun platinum-altin dolgu ve parlama alir. */
.day-switch { display: flex; justify-content: center; gap: 10px; margin: -6px 0 14px; }
.day-switch-btn {
  flex: 1 1 0; max-width: 104px; min-width: 0; text-align: center;
  padding: 9px 0; border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.2px; text-decoration: none;
  background-image: url('../icons/nav/bar-bg.jpg'); background-size: cover; background-position: center;
  color: #fff6dd;
  text-shadow: 0 0 3px #ffd766, 0 0 8px rgba(255, 194, 61, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.day-switch-btn:active { transform: scale(0.97); }
.day-switch-btn.active {
  background-image: radial-gradient(120% 140% at 50% 38%, #e2c585 0%, #cda558 32%, #a9843e 58%, #7a5c26 80%, #4d3a18 100%);
  border: 1.5px solid #4a3616;
  color: #241a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 5px 1px rgba(90, 65, 28, 0.8),
    0 0 15px rgba(201, 163, 85, 0.45),
    0 0 30px rgba(201, 163, 85, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(10, 7, 2, 0.55);
}
.calorie-detail-back-btn {
  border: 1.5px solid var(--red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5), 0 0 16px rgba(239, 68, 68, 0.3);
}
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn .icon { width: 16px; height: 16px; }
.btn-android { background: var(--card-alt); border-color: #3ddc84; color: var(--text); }
.btn-android .icon { width: 20px; height: 20px; color: #3ddc84; }
.btn-android:hover { filter: brightness(1.12); }
.auth-android-link { text-align: center; margin-top: 18px; }
.icon-btn-android { border-color: #3ddc84; }
.icon-btn-android .icon { color: #3ddc84; }

/* Tabs (kcal levels) */
.tab-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; min-width: 0; -webkit-overflow-scrolling: touch; }
.tab-pill {
  flex: none;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
.tab-pill.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.kcal-picker-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kcal-picker-btn {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  border: 3px solid var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(198, 255, 58, 0.3);
}
.kcal-picker-btn .icon { width: 20px; height: 20px; }
.kcal-picker-btn:active { transform: scale(0.95); }

.kcal-picker-list {
  max-height: 340px; overflow-y: auto;
  scroll-snap-type: y mandatory;
  display: flex; flex-direction: column;
}
.kcal-picker-item {
  scroll-snap-align: center;
  padding: 16px 20px;
  text-align: center;
  font-weight: 700; font-size: 17px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}
.kcal-picker-item:last-child { border-bottom: none; }
.kcal-picker-item.active { color: var(--accent); background: var(--accent-soft); }

/* Nutrition budget accordion */
.budget-accordion { display: flex; flex-direction: column; gap: 14px; }
.budget-col {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--card);
  overflow: hidden;
}
.budget-head {
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  color: #06110a;
  font-weight: 800;
  border: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: inherit;
  cursor: pointer;
}
.budget-head.low { background: linear-gradient(135deg, #6cd94b, #35a323); }
.budget-head.mid { background: linear-gradient(135deg, #ffcf4d, #ffa500); }
.budget-head.high { background: linear-gradient(135deg, #ff7b6e, #e5342a); color: #2a0402; }
.budget-head .kcal { font-size: 18px; }
.budget-head .name { font-size: 13px; opacity: 0.85; margin-bottom: 2px; }
.accordion-chevron { transition: transform 0.25s ease; flex: none; }
.budget-col.open .accordion-chevron { transform: rotate(180deg); }
.budget-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.budget-col.open .budget-body { max-height: 1200px; }
.budget-coming-soon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 14px; }
.budget-coming-soon img { width: 64px; height: 64px; object-fit: contain; }
.budget-coming-soon .text { font-weight: 700; font-size: 14px; color: var(--text-dim); }

.macro-split-track-wrap { padding: 16px 0; cursor: pointer; }
.macro-split-track-wrap:active .macro-split-track { filter: brightness(1.2); }
.macro-split-track { display: flex; height: 14px; border-radius: 999px; overflow: hidden; }
.macro-split-seg.carb { background: var(--amber); }
.macro-split-seg.protein { background: var(--accent); }
.macro-split-seg.fat { background: var(--blue); }
.macro-split-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.macro-split-item { display: flex; align-items: center; gap: 6px; }
.macro-split-item strong { color: var(--text); }
.macro-split-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.macro-split-item .dot.carb { background: var(--amber); }
.macro-split-item .dot.protein { background: var(--accent); }
.macro-split-item .dot.fat { background: var(--blue); }

.macro-highlight-card {
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--accent-soft), 0 0 24px rgba(198, 255, 58, 0.18);
  cursor: pointer;
}
.macro-adjust-btn {
  box-shadow: 0 0 0 1px var(--border), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Makro ayarlama modalindaki GR/% birim secici */
.macro-unit-toggle {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 18px;
}
.macro-unit-btn {
  padding: 7px 20px; border-radius: 999px; border: 1.5px solid var(--platinum-well-border);
  background: var(--platinum-well); color: var(--text-dim); font-size: 13px; font-weight: 700;
  font-family: inherit;
}
.macro-unit-btn.active {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent);
}

/* Protein/Karbonhidrat/Yag uc'lu tekerlek secici */
.macro-wheel-row { display: flex; gap: 10px; }
.macro-wheel-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.macro-wheel-col-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.macro-wheel-col-label.protein { color: var(--red); }
.macro-wheel-col-label.carb { color: var(--amber); }
.macro-wheel-col-label.fat { color: var(--blue); }

.macro-wheel-viewport {
  position: relative; width: 100%; height: 132px; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--platinum-well); border: 1px solid var(--platinum-well-border);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.macro-wheel-highlight {
  position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%);
  border-top: 1px solid var(--platinum-well-border); border-bottom: 1px solid var(--platinum-well-border);
  pointer-events: none; z-index: 1;
}
.macro-wheel-scroll {
  height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
  padding: 44px 0; scrollbar-width: none;
}
.macro-wheel-scroll::-webkit-scrollbar { display: none; }
.macro-wheel-item {
  height: 44px; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; font-size: 16px; font-weight: 600; color: var(--text-mute);
  transition: color 0.15s ease, font-size 0.15s ease;
}
.macro-wheel-item.active { font-size: 22px; font-weight: 800; color: var(--text); }
#protein-wheel .macro-wheel-item.active { color: var(--red); }
#carb-wheel .macro-wheel-item.active { color: var(--amber); }
#fat-wheel .macro-wheel-item.active { color: var(--blue); }
.macro-wheel-item.locked { opacity: 0.45; }

.food-search-results { position: relative; max-height: 0; overflow: hidden; transition: max-height 0.15s ease; }
.food-search-results.open {
  max-height: 260px; overflow-y: auto; margin-top: 6px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--card-alt);
}
.food-search-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border: none; background: none;
  color: var(--text); font-size: 12.5px; text-align: left;
  border-bottom: 1px solid var(--border-soft); font-family: inherit; cursor: pointer;
}
.food-search-item:last-child { border-bottom: none; }
.food-search-item:hover { background: var(--card-hover); }
.food-search-empty { padding: 12px; text-align: center; color: var(--text-mute); font-size: 13px; }
.food-search-suggestions-header {
  padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border-soft);
}
.food-search-results.quick-suggestions { background: rgba(30, 36, 46, 0.72); backdrop-filter: blur(3px); }
.food-search-results.quick-suggestions .food-search-item { opacity: 0.88; }
.food-selected-row { display: flex; align-items: center; gap: 10px; }
.food-selected-name {
  flex: 1; min-width: 0;
  font-weight: 700; font-size: 14px; padding: 10px 12px;
  background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--accent);
  display: flex; align-items: center; gap: 8px;
}
.food-selected-clear {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1.5px solid var(--red); color: var(--red);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5), 0 0 16px rgba(239, 68, 68, 0.3);
}
.food-selected-clear .icon { width: 14px; height: 14px; }

.recent-food-chips { display: flex; flex-direction: column; gap: 6px; }
.recent-food-chip {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px 6px 6px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card-alt);
}
.recent-food-chip-main {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  color: var(--text-dim); font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; background: none; border: none; padding: 0;
}
.recent-food-chip-main:active { transform: scale(0.98); }
.recent-food-chip-name {
  flex: 1; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recent-food-chip-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent);
}
.recent-food-chip-add .icon { width: 10px; height: 10px; }
.recent-food-chip-grams { flex: none; font-size: 10px; color: var(--text-mute); font-weight: 600; }

.food-favorite-star {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; background: none; border: none;
  color: var(--text-mute);
}
.food-favorite-star .icon { width: 16px; height: 16px; }
.food-favorite-star:active { transform: scale(0.9); }
.food-favorite-star.active { color: var(--amber); }
.food-favorite-star.active .icon { fill: var(--amber); }

.food-icon-inline {
  width: 18px; height: 18px; border-radius: 6px; object-fit: cover;
  flex: none; display: inline-block; vertical-align: middle; background: #fff;
}
.food-icon-emoji {
  width: 18px; height: 18px; border-radius: 6px; background: var(--card-alt);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; vertical-align: middle;
}
.food-search-item-main { display: inline-flex; align-items: center; gap: 8px; }

.suggestions-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px; margin-bottom: 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card-alt);
  color: var(--text); font-size: 13px; font-weight: 700; font-family: inherit;
}
.suggestions-toggle-btn .icon { width: 15px; height: 15px; flex: none; }
.suggestions-toggle-btn .icon:last-child {
  color: var(--red);
  filter: drop-shadow(0 0 4px var(--red)) drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}
.suggestions-toggle-btn:active { transform: scale(0.98); }

.field .grams-manual-input {
  text-align: center; font-size: 22px; font-weight: 800; color: var(--accent);
  padding: 10px;
}
.grams-manual-hint {
  text-align: center; font-size: 11px; color: var(--text-dim);
  opacity: 0.55; margin-top: -4px; margin-bottom: 8px;
}
.grams-quick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.grams-quick-card {
  padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card-alt);
  color: var(--text); font-size: 15px; font-weight: 700; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.grams-quick-card:active { transform: scale(0.97); }

/* Tek "100 x" carpan karti: 100 tam ortada, kucuk kirmizi x sag kenarda. */
.grams-quick-grid-single { grid-template-columns: minmax(0, 150px); justify-content: center; }
.grams-quick-multiplier { position: relative; display: flex; align-items: center; justify-content: center; }
.grams-quick-x {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--red); font-size: 15px; font-weight: 800; line-height: 1; pointer-events: none;
}

/* Kartin altinda canli Protein / Karb. / Yag (P/K/Y renkleri diger ekranlarla ayni). */
.grams-macro-row { display: flex; justify-content: center; gap: 22px; margin-top: 12px; }
.grams-macro-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; }
.grams-macro-label { font-size: 12px; font-weight: 700; }
.grams-macro-item.protein .grams-macro-label { color: var(--red); }
.grams-macro-item.carbs .grams-macro-label { color: var(--amber); }
:root[data-theme="light"] .grams-macro-item.carbs .grams-macro-label { color: #9a5b00; }
.grams-macro-item.fat .grams-macro-label { color: var(--blue); }
.grams-macro-val { font-size: 15px; font-weight: 800; color: var(--text); }

/* Kayitli Ogunlerim: solda isim listesi, sagda (JS ile) secilen kaydin
   icerigi - Beslenme sekmesindeki .nutrition-layout ile ayni desen. */
.saved-meals-layout { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
@media (max-width: 720px) { .saved-meals-layout { grid-template-columns: minmax(0, 1fr); } }
.saved-meals-list { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.saved-meals-group-title {
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--accent); font-weight: 800; margin: 16px 6px 6px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.saved-meals-group-title:first-child { margin-top: 2px; }
.saved-meal-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 12px; border-radius: var(--radius-md);
  background: none; border: 1px solid transparent; color: var(--text);
  font-family: inherit; font-size: 15.5px; font-weight: 700; text-align: left;
}
.saved-meal-list-item:hover { background: var(--card-alt); color: var(--text); }
.saved-meal-list-item.active { background: var(--accent); color: var(--accent-ink); }
.saved-meal-list-item.active .muted { color: inherit; opacity: 0.75; }
.saved-meals-detail { min-height: 220px; }
.saved-meals-detail-empty { display: flex; align-items: center; justify-content: center; min-height: 220px; color: var(--text-mute); font-size: 13.5px; text-align: center; padding: 20px; }
.saved-meal-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.saved-meal-detail-head h3 { margin: 0; font-size: 17px; }
.saved-meal-detail-type { color: var(--text-mute); font-size: 12.5px; font-weight: 700; margin-bottom: 14px; }
.saved-meal-detail-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.saved-meal-detail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--card-alt); border: 1px solid var(--border-soft);
}
.saved-meal-detail-item .food-icon-inline { width: 26px; height: 26px; flex: none; border-radius: 8px; object-fit: cover; }
.saved-meal-detail-item-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-meal-detail-item-meta { flex: none; font-size: 12px; color: var(--text-mute); font-weight: 700; }
.saved-meal-apply-btn { width: 100%; }
/* "Listeye Ekle" (ara adim) ve "Kaydet" (son adim) yan yana, aralarinda kucuk
   bosluk ve FARKLI renklerde - kullanici ikisini karistirmasin diye. */
.saved-meal-action-row { display: flex; gap: 10px; margin-top: 10px; }
.saved-meal-action-row .btn { flex: 1; }
.saved-meal-delete-btn {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center;
}
.saved-meal-delete-btn .icon { width: 16px; height: 16px; }

/* Yeni kayitli ogun olusturma modalindeki secilen besin listesi. */
.saved-meal-items-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.saved-meal-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--card-alt); border: 1px solid var(--border-soft);
}
.saved-meal-item-row .food-icon-inline { width: 24px; height: 24px; flex: none; border-radius: 8px; object-fit: cover; }
.saved-meal-item-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-meal-item-grams {
  width: 62px; flex: none; text-align: center; font-size: 13px; font-weight: 700;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 6px 4px;
}
.saved-meal-item-remove {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--red-soft); color: var(--red); display: flex; align-items: center; justify-content: center;
}
.saved-meal-item-remove .icon { width: 13px; height: 13px; }

.history-link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; flex: none;
  border-radius: 999px; background: var(--card-alt);
  box-shadow: 0 0 0 1.5px var(--accent), 0 2px 10px rgba(198, 255, 58, 0.25);
  color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.history-link-btn .icon { width: 15px; height: 15px; }

.food-history-add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent-soft); border: none; color: var(--accent);
  cursor: pointer;
}
.food-history-add-btn .icon { width: 14px; height: 14px; }
.food-history-add-btn:active { transform: scale(0.92); }

.food-log-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--red-soft); border: 1.5px solid var(--red); color: var(--red);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.55), 0 0 12px rgba(239, 68, 68, 0.3);
}
.food-log-delete-btn .icon { width: 14px; height: 14px; }
.food-log-delete-btn:active { transform: scale(0.92); }
.food-log-row.removing { opacity: 0; transform: translateX(12px); transition: opacity 0.2s ease, transform 0.2s ease; }

/* iOS tarzi acma/kapama switch (bildirimler icin) */
.ios-toggle { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; }
.ios-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ios-toggle-track {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--red); border-radius: 999px;
  transition: background 0.2s ease;
}
.ios-toggle-track::before {
  content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ios-toggle input:checked + .ios-toggle-track { background: linear-gradient(145deg, var(--accent), var(--accent-2)); }
.ios-toggle input:checked + .ios-toggle-track::before { transform: translateX(22px); }
.ios-toggle input:disabled + .ios-toggle-track { opacity: 0.5; cursor: default; }

.meal-list { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.meal-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed var(--border-soft); }
.meal-item:last-child { border-bottom: none; }
.meal-emoji {
  width: 38px; height: 38px; border-radius: 10px; background: var(--card-alt);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
  overflow: hidden;
}
.meal-emoji .meal-icon-img { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; object-fit: cover; }
.meal-info { flex: 1; min-width: 0; }
.meal-info .type { font-size: 11.5px; color: var(--text-mute); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.meal-info .name { font-size: 13px; font-weight: 600; color: var(--text); }
.meal-kcal { font-size: 12.5px; font-weight: 700; color: var(--text-dim); flex: none; }

.budget-foot { padding: 14px 18px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.budget-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 13.5px; }
.budget-total .val { color: var(--accent); }
.plan-remaining-note { font-size: 11.5px; line-height: 1.4; margin-top: -4px; }

/* Nutrition layout */
.nutrition-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 18px; align-items: start; min-width: 0; }
@media (max-width: 900px) { .nutrition-layout { grid-template-columns: minmax(0, 1fr); } }

/* Admin Menu Olustur ekrani: sol tarafta ogun bazli besin ekleme kartlari,
   sag tarafta (dar ekranda ustte) canli Toplam/Protein/Karb/Yag sayaci. */
.admin-menu-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 18px; align-items: start; min-width: 0; }
@media (max-width: 900px) {
  .admin-menu-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-menu-summary { order: -1; }
}
.admin-menu-summary { position: sticky; top: 96px; }
.admin-menu-item-list { display: flex; flex-direction: column; gap: 8px; }
.admin-menu-item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--card-alt); border: 1px solid var(--border-soft);
}
.admin-menu-item-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-menu-item-grams {
  width: 64px; flex: none; padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font-size: 13px; text-align: center;
}
.admin-menu-item-kcal { flex: none; font-size: 12px; color: var(--text-mute); white-space: nowrap; }
.admin-menu-item-remove {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-soft); color: var(--red);
}
.admin-menu-item-remove .icon { width: 14px; height: 14px; }

/* Menuler listesi: her menu barinin hemen altinda, akordeon acilmadan
   gorunen P/K/Y ozeti + hizli Duzenle butonu. */
.admin-menu-quickbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border-soft);
  background: var(--card-alt);
}
.admin-menu-quickbar .macro-tag { font-size: 13px; }

/* Phone preview */
.phone-frame {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border-radius: 34px;
  border: 8px solid #05070a;
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.phone-frame .phone-photo { height: 190px; background-size: cover; background-position: center; }
.phone-frame .phone-body { padding: 14px 16px 18px; }
.phone-dots { display: flex; gap: 5px; justify-content: center; margin-top: 12px; }
.phone-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.phone-dots span.active { background: var(--accent); width: 16px; border-radius: 4px; }

/* Video cards */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; min-width: 0; }
.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--card);
  display: flex; flex-direction: column;
}
.video-thumb {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.video-thumb .icon { width: 42px; height: 42px; color: rgba(255,255,255,0.92); }
.video-thumb.lime { background: linear-gradient(135deg, #2c3b12, #1c2510); }
.video-thumb.amber { background: linear-gradient(135deg, #3a2c0c, #251c0a); }
.video-thumb.red { background: linear-gradient(135deg, #3a1512, #24100e); }
.video-fav {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,12,15,0.55); border: none;
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.video-fav.is-active { color: var(--red); }
.video-fav .icon { width: 16px; height: 16px; }
.video-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.video-tag { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; }
.video-title { font-weight: 700; font-size: 14.5px; }
.video-meta { font-size: 12.5px; color: var(--text-dim); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.field input, .field select, .field textarea {
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }

/* "Ogun sec" gibi kisa secim listeleri icin native <select>'in yerini alan
   ozel dropdown - native select acilis penceresi (ozellikle iOS WKWebView'de
   tamamen isletim sistemine ait bir tekerlek) uygulamanin fontuna/temasina
   hic uymuyordu. Native <select> DOM'da (gorunmez) kalir - form gonderimi
   ve mevcut JS .value okumalari/yazmalari degismeden calisir; bu sadece
   ustune binen bir gorsel katman (bkz. initFakeSelects()).*/
.fake-select-wrap { position: relative; }
.fake-select-native { position: absolute; opacity: 0; pointer-events: none; height: 1px; width: 1px; }
.fake-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit;
  text-align: left; cursor: pointer;
}
.fake-select-trigger.placeholder { color: var(--text-mute); font-weight: 400; }
.fake-select-trigger .fake-select-chevron { width: 16px; height: 16px; flex: none; color: var(--text-mute); transition: transform 0.15s ease; }
.fake-select-trigger.open { border-color: var(--accent); }
.fake-select-trigger.open .fake-select-chevron { transform: rotate(180deg); color: var(--accent); }
/* Menu JS ile position:fixed konumlanir (modal-box overflow'u kirpmasin diye)
   ve varsayilan olarak tetikleyicinin USTUNE acilir. Temadan bagimsiz koyu
   mermer/firçalanmis metal panel; her secenek ayri, kabarik bir buton. */
.fake-select-menu {
  position: fixed; z-index: 400;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(22, 22, 26, 0.82), rgba(10, 10, 12, 0.9)),
    url('../icons/nav/bar-bg.jpg') center / cover;
  border: 1px solid rgba(201, 163, 85, 0.45);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.55), 0 0 18px rgba(201, 163, 85, 0.18);
}
.fake-select-menu[hidden] { display: none; }
.fake-select-menu.two-col { display: grid; grid-template-columns: 1fr 1fr; }
.fake-select-menu.two-col .fake-select-option { padding: 13px 8px; font-size: 14px; }
.fake-select-option {
  display: block; width: 100%; flex: none;
  padding: 13px 16px; border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.28)),
    url('../icons/nav/bar-bg.jpg') center / cover;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  color: #fff4d6; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; font-family: inherit;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(255, 194, 61, 0.35);
  text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.fake-select-option:active { transform: scale(0.97); }
.fake-select-option.active {
  background: radial-gradient(120% 140% at 50% 38%, #e2c585 0%, #cda558 32%, #a9843e 58%, #7a5c26 80%, #4d3a18 100%);
  border: 1.5px solid #4a3616;
  color: #241a08;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 12px rgba(201, 163, 85, 0.45), 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#food-search {
  border: 1.5px solid var(--accent) !important;
  /* Sabit parlama - eskiden box-shadow'u sonsuz dongude animasyonluyorduk,
     bu GPU'ya alinamayan pahali bir repaint turu ve tam modal acilirken
     (zaten reflow yasanan bir anda) surekli tetiklenip donma hissi
     yaratiyordu. Ayni gorsel yogunlukta ama statik hale getirildi. */
  box-shadow: 0 0 0 1px rgba(198, 255, 58, 0.45), 0 0 18px rgba(198, 255, 58, 0.5), inset 0 0 12px rgba(198, 255, 58, 0.08);
}
.calorie-add-feedback {
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; text-align: center;
}
.calorie-add-feedback.error { background: var(--red-soft); color: var(--red); }
.field-icon-input { position: relative; }
.field-icon-input .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-mute); }
.field-icon-input input, .field-icon-input select { padding-left: 42px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.table td { padding: 12px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.table tr:last-child td { border-bottom: none; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.badge .icon { width: 16px; height: 16px; }

.selected-plan-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid var(--accent);
}
.selected-plan-badge .icon { width: 19px; height: 19px; }
.badge-lime { background: var(--accent-soft); color: var(--accent); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-red { background: var(--red-soft); color: var(--red); }

/* Menu grid (Menüler & Sekmeler style) */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.menu-card {
  background: var(--card-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px 10px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.menu-card:hover { border-color: var(--accent); }
.menu-card .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.menu-card .ic .icon { width: 18px; height: 18px; }
.menu-card span { font-size: 12px; font-weight: 700; }

/* Water tracker */
.water-glassrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.water-glass {
  width: 34px; height: 44px; border-radius: 6px 6px 10px 10px;
  border: 2px solid var(--border);
  background: var(--card-alt);
}
.water-glass.filled { background: linear-gradient(180deg, #4da3ff, #2b6fd1); border-color: #2b6fd1; }

/* Chart */
.chart-wrap { width: 100%; height: 150px; }
.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
.chart-axis { font-size: 10.5px; fill: var(--text-mute); }

.progress-visual-row { display: flex; flex-direction: column; gap: 5px; }
.progress-visual-img-wrap {
  width: 100%; background: #05070a; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; padding: 3px;
}
.progress-visual-img { width: 100%; height: auto; max-height: 52px; object-fit: contain; }
.progress-visual-measures { display: flex; flex-direction: row; justify-content: space-between; gap: 10px; }
.progress-visual-measures .measure-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.progress-visual-measures .val { font-size: 14px; }

.progress-card-compact { padding: 7px 20px; }
.progress-card-compact .card-title { margin-bottom: 5px; }

/* Auth pages - giris/onboarding: uygulamanin guncel Platinum karti + ust barla
   ayni firçalanmis metal plaka. Sayfa ve kart tema degiskenlerini (koyu/
   Platinum White) izler; ust plaka (logo + slogan) ust/alt barlar gibi
   temadan bagimsiz sabit metal + altin neon gorunumdedir. */
.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    var(--platinum-sheen),
    radial-gradient(110% 55% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 62%),
    var(--bg);
}
.auth-card {
  --auth-pad-y: 34px; --auth-pad-x: 32px;
  width: 100%; max-width: 440px;
  background:
    var(--platinum-sheen),
    var(--platinum-base);
  border-radius: var(--radius-xl);
  padding: var(--auth-pad-y) var(--auth-pad-x);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px var(--platinum-border),
    inset 0 1px 0 var(--platinum-inset);
}
.auth-head {
  margin: calc(-1 * var(--auth-pad-y)) calc(-1 * var(--auth-pad-x)) 26px;
  padding: 30px var(--auth-pad-x) 26px;
  text-align: center;
  background-image: url('../icons/nav/bar-bg.jpg');
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xl) var(--radius-xl) 26px 26px;
  box-shadow:
    0 4px 18px rgba(40, 30, 10, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 7px rgba(40, 30, 10, 0.28);
}
.auth-head .brand { font-size: 30px; justify-content: center; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); }
.auth-head .brand .brand-gp { color: #c6ff3a; }
.auth-head .brand .brand-fit { color: #f4f6f8; }
.auth-head p {
  color: #fff6dd; font-size: 13.5px; margin-top: 8px;
  text-shadow: 0 0 3px #ffd766, 0 0 8px #ffc23d, 0 0 16px rgba(255, 186, 40, 0.7);
}
.auth-card .field input, .auth-card .field select {
  background: var(--platinum-well);
  border-color: var(--platinum-well-border);
}
/* ===== Onboarding (Kisisel Bilgiler) ===== */
.onb-card {
  --onb-tile-bg: linear-gradient(160deg, #22242a 0%, #17181c 100%);
  --onb-tile-border: rgba(255, 255, 255, 0.07);
  --onb-chip-bg: #1a1b20;
  --onb-track-bg: #0f1013;
  --onb-seg-active-bg: radial-gradient(120% 140% at 50% 38%, #e2c585 0%, #cda558 40%, #a9843e 78%, #7a5c26 100%);
  --onb-seg-active-ink: #241a08;
}
:root[data-theme="light"] .onb-card {
  --onb-tile-bg: linear-gradient(160deg, #fbf8f2 0%, #f1ece2 100%);
  --onb-tile-border: rgba(60, 45, 15, 0.08);
  --onb-chip-bg: #faf7f1;
  --onb-track-bg: #cfc8b7;
  --onb-seg-active-bg: linear-gradient(180deg, #fffaf0, #f6eedb);
  --onb-seg-active-ink: #2a241a;
}
.onb-title {
  text-align: center; margin: 4px 0 20px;
  font-size: 17px; font-weight: 500; letter-spacing: 0.6px; color: var(--text);
}
.onb-field { margin-bottom: 22px; }
.onb-q {
  margin-bottom: 10px;
  font-size: 15.5px; font-weight: 700; color: var(--text);
}
.onb-q .icon { width: 22px; height: 22px; margin-left: 4px; vertical-align: -5px; color: var(--text-dim); }

.onb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.onb-tile {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px 10px; border-radius: 18px; text-align: left; font-family: inherit; color: var(--text);
  background: var(--onb-tile-bg); border: 1px solid var(--onb-tile-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-tap-highlight-color: transparent; cursor: text;
}
button.onb-tile { cursor: pointer; }
.onb-tile:focus-within { border-color: #c9a355; }
.onb-tile-icon {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; color: #2b2a26;
}
.onb-tile-icon .icon { width: 26px; height: 26px; }
.onb-tile-icon.green { background: #b9dcae; }
.onb-tile-icon.peach { background: #ffbf9c; }
.onb-tile-icon.sand  { background: #efd6a2; }
.onb-tile-icon.teal  { background: #a6d4ca; }
.onb-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.onb-tile-label { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.onb-tile-value { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; }
.onb-tile-value input, .onb-gender-text {
  width: 100%; min-width: 0; padding: 0; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
}
.onb-tile-value input::-webkit-outer-spin-button, .onb-tile-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.onb-gender-text { width: auto; }
.onb-swap { margin-left: 2px; font-size: 13px; color: #c9a355; }
.onb-unit {
  flex: none; margin-bottom: 4px; padding: 2px 7px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--platinum-well-hover);
}

.onb-segment {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px;
  border-radius: 999px; background: var(--onb-track-bg);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
}
.onb-segment label { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.onb-segment label, .onb-chip, .onb-goal { position: relative; }
.onb-segment input, .onb-chip input, .onb-goal input { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; }
.onb-segment span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 4px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text-dim);
  transition: background 0.15s ease;
}
.onb-segment span .icon { display: none; width: 18px; height: 18px; }
.onb-segment input:checked + span {
  background: var(--onb-seg-active-bg); color: var(--onb-seg-active-ink); font-weight: 700;
  box-shadow: 0 0 0 1px rgba(201, 163, 85, 0.75), 0 3px 10px rgba(0, 0, 0, 0.2), 0 0 12px rgba(201, 163, 85, 0.35);
}
.onb-segment input:checked + span .icon { display: inline-block; }

.onb-chips { display: flex; gap: 6px; }
.onb-chip {
  flex: 1 1 0; min-width: 0; height: 54px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--onb-chip-bg); border: 1px solid var(--onb-tile-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: var(--text); -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.onb-chip:active { transform: scale(0.95); }
.onb-chip-num { font-size: 18px; font-weight: 500; line-height: 1.1; }
.onb-chip-num.word { font-size: 13px; font-weight: 600; }
.onb-chip-sub { display: none; font-size: 10.5px; font-weight: 600; line-height: 1.1; }
.onb-chip:has(input:checked) {
  background: radial-gradient(120% 140% at 50% 38%, #e8cf98 0%, #d6b26d 40%, #b8914a 80%, #8d6b30 100%);
  border-color: #8d6b30; color: #241a08;
  box-shadow: 0 0 12px rgba(201, 163, 85, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25);
}
.onb-chip:has(input:checked) .onb-chip-num { font-weight: 800; }
.onb-chip:has(input:checked) .onb-chip-sub { display: block; }

.onb-range { position: relative; padding: 28px 0 30px; }
.onb-range-track {
  position: relative; height: 22px; border-radius: 999px; touch-action: pan-y; cursor: pointer;
  background: linear-gradient(90deg, #a8d3c7 0%, #d9dca0 18%, #f7cf78 34%, #f7a262 52%, #f28474 68%, #eab1ad 84%, #b7d4cf 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
}
.onb-range input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none;
}
.onb-range-thumb {
  position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #fffdf6 0 45%, #f3e6c6 100%);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 163, 85, 0.6);
}
.onb-range:focus-within .onb-range-thumb { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 2px #c9a355; }
.onb-range-label {
  position: absolute; transform: translateX(-50%);
  font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.onb-range-label.top { top: 0; }
.onb-range-label.bottom { bottom: 0; }

.onb-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onb-goal { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.onb-goal:last-child:nth-child(odd) { grid-column: span 2; }
.onb-goal span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 78px; height: 100%; padding: 12px 8px; border-radius: 14px; text-align: center;
  font-size: 15px; font-weight: 500; color: var(--text);
  background: var(--onb-chip-bg); border: 1px solid var(--onb-tile-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.onb-goal span .icon { width: 24px; height: 24px; color: var(--text-mute); }
.onb-goal input:checked + span {
  background: var(--onb-seg-active-bg); color: var(--onb-seg-active-ink); font-weight: 700;
  border: 1.5px solid #c9a355;
  box-shadow: 0 0 14px rgba(201, 163, 85, 0.4), 0 3px 10px rgba(0, 0, 0, 0.2);
}
.onb-goal input:checked + span .icon { color: var(--onb-seg-active-ink); }
.onb-submit { margin-top: 8px; font-size: 16px; padding-block: 14px; }
@media (max-width: 400px) {
  .onb-tile { padding: 10px 8px; gap: 8px; }
  .onb-tile-icon { width: 40px; height: 40px; }
  .onb-tile-value input, .onb-gender-text { font-size: 22px; }
  .onb-chips { gap: 4px; }
}
.body-type-hint { margin: -2px 0 10px; font-size: 12.5px; color: var(--text-mute); }
.body-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.body-type-grid[hidden] { display: none; }
.body-type-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  background: #f1eeea; border: 2px solid var(--platinum-well-border);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.body-type-card:active { transform: scale(0.97); }
.body-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.body-type-card img { display: block; width: 100%; aspect-ratio: 330 / 540; object-fit: cover; object-position: top; }
.body-type-label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 2.9em; padding: 5px 4px; text-align: center;
  font-size: 12.5px; font-weight: 800; line-height: 1.2; color: #2a241a;
  background: linear-gradient(180deg, #e7e2da, #d6cfc3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.body-type-card:has(input:checked) {
  border-color: #c9a355;
  box-shadow: 0 0 0 2px rgba(201, 163, 85, 0.55), 0 0 18px rgba(201, 163, 85, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.body-type-card:has(input:checked) .body-type-label {
  background: radial-gradient(120% 140% at 50% 38%, #e2c585 0%, #cda558 40%, #a9843e 75%, #7a5c26 100%);
  color: #241a08;
}
.auth-switch { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--text-dim); }
.auth-switch a { color: var(--accent); font-weight: 700; }

/* Onboarding */
.onboard-shell { max-width: 480px; margin: 40px auto; padding: 0 20px 60px; }
.onboard-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 30px; box-shadow: var(--shadow-card); }
.onboard-progress { display: flex; gap: 6px; margin-bottom: 22px; }
.onboard-progress span { height: 4px; border-radius: 4px; flex: 1; background: var(--border); }
.onboard-progress span.done { background: var(--accent); }

/* Flash messages */
.flash-stack { position: fixed; top: calc(env(safe-area-inset-top) + 18px); right: 18px; left: 18px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.flash-stack .flash { max-width: 340px; width: 100%; }
.flash {
  padding: 14px 16px; border-radius: var(--radius-md);
  border: 2.5px solid var(--border); background: var(--card-alt);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-card);
}
.flash-success { border-color: var(--accent); color: var(--accent); }
.flash-danger { border-color: var(--red); color: var(--red); }
.flash-warning { border-color: var(--amber); color: var(--amber); }

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.empty-state .icon { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--text-mute); }

.gpbot-placeholder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; margin: -18px -16px 0; overflow: hidden;
  background: #05070a;
  border-radius: 0;
}
.gpbot-matrix-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.gpbot-placeholder-overlay {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px;
}
.gpbot-logo {
  width: 100%; max-width: 200px; height: auto;
  filter: drop-shadow(0 0 26px rgba(80, 200, 255, 0.35));
}
.gpbot-soon-tag {
  margin-top: 22px; padding: 5px 16px; border-radius: 999px;
  border: 1px solid rgba(120, 255, 160, 0.4); color: #7dffb0;
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(125, 255, 176, 0.6);
}
.gpbot-soon-title {
  margin-top: 14px; font-size: 21px; font-weight: 800; color: #eafff0;
  text-shadow: 0 0 14px rgba(125, 255, 176, 0.35);
}

.gpbot-chat-page {
  position: relative;
  min-height: 70vh; margin: -18px -16px 0; overflow: hidden;
  background: #05070a;
  padding: 24px 16px 28px;
}
.gpbot-chat-wrap { position: relative; z-index: 2; max-width: 520px; margin: 0 auto; }
.gpbot-chat-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.gpbot-chat-avatar {
  width: 56px; height: 56px; object-fit: contain; flex: none;
  filter: drop-shadow(0 0 16px rgba(80, 200, 255, 0.4));
}
.gpbot-chat-name { font-weight: 800; font-size: 17px; color: #eafff0; }
.gpbot-chat-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #9aa3af;
}
.gpbot-chat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #c6ff3a; box-shadow: 0 0 8px #c6ff3a;
}
.gpbot-chat-bubbles { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
/* .gpbot-chat-page hep koyu "matrix terminal" gorunumunde kalir (canvas
   yagmuru animasyonu buna gore tasarlandi) - bu yuzden icindeki renkler
   BILINCLI olarak tema degiskeni degil, sabit (dark-mode) hex degerleri
   kullanir. Acik temaya gecilince var(--text)/var(--card) gibi degiskenler
   acik degerlere donup, sabit koyu sayfa arkaplaninda gorunmez oluyordu
   (ornegin "Kalori Detayina Git" butonu) - bu yuzden hepsi sabitlendi. */
.gpbot-bubble {
  position: relative;
  background: #141820; border: 1px solid rgba(198, 255, 58, 0.18);
  border-radius: var(--radius-lg); border-top-left-radius: 4px;
  padding: 14px 16px; max-width: 92%;
  font-size: 14.5px; line-height: 1.5; color: #f4f6f8;
  box-shadow: 0 0 18px rgba(198, 255, 58, 0.06);
  animation: gpbot-bubble-in 0.35s ease both;
}
.gpbot-bubble:nth-child(2) { animation-delay: 0.12s; }
.gpbot-bubble:nth-child(3) { animation-delay: 0.24s; }
.gpbot-bubble:nth-child(4) { animation-delay: 0.36s; }
@keyframes gpbot-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.gpbot-chat-actions { display: flex; flex-direction: column; gap: 10px; }
.gpbot-chat-actions .btn-outline {
  background: transparent; border-color: #242b35; color: #f4f6f8;
}
.gpbot-chat-actions .btn-outline:hover { border-color: #c6ff3a; color: #c6ff3a; }
.gpbot-prev-cards { display: flex; flex-direction: column; gap: 10px; }
.gpbot-prev-card {
  background: #1a2029; border: 1px solid #1c222b;
  border-radius: var(--radius-md); padding: 14px 16px;
}
.gpbot-prev-card-title { font-weight: 700; font-size: 13.5px; color: #c6ff3a; margin-bottom: 10px; }
.gpbot-prev-card-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gpbot-prev-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: #141820; border: 1px solid #1c222b;
}
.gpbot-prev-item-name { font-size: 13.5px; color: #f4f6f8; }
.gpbot-prev-item-add {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(198, 255, 58, 0.12); color: #c6ff3a;
  border: 1.5px solid #c6ff3a;
  box-shadow: 0 0 10px rgba(198, 255, 58, 0.45);
}
.gpbot-prev-item-add:active { transform: scale(0.9); }
.gpbot-prev-item-add .icon { width: 14px; height: 14px; }
.gpbot-prev-item-add:disabled { opacity: 0.4; box-shadow: none; }
.gpbot-prev-card-btn { width: 100%; }

.subscription-placeholder {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 60px 20px; min-height: 55vh; justify-content: center;
}
.subscription-logo { width: 100%; max-width: 190px; height: auto; filter: drop-shadow(0 0 24px rgba(255, 191, 36, 0.3)); }
.subscription-soon-tag {
  margin-top: 22px; padding: 5px 16px; border-radius: 999px;
  border: 1px solid var(--amber); color: var(--amber);
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.subscription-soon-title { margin-top: 14px; font-size: 20px; font-weight: 800; color: var(--text); }

/* Utility */
.muted { color: var(--text-dim); }
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.section { margin-bottom: 26px; }

/* Dashboard üstü bildirim şeridi */
.notif-strip-card { padding: 10px 14px; }
.notif-strip { display: flex; flex-direction: column; }
.notif-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border-soft);
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--card-alt); }
.notif-thumb { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; background: var(--card-alt); }
.notif-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-dim); line-height: 1.3; }
.notif-time { font-size: 11px; }

/* Feed / Bildirimler */
.feed-card { display: flex; flex-direction: column; }
.feed-card .card-title { margin-bottom: 10px; }
.feed-post-form { border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; margin-bottom: 14px; flex: none; }
.feed-post-form .field { margin-bottom: 10px; gap: 4px; }
.feed-post-form .field:last-of-type { margin-bottom: 8px; }
.feed-list { display: flex; flex-direction: column; gap: 22px; }
.feed-item { border-bottom: 1px solid var(--border-soft); padding-bottom: 18px; }
.feed-item:last-child { border-bottom: none; padding-bottom: 0; }
.feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feed-head-text { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.5; }
.feed-time { font-size: 11px; }
.feed-photo { display: block; width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 10px; background: var(--card-alt); }
.feed-caption { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.feed-actions { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.feed-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; color: var(--text-dim);
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0;
}
.feed-action-btn .icon { width: 18px; height: 18px; }
.feed-action-btn.is-active { color: var(--red); }
.feed-comment-count { cursor: default; }
.feed-comments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.feed-comment { font-size: 12.5px; background: var(--card-alt); padding: 8px 12px; border-radius: var(--radius-sm); }
.feed-comment-form { display: flex; gap: 8px; }
.feed-comment-form input {
  flex: 1; background: var(--card-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 14px; color: var(--text); font-size: 12.5px; outline: none;
}
.feed-comment-form input:focus { border-color: var(--accent); }
.feed-comment-form button {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-ink); border: none;
  display: flex; align-items: center; justify-content: center;
}
.feed-comment-form button .icon { width: 15px; height: 15px; }

/* Modal */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  /* Neredeyse tam opak: altindaki (gold LED / gradient iceren, agir) kart
     yariden fazla saydam bir scrim'in arkasindan hala gorunur kalip her
     modal acilisinda GPU'nun ikisini birden harmanlamasina zorluyordu.
     Opak scrim, altindaki katmanin tamamen atlanmasini (occlusion) saglar. */
  background: rgba(4, 5, 7, 0.94);
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.streak-modal-box { text-align: center; }
.streak-flame-emoji {
  font-size: 76px; line-height: 1; margin: 0 auto 6px;
  animation: streak-flicker 1.1s ease-in-out infinite;
}
@keyframes streak-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 10px rgba(255, 122, 26, 0.5)); }
  50% { transform: scale(1.12) rotate(2deg); filter: drop-shadow(0 0 22px rgba(255, 150, 40, 0.85)); }
}
.streak-count { font-size: 64px; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #ffcf4d, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.streak-label { font-size: 18px; font-weight: 800; margin: 4px 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.streak-week-strip {
  display: flex; justify-content: space-between; gap: 6px;
  background: var(--card-alt); border-radius: var(--radius-md);
  padding: 14px 10px; margin: 18px 0 22px;
}
.streak-week-day { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.streak-week-day .d { font-size: 11.5px; font-weight: 800; color: var(--text-mute); }
.streak-week-day.today .d { color: var(--accent); }
.streak-week-flame { font-size: 20px; filter: grayscale(1) opacity(0.35); }
.streak-week-flame.lit { filter: none; opacity: 1; }
.modal-box {
  width: 100%; max-width: 420px;
  background:
    var(--platinum-sheen),
    var(--platinum-base);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xl);
  padding: 26px;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
  position: sticky; top: 0; z-index: 2;
  padding: 12px 0;
  margin-top: -12px;
  background:
    var(--platinum-sheen),
    var(--platinum-base);
}
.calorie-modal-close {
  border: 1.5px solid var(--red) !important;
  color: var(--red) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5), 0 0 16px rgba(239, 68, 68, 0.3);
}
.modal-head h2 { margin: 0; font-size: 18px; }

/* Modal ic ogeleri (arama sonuclari, chip'ler) Platinum tonuna uydur */
.modal-box .food-search-results.open,
.modal-box .recent-food-chip,
.modal-box .suggestions-toggle-btn {
  background: var(--platinum-well);
  border-color: var(--platinum-well-border);
}
.modal-box .food-search-item,
.modal-box .food-search-suggestions-header {
  border-bottom-color: var(--platinum-well-border);
}
.modal-box .food-search-item:hover { background: var(--platinum-well-hover); }
.modal-box .food-search-results.quick-suggestions { background: var(--platinum-well); }
.modal-box .food-icon-emoji { background: var(--platinum-well); }
.modal-box .food-selected-clear { background: var(--platinum-well); }
.modal-box .field input,
.modal-box .field select,
.modal-box .field textarea {
  background: var(--platinum-well);
  border-color: var(--platinum-well-border);
}

.photo-drop {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
  border: 2px dashed var(--blue);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  min-height: 110px;
  width: 88%;
  margin: 0 auto;
  box-shadow: 0 0 8px rgba(77, 163, 255, 0.45), 0 0 16px rgba(77, 163, 255, 0.22);
}
.photo-drop:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 10px rgba(77, 163, 255, 0.65), 0 0 22px rgba(77, 163, 255, 0.35); }
.photo-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.photo-drop .icon { width: 104px; height: 104px; }
#photo-preview { max-width: 100%; max-height: 220px; border-radius: var(--radius-sm); object-fit: cover; }

/* Bottom nav (mobile / PWA feel) */
/* Alt navigasyon: mermer + altin/gumus "mucevher" temasi. Uygulamanin geri
   kalanindaki acik/koyu tema anahtarindan BAGIMSIZ, sabit bir tasarim
   (GpBot sayfasi gibi) - bu yuzden degisken degil, sabit hex degerleri
   kullanir. */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  min-height: var(--bottomnav-h);
  background-image: url('../icons/nav/bar-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px 26px 0 0;
  /* Mermer kenarina kabarik/embossed bir derinlik veren SABIT (animasyonsuz)
     golge katmani: ust kenar hizasinda ince bir parlak "isik yakalama"
     cizgisi + hemen altinda yumusak bir ic golge - topbar'daki ayni
     desenin simetrigi. */
  box-shadow:
    0 -4px 20px rgba(40, 30, 10, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 4px 7px rgba(40, 30, 10, 0.28);
  justify-content: center;
  z-index: 50;
  /* Centikli/home-indicator'lu telefonlarda env(safe-area-inset-bottom)
     tek basina ~30-35px'e kadar cikabiliyor - bu da etiket yazisinin
     altinda gereginden fazla bos mermer alani birakiyordu (masaustu
     tarayicida bu deger 0 oldugundan test ederken fark edilmiyordu).
     min() ile bu payi 14px'le sinirliyoruz: home-indicator'a hala kucuk
     bir tampon birakiyor ama yazinin hemen altinda bitmis gibi gorunuyor. */
  padding: 12px 6px min(14px, env(safe-area-inset-bottom));
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
/* Ogeleri (5 buton) gercek genislik ihtiyaclarina gore dar telefonlarda
   sikica, ama genis ekranlarda (tablet/genis tarayici) aralari acilip
   dagilmasin diye bir ust sinirla ortalanmis ic kap. Barin kendisi tam
   genislik kalir (mermer arka plan kesintisiz), sadece butonlarin
   dizilimi bu kap icinde sinirlaniyor. */
.bottom-nav-inner {
  display: flex; align-items: flex-start; justify-content: space-around;
  width: 100%; max-width: 430px;
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent;
}
/* Mermer arka planin uzerinde koyu kahverengi yazi okunmuyordu - altin
   neon parlama efektiyle degistirildi (GpBot'un yesil neon yazisiyla
   ayni desen, sadece altin renginde). */
.bottom-nav-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1px;
  color: #ffefc2;
  text-shadow: 0 0 3px #ffd766, 0 0 8px #ffc23d, 0 0 16px rgba(255, 186, 40, 0.7);
}
.bottom-nav-item.active .bottom-nav-label {
  color: #fff6dd;
  text-shadow: 0 0 4px #ffe28a, 0 0 11px #ffd158, 0 0 22px rgba(255, 200, 70, 0.85);
}
/* GpBot butonunun altinda gorunur etiket yok, ama digerleriyle (Ana Sayfa/
   Beslenme/Topluluk) AYNI hizada durmasi icin ayni yukseklikte gorunmez bir
   etiket alani ayirmamiz gerekiyor - aksi halde GpBot tile'i digerlerinden
   daha asagida kayik gorunuyordu. */
.bottom-nav-label-spacer { visibility: hidden; }

/* Ana Sayfa/Beslenme/Topluluk: cam "tile" kareyi biz CSS ile cizmiyoruz -
   referans mockup'tan kesilen gorsel zaten kendi cam karesini, yumusak
   golgesini ve ikonunu iceriyor (bkz. data-extraction islemi). Sadece
   boyutlandirip basma efekti ekliyoruz. */
.bottom-nav-tile-img {
  width: 70px; height: 70px; object-fit: contain; flex: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bottom-nav-item:active .bottom-nav-tile-img { transform: scale(0.9); filter: brightness(0.88); }
/* Secili sekme: ikonun kendi (yumusak/bulanik) seklini takip eden ince
   altin neon cizgi + hafif parlama - hangi sekmede oldugumuzu belli eder.
   drop-shadow() resmin gercek alfa seklini takip eder, dikdortgen degil -
   bu yuzden box-shadow yerine bunu kullaniyoruz. */
.bottom-nav-item.active .bottom-nav-tile-img {
  filter:
    drop-shadow(0 0 1.5px #ffdd7a)
    drop-shadow(0 0 4px rgba(255, 214, 90, 0.85))
    drop-shadow(0 0 10px rgba(255, 200, 60, 0.55));
}

/* + butonu: referans mockup'taki malakit/altin daireyi BIREBIR gorsel
   olarak kullanir (parlama halesi dahil zaten gorselin icinde) - CSS ile
   ayrica arkaplan/gradyan cizmiyoruz. */
.bottom-nav-fab {
  width: 88px; height: 88px; flex: none;
  background: none; border: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  margin-top: -38px;
  -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease;
}
/* Sabit altin neon parlama - animasyon/pulsasyon YOK, kullanicinin
   istedigi gibi hep ayni yogunlukta duruyor (basma efekti ayri, asagida). */
.bottom-nav-fab-img {
  width: 100%; height: 100%; object-fit: contain;
  filter:
    drop-shadow(0 0 2px #ffdd7a)
    drop-shadow(0 0 6px rgba(255, 200, 60, 0.75))
    drop-shadow(0 0 14px rgba(255, 186, 40, 0.55));
}
.bottom-nav-fab:active { transform: scale(0.93); filter: brightness(0.9); }

.sidebar-backdrop { display: none; }

body.no-scroll { overflow: hidden; height: 100%; }
/* Modal acikken body'yi position:fixed yapmak, iOS WKWebView'de arka
   sayfanin (icerideki wheel-picker gibi kaydirilabilir alanlarin dokunuşuyla)
   kaymasini kesin olarak engeller - sadece overflow:hidden yetersiz kalıyor. */
body.modal-scroll-lock { position: fixed; left: 0; right: 0; overflow: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; width: 82vw; max-width: 300px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 20px 0 40px rgba(0,0,0,0.5);
    /* Alt navigasyon (z-index 50) cekmecenin ustunde kaldigi icin son
       sekmeler (Cikis) onun altinda kaliyordu; en alta kaydirinca da
       gorunsun diye alttan bar yuksekligi kadar bosluk. */
    padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 24px);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 39;
  }
  .sidebar-backdrop.open { display: block; }
  .hamburger { display: flex; }
  .topbar-title { display: none; }
  .content { padding: 18px 16px 148px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .programs-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom-nav { display: flex; }
  .topbar-search { max-width: none; }
}

@media (max-width: 540px) {
  .topbar { padding: calc(env(safe-area-inset-top) + 8px) 14px 8px; gap: 10px; }
  .topbar-search { display: none; }
  .week-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .video-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-card { --auth-pad-y: 26px; --auth-pad-x: 20px; }
}