/* =========================
   EN BABA UI SYSTEM (GLOBAL)
   ========================= */

:root{
  /* Marka renkleri */
  --enb: #5B3A29;
  --enbH: #4A2F22;
  --enbSoft: #F6EFEA;

  /* Nötrler */
  --enbBg: #f8fafc;
  --enbCard: rgba(255,255,255,.92);
  --enbText: #0f172a;
  --enbMuted: #475569;
  --enbBorder: rgba(15,23,42,.10);

  /* İşçilik */
  --enbRing: rgba(91,58,41,.28);
  --enbShadow: 0 18px 60px rgba(2,6,23,.12);
  --enbShadow2: 0 10px 30px rgba(2,6,23,.10);

  /* Radius & motion */
  --enbR: 22px;
  --enbRsm: 14px;
  --enbT: 180ms;
}

/* Sayfa zemini */
.enb-ui{
  background: var(--enbBg);
  color: var(--enbText);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografi düzeni (gerçek mağaza hissi) */
.enb-ui h1, .enb-ui h2, .enb-ui h3{
  letter-spacing: -0.02em;
}
.enb-ui h1{ line-height: 1.15; }
.enb-ui h2{ line-height: 1.20; }
.enb-ui p{ color: var(--enbMuted); }

/* Kart standardı */
.enb-card{
  background: var(--enbCard);
  border: 1px solid var(--enbBorder);
  border-radius: var(--enbR);
  box-shadow: var(--enbShadow);
  backdrop-filter: blur(10px);
}
.enb-card--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
}

/* Bölüm başlık spacing standardı */
.enb-section{
  padding: 22px;
}
@media (min-width: 640px){
  .enb-section{ padding: 28px; }
}

/* === Premium Link System === */
.enb-ui a{
  text-decoration: none;
}

.enb-link{
  color: var(--enb) !important;
  font-weight: 900;
  position: relative;
  display: inline-block;
  padding: .06rem .18rem;
  border-radius: 10px;
  transition: transform var(--enbT) ease, background var(--enbT) ease, color var(--enbT) ease;
  outline: none;
}

.enb-link::after{
  content:"";
  position:absolute;
  left:.18rem;
  right:.18rem;
  bottom:-2px;
  height:2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91,58,41,.25) 20%,
    rgba(91,58,41,.55) 50%,
    rgba(91,58,41,.25) 80%,
    transparent 100%);
  transform: scaleX(.40);
  transform-origin: center;
  opacity:.95;
  transition: transform 220ms ease, opacity 220ms ease;
}

.enb-link:hover{
  color: var(--enbH) !important;
  background: rgba(91,58,41,.07);
  transform: translateY(-1px);
}
.enb-link:hover::after{
  transform: scaleX(1);
  opacity: 1;
}
.enb-link:focus-visible{
  box-shadow: 0 0 0 3px var(--enbRing);
}

/* === Button standardı === */
.enb-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 900;
  border-radius: 999px;
  padding: .85rem 1.15rem;
  transition: transform var(--enbT) ease, box-shadow var(--enbT) ease, background var(--enbT) ease;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.enb-btn--primary{
  background: var(--enb);
  color: #fff;
  box-shadow: var(--enbShadow2);
}
.enb-btn--primary:hover{
  background: var(--enbH);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2,6,23,.16);
}
.enb-btn--ghost{
  background: rgba(255,255,255,.85);
  border: 1px solid var(--enbBorder);
  color: var(--enbText);
}
.enb-btn--ghost:hover{
  background: rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.enb-btn:focus-visible{
  box-shadow: 0 0 0 3px var(--enbRing), 0 16px 40px rgba(2,6,23,.16);
}

/* === Form standardı === */
.enb-field{
  width: 100%;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.9);
  border-radius: 16px;
  padding: .9rem 1rem;
  font-size: 14px;
  outline: none;
  transition: box-shadow var(--enbT) ease, border-color var(--enbT) ease, transform var(--enbT) ease;
}
.enb-field:focus{
  border-color: rgba(91,58,41,.35);
  box-shadow: 0 0 0 3px var(--enbRing);
  transform: translateY(-1px);
}
.enb-label{
  font-size: 13px;
  font-weight: 900;
  color: var(--enb);
}

/* “Gerçek mağaza” hissi: küçük detaylar */
.enb-kbd{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
}

/* === Toast standardı (site geneli) === */
.enb-toast-layer{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}
.enb-toast{
  background: rgba(91,58,41,.96);
  color: #fff;
  padding: 14px 42px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
  max-width: 92vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  animation: enbToastIn 220ms ease;
}
.enb-toast--error{ background: rgba(220,38,38,.98); }
.enb-toast--success{ background: rgba(37,99,235,.98); }

@keyframes enbToastIn{
  from{ opacity: 0; transform: translateY(6px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}