/* =========================================================
   WHITE DASHBOARD - COMPACT + MODERN TYPE (FIXED)
   - body::after / sabit turuncu overlay YOK
   - Sadece en alt footer/alt bant turuncu gradient
   ========================================================= */

/* 0) NO OVERFLOW */
html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
*{ box-sizing:border-box; }
img,svg,video,canvas{ max-width:100%; height:auto; }
.container,.app,main{ max-width:100%; overflow-x:clip; }

/* 1) MODERN FONT */
:root{
  --bg: #f4f1ec;
  --panel:#ffffff;
  --line: rgba(17,24,39,.10);
  --shadow: 0 10px 26px rgba(17,24,39,.10);
  --text:#111827;
  --muted:#6b7280;
  --primary:#ff7a18;
  --orangeGrad: linear-gradient(135deg,#ff7a18 0%, #ff8c2b 35%, #ff6a00 70%, #ff9a3d 100%);
}
html,body,button,input,select,textarea{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--text);
}
body{ background: var(--bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 2) PC COMPACT */
.container{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 18px 18px 0 !important;
}

/* 3) TOPBAR */
.topbar{
  padding: 10px 16px !important;
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
}
.brand__name{ font-weight: 800 !important; letter-spacing: -.3px; }
.brand__tag{ color: var(--muted) !important; }
.brand__logo{
  background: linear-gradient(135deg,var(--primary),#ff9a3d) !important;
  color:#111827 !important;
}

/* 4) DASHBOARD LAYOUT */
@media (min-width: 981px){
  .layout{ grid-template-columns: 1fr 420px !important; gap: 18px !important; }
  .right{ position: sticky !important; top: 14px !important; }
}

/* 5) CARDS */
.card{
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}
.card__body{ padding: 14px !important; }

/* 6) HERO */
@media (min-width: 981px){
  .hero{ padding: 16px !important; }
  .hero h1{ font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -1px !important; }
  .hero p{ font-size: 14px !important; color: var(--muted) !important; }
}
.input{ height: 44px !important; }
.btn--big{ height: 44px !important; font-weight: 800 !important; }

/* 7) MUTFAKLAR PC (kompakt 6) */
@media (min-width: 981px){
  .cats{ display:grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; }
  .cat{ padding: 10px !important; min-height: 74px !important; border-radius: 16px !important; }
  .cat__ico{ width: 40px !important; height: 40px !important; border-radius: 14px !important; }
  .cat__name{ font-size: 13px !important; font-weight: 800 !important; }
  .cat__sub{ display:none !important; }
}

/* 8) MUTFAKLAR MOBİL (3x2) */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr !important; }
  .right{ position: static !important; top:auto !important; }

  .cats{ display:grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .cat{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
    border-radius: 16px !important;
    min-width: 0 !important;
  }
  .cat__ico{ width: 44px !important; height: 44px !important; border-radius: 16px !important; margin: 0 !important; }
  .cat__txt{ margin-top: 6px !important; }
  .cat__name{
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .cat__sub{ display:none !important; }
}

/* 9) KAMPANYALAR */
@media (max-width: 980px){
  .campaigns{
    display:flex !important;
    gap:10px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom: 6px !important;
    scroll-snap-type:x mandatory;
  }
  .campaign{ flex:0 0 auto !important; min-width: 280px !important; scroll-snap-align:start; }
}

/* 10) FİYATLAR (zarif) */
.qitem__price{ font-size: 15px !important; font-weight: 900 !important; }
.total__price{ font-size: 17px !important; font-weight: 900 !important; }

/* =========================================================
   ✅ SADECE EN ALT ALANI TURUNCU YAP
   Not: footer farklı class ile geliyorsa hepsini yakalıyoruz.
   ========================================================= */
footer, .footer, #footer, .page-footer, .site-footer,
.footerbar, .footer-bar, .legal, .legalbar, .page-bottom, .bottom-area{
  background: var(--orangeGrad) !important;
  color: #fff !important;
  border-top: none !important;
}
footer *, .footer *, #footer *, .page-footer *, .site-footer *,
.footerbar *, .footer-bar *, .legal *, .legalbar *, .page-bottom *, .bottom-area *{
  color:#fff !important;
}

/* Eğer sayfanın en altındaki metinler "footer değil" ayrı bir banttaysa yakala */
[class*="foot"], [class*="Footer"], [id*="foot"], [id*="Footer"]{
  background: var(--orangeGrad) !important;
  color:#fff !important;
}

/* Bottomnav'u turuncuya BOYMuyoruz (sen footer istedin). Alt menü aynı kalsın. */

/* === FOOTER GRADIENT (ONLY BOTTOM) === */
.site-footer{
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg,#ff7a18 0%, #ff8c2b 35%, #ff6a00 70%, #ff9a3d 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(17,24,39,.10);
}
.site-footer .muted{ color: rgba(255,255,255,.88) !important; }