/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo img {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 74px !important;
}
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page,
.docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 62px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 231px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.template-customizer-open-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-purple {
  background-color: #696cff;
  border-color: #696cff;
  color: #fff;
}
.btn-purple:hover {
  background-color: #5958c7;
  border-color: #5958c7;
  color: #fff;
}


.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.stat-icon {
  font-size: 40px;
}

.stat-title {
  font-size: 16px;
  color: #555;
  margin-top: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #2d4739;
  margin-top: 10px;
}

 .avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(77, 182, 172, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700
  }

/* WhatsApp style unread badge */
.wa-unread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:18px;
  min-width:18px;
  padding:0 6px;            /* 2+ haneli sayılar için */
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  color:#fff;
  background:var(--bs-primary); /* istersen yeşil: #25D366 */
}


/* ===========================
   WATER BOTTLE - FINAL
   =========================== */

.water-bottle-wrap{
  position: relative;
  width: 180px;
  margin: 0 auto;
  padding-top: 62px; /* kapak/neck boşluğu */
  overflow: visible;
}

/* === SABİT MAVİ KAPAK === */
.water-bottle-cap{
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 30px;
  border-radius: 12px 12px 14px 14px;
  background: linear-gradient(to bottom, #2f8cff, #0f5fe0);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,.35),
    0 10px 16px rgba(0,0,0,.45);
  z-index: 30;
}

/* Kapak üst highlight */
.water-bottle-cap::before{
  content:"";
  position:absolute;
  top:3px;
  left:7px;
  right:7px;
  height:8px;
  border-radius:10px;
  background: rgba(255,255,255,.22);
  opacity:.6;
}

/* Kapakta plastik diş detayları */
.water-bottle-cap::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:5px;
  height:8px;
  border-radius: 10px;
  opacity:.75;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.22) 0 3px,
      rgba(255,255,255,0) 3px 6px
    );
}

/* %100 olunca kapağa glow ring */
.water-bottle-cap.is-full{
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,.35),
    0 10px 16px rgba(0,0,0,.45),
    0 0 0 4px rgba(47,140,255,.20),
    0 0 18px rgba(47,140,255,.35);
  animation: capRing 1.6s ease-in-out infinite;
}

@keyframes capRing{
  0%,100% { transform: translateX(-50%) scale(1); }
  50%     { transform: translateX(-50%) scale(1.02); }
}

/* === BOYUN (DAR ÜST) === */
.water-bottle-neck{
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 48px;
  border-radius: 20px;
  border: 3px solid rgba(255,255,255,.25);
  border-bottom: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 0 10px rgba(255,255,255,.10);
  z-index: 20;
}

/* === ŞİŞE GÖVDE === */
.water-bottle{
  position: relative;
  width: 112px;
  height: 260px;
  margin: 0 auto;
  border-radius: 44px 44px 34px 34px;
  border: 3px solid rgba(255,255,255,.25);
  background: linear-gradient(to bottom, rgba(255,255,255,.07), rgba(255,255,255,.02));
  overflow: hidden; /* su/ışık gövde içinde kalsın */
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.08),
    0 20px 40px rgba(0,0,0,.35);
  z-index: 10;
}

/* === SU DOLUM === */
.water-fill{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0;
  border-radius: 0 0 34px 34px;
  background: linear-gradient(to top, rgba(0,123,255,.92), rgba(0,190,255,.70));
  transition: height .9s cubic-bezier(.4,0,.2,1);
  overflow: hidden; /* dalgalar/bubbles su içinde kalsın */
}

/* Su yüzeyi highlight */
.water-fill::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}

/* İçte hareketli ışıltı */
.water-fill::after{
  content:"";
  position:absolute;
  inset:-40px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,.12) 0 2px, transparent 3px);
  opacity:.30;
  animation: waterSparkle 6s linear infinite;
  pointer-events:none;
}

@keyframes waterSparkle{
  0%   { transform: translate3d(0,0,0); opacity:.26; }
  50%  { transform: translate3d(18px,-10px,0); opacity:.38; }
  100% { transform: translate3d(0,0,0); opacity:.26; }
}

/* === DALGA KATMANLARI (su yüzeyi) === */
.water-wave{
  position:absolute;
  left:-35%;
  width:170%;
  height:42px;
  top:-18px; /* su yüzeyi */
  border-radius: 50%;
  filter: blur(.2px);
  opacity:.55;
  pointer-events:none;
}

