/* UDV Bottom Nav – compact white */

:root{
  --nav-bg: #fff;                 /* beyaz arka plan */
  --nav-border: transparent;      /* üst çizgi yok */
  --nav-text: #111827;            /* slate-900 */
  --nav-text-dim: #6b7280;        /* slate-500 */
  --shadow: 0 -6px 18px rgba(0,0,0,.08);
}

/* Karanlık modda da beyaz kalsın */
@media (prefers-color-scheme: dark){
  :root{
    --nav-bg: #fff;
    --nav-border: transparent;
    --nav-text: #0b1324;
    --nav-text-dim: #64748b;
    --shadow: 0 -6px 18px rgba(0,0,0,.16);
  }
}

/* İçerik-nav çakışmasın */
body.has-bottom-nav{
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* sarmalayıcı */
.udv-bottom-wrap{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: block;

}

/* çubuk */
.udv-bottom{
  margin: 0 auto;
  max-width: 740px;
  background: var(--nav-bg);
  border-top: 0;                           /* ÜST BORDEUR YOK */
  backdrop-filter: none;                    /* cam efekti yok */
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow);                /* sadece yumuşak gölge */
  border-radius: 14px 14px 0 0;
  padding: 6px 8px;
}

/* grid */
.udv-nav{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}

.udv-item{ display:flex; align-items:center; justify-content:center; }

/* link */
.udv-link{
  text-decoration: none;
  color: var(--nav-text);
  display: grid;
  grid-template-rows: auto 14px;
  align-items: center; justify-items: center;
  gap: 4px;                                 /* daha sıkı */
  padding: 6px 4px;
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease;
}
.udv-link:hover{ background: rgba(17,24,39,.04); }
.udv-link:active{ transform: translateY(1px) scale(.98); }

/* ikon kutusu – daha küçük */
.udv-icon-wrap{
  width: 36px; height: 36px;               /* 44 -> 36 */
  border-radius: 10px;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) inset, 0 3px 8px rgba(0,0,0,.08);
  transition: transform .15s ease;
}
.udv-icon{ font-size: 18px; line-height: 1; color: #fff; } /* 22 -> 18 */

/* etiket */
.udv-label{
  font-size: 10px;                          /* 11 -> 10 */
  color: var(--nav-text-dim);
  letter-spacing: .2px;
  white-space: nowrap;
}

/* aktif durum – ince vurgulu */
.udv-link.is-active{ background: rgba(17,24,39,.06); }
.udv-link.is-active .udv-icon-wrap{ transform: translateY(-1px) scale(1.04); }
.udv-link.is-active .udv-label{ color: var(--nav-text); }

/* renkli gradyanlar */
.udv-grad-emerald{ background: linear-gradient(135deg,#10b981,#34d399); }
.udv-grad-indigo { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.udv-grad-rose   { background: linear-gradient(135deg,#f43f5e,#fb7185); }
.udv-grad-amber  { background: linear-gradient(135deg,#f59e0b,#fbbf24); }
.udv-grad-sky    { background: linear-gradient(135deg,#06b6d4,#22d3ee); }
.udv-grad-violet { background: linear-gradient(135deg,#7c3aed,#a78bfa); }

/* küçük ekranlarda ekstra sıkılaştırma */
@media (max-width: 360px){
  .udv-icon-wrap{ width: 32px; height: 32px; }
  .udv-icon{ font-size: 16px; }
  .udv-label{ font-size: 9.5px; }
}

/* istersen masaüstünde gizle */
@media (min-width: 1024px){
  .udv-bottom-wrap{ display: none; }
}