.water-wave-1{
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  animation: waveMove1 3.6s ease-in-out infinite;
}

.water-wave-2{
  top:-22px;
  opacity:.35;
  background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  animation: waveMove2 5.2s ease-in-out infinite;
}

@keyframes waveMove1{
  0%   { transform: translateX(-2%) rotate(-1deg); }
  50%  { transform: translateX(2%) rotate(1deg); }
  100% { transform: translateX(-2%) rotate(-1deg); }
}
@keyframes waveMove2{
  0%   { transform: translateX(2%) rotate(1deg); }
  50%  { transform: translateX(-2%) rotate(-1deg); }
  100% { transform: translateX(2%) rotate(1deg); }
}

/* === KABARCIK ANİMASYONU === */
.bubble{
  position:absolute;
  bottom: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.40);
  opacity: 0;
  filter: blur(.1px);
  pointer-events:none;
}

/* doluluk arttıkça bubble daha görünür */
.water-fill .bubble{ opacity: .18; }

/* farklı boyut/konum/süre */
.b1{ left:18%; width:4px; height:4px; animation: bubbleUp 3.6s linear infinite; animation-delay: .2s; }
.b2{ left:34%; width:6px; height:6px; animation: bubbleUp 4.4s linear infinite; animation-delay: 1.1s; }
.b3{ left:52%; width:5px; height:5px; animation: bubbleUp 3.9s linear infinite; animation-delay: .6s; }
.b4{ left:68%; width:7px; height:7px; animation: bubbleUp 5.1s linear infinite; animation-delay: 1.6s; }
.b5{ left:78%; width:4px; height:4px; animation: bubbleUp 3.2s linear infinite; animation-delay: .9s; }
.b6{ left:26%; width:7px; height:7px; animation: bubbleUp 5.6s linear infinite; animation-delay: 2.2s; }

@keyframes bubbleUp{
  0%   { transform: translateY(0) scale(.95); opacity: 0; }
  10%  { opacity: .18; }
  60%  { opacity: .22; }
  100% { transform: translateY(-180px) scale(1.15); opacity: 0; }
}

/* === CAM PARLAMA === */
.water-gloss{
  position:absolute;
  top:22px;
  left:18px;
  width:22px;
  height:72%;
  border-radius:20px;
  background: rgba(255,255,255,.18);
  filter: blur(.3px);
  opacity:.9;
  pointer-events:none;
}

/* === %100 OLUNCA PARLAMA === */
.water-bottle.is-full{
  animation: bottleGlow 1.6s ease-in-out infinite;
  border-color: rgba(47,140,255,.65);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.10),
    0 20px 40px rgba(0,0,0,.35),
    0 0 22px rgba(47,140,255,.35);
}

@keyframes bottleGlow{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-1px); }
}

.water-bottle.is-full .water-fill::before{ opacity:.85; }

/* === Toast === */
.yp-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(20,20,20,.86);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.yp-toast.show{
  opacity: 1;
  transform: translateY(0);
}
.yp-toast .dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(47,140,255,1);
  box-shadow: 0 0 0 4px rgba(47,140,255,.22);
}

/* === Damla animasyonu === */
.drop{
  position: absolute;
  left: 18px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: rgba(47,140,255,1);
  border-radius: 50% 50% 50% 50%;
  transform: rotate(45deg);
  opacity: 0;
  pointer-events: none;
}
.drop::after{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  background: inherit;
  border-radius: 50%;
  transform: translateY(-6px);
}
.drop.play{
  animation: dropFall .62s ease-out forwards;
}
@keyframes dropFall{
  0%   { transform: translateY(-10px) rotate(45deg) scale(.9); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(18px) rotate(45deg) scale(.95); opacity: 0; }
}

/* === Hedef aşınca turuncu tema === */
.water-bottle.is-over .water-fill{
  background: linear-gradient(to top, rgba(255,159,67,.95), rgba(255,205,120,.75));
}
.water-bottle.is-over{
  border-color: rgba(255,159,67,.65);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.10),
    0 20px 40px rgba(0,0,0,.35),
    0 0 22px rgba(255,159,67,.25);
}
.water-bottle-cap.is-over{
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,.35),
    0 10px 16px rgba(0,0,0,.45),
    0 0 0 4px rgba(255,159,67,.18),
    0 0 18px rgba(255,159,67,.28);
}


/* ===========================
   CALORIE BATTERY (ENERGY)
   =========================== */

.cal-battery{ width: 220px; max-width: 100%; }

.cal-battery-shell{
  position:relative;
  height: 46px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: inset 0 8px 14px rgba(0,0,0,.18), 0 12px 22px rgba(0,0,0,.22);
}

.cal-battery-cap{
  width: 10px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,.18);
  margin-left: auto;
  margin-top: -35px;
  margin-right: -14px;
  box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

/* dolum */
.cal-battery-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background: linear-gradient(to right, rgba(255, 172, 47, 0.95), rgba(255, 165, 47, 0.55));
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* ortadaki şimşek (fill üstünde sabit) */
.cal-battery-bolt{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
  pointer-events:none;
}

.cal-battery-bolt i{
  font-size: 26px;
  color: rgba(255,255,255,.90);
  text-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 18px rgba(47,140,255,.35);
  transform: translateY(-1px);
}

/* bolt arkasında cam/ışık efekti */
.cal-battery-bolt::before{
  content:"";
  position:absolute;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 0 18px rgba(255,255,255,.06);
}

/* pil gloss */
.cal-battery-gloss{
  position:absolute;
  top:6px; left:10px;
  width: 26px; height: 34px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  filter: blur(.3px);
  z-index: 4;
  pointer-events:none;
}

/* metin */
.cal-battery-text{ margin-top: 10px; }

/* Hedef aşınca turuncu */
.cal-battery.is-over .cal-battery-fill{
  background: linear-gradient(to right, rgba(255, 80, 67, 0.95), rgba(255, 125, 120, 0.7));
}

.cal-battery.is-over .cal-battery-bolt i{
  text-shadow:
    0 8px 18px rgba(0,0,0,.28),
    0 0 18px rgba(255,159,67,.35);
}

/* %100+ gibi durumlarda hafif enerji pulse */
.cal-battery.is-over .cal-battery-bolt::before{
  animation: boltPulse 1.6s ease-in-out infinite;
  border-color: rgba(255,159,67,.22);
}
@keyframes boltPulse{
  0%,100% { transform: scale(1); opacity: .95; }
  50%     { transform: scale(1.04); opacity: 1; }
}

.cal-battery-bolt i{
  animation: boltBlink 2.4s ease-in-out infinite;
}
@keyframes boltBlink{
  0%,100% { opacity:.88; }
  50%     { opacity:1; }
}

.energy-battery-wrap{
  max-width: 220px;
  margin: 0 auto;
}

/* ===========================
   CALORIE BUTTON SPARK
   =========================== */
#quickAddCal{ overflow: hidden; }
#quickAddCal .spark{
  position:absolute;
  left: 28px; /* ikon hizası */
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px rgba(255,72,120,.18);
  opacity: 0;
  pointer-events:none;
  transform: translate3d(0,0,0);
}
#quickAddCal .spark.play{ animation: sparkPop .55s ease-out forwards; }

#quickAddCal .spark::before,
#quickAddCal .spark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: inherit;
  opacity: .6;
}
#quickAddCal .spark::before{ transform: translate(-12px, 8px) scale(.55); }
#quickAddCal .spark::after { transform: translate(12px, 10px) scale(.45); }

@keyframes sparkPop{
  0%   { opacity: 0; transform: translateY(0) scale(.7); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px) scale(1.25); }
}

/* ===========================
   BATTERY CHARGE SWEEP
   =========================== */
.cal-battery-shell{ position: relative; }
.cal-charge-sweep{
  position:absolute;
  top:0;
  left:-35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events:none;
  z-index: 6;
}
.cal-charge-sweep.play{
  opacity: 1;
  animation: sweepMove .55s ease-out forwards;
}
@keyframes sweepMove{
  0%   { left:-35%; opacity:.0; }
  15%  { opacity:.65; }
  100% { left:110%; opacity:0; }
}

/* ===========================
   OVER LIMIT SHAKE
   =========================== */
#quickAddCal.shake{
  animation: btnShake .35s ease-in-out;
}
@keyframes btnShake{
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-3px); }
  50%     { transform: translateX(3px); }
  75%     { transform: translateX(-2px); }
}