:root{
  --bg: #0f2333;
  --surface: #132b3e;
  --text: #e8eef2;
  --muted: #b8c6d1;
  --accent: #e39a2a;
  --border: rgba(255,255,255,.08);
  --nav-safe: env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
body{font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.bg-app{background:var(--bg)}
.text-app{color:var(--text)}
.text-accent{color:var(--accent)}
.border-app{border-color:var(--border)!important}
.link-top{color:var(--muted); text-decoration:none}
.link-top:hover{color:var(--text)}
.topbar{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); backdrop-filter: blur(6px);}

.btn-accent{background:var(--accent); border-color:var(--accent); color:#0b0b0b}
.btn-accent:hover{filter:brightness(.95)}

/* HERO */
.hero{
  /* position: relative; */
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('../img/iu_bg.jpg') center center / cover no-repeat;
  padding: 3.5rem 0;
  min-height: 70vh;
  display: flex; align-items: center;
}
.hero h1{color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero p{color:var(--muted); text-shadow:0 2px 8px rgba(0,0,0,.5)}

.hero .hero-logo{
  max-width: 420px;
  width: 36vw;
  min-width: 280px;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.card-app{background:var(--surface); border:1px solid var(--border); color:var(--text)}
.card-ann{border-left:4px solid var(--accent)}
.badge-accent{background:var(--accent); color:#111}

#calendar .day{height:92px;border:1px solid var(--border);border-radius:.5rem;position:relative;padding:.5rem;background:rgba(255,255,255,.02)}
#calendar .day.today{outline:2px solid var(--accent)}
#calendar .day .num{position:absolute;top:.35rem;right:.5rem;font-weight:700;color:var(--muted)}
#calendar .event-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:6px}

.commissions-strip{scroll-snap-type:x mandatory; overflow-x:auto; display:flex; gap:1rem; padding-bottom:.5rem}
.commissions-strip .chip{scroll-snap-align:start; min-width:280px; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem}
.commissions-strip .chip h6{margin:0 0 .25rem 0; color:#fff}
.commissions-strip .chip p{margin:0; color:var(--muted)}

.stats-bar .stat{text-align:center; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:.75rem}
.stats-bar .stat .num{font-size:1.5rem; font-weight:800; color:#fff}

/* Mobile bottom navbar with centered floating logo */
.mobile-nav{
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 74px;
  background: rgba(19,43,62,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding-bottom: max(var(--nav-safe), 0px);
  z-index: 1030;
}
.mobile-nav-inner{
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 96px 1fr 1fr;
  align-items: center;
  gap: .25rem;
  padding: 0 .5rem;
}
.mobile-nav .item{
  color: var(--muted);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .75rem;
  background: transparent; border: 0;
}
.mobile-nav .item i{font-size: 1.25rem}
.mobile-nav .item:active, .mobile-nav .item:focus{color: var(--text)}

.logo-fab{
  position: relative;
  display: grid; place-items: center;
  width: 96px; height: 96px;
  margin-top: -36px;
  z-index: 1;
}
.logo-fab .ring{
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: #0b1a26;
  border: 3px solid var(--border);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 4px rgba(227,154,42,.15);
  display: grid; place-items: center;
}
.logo-fab img{
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255,255,255,.85);
}

.btn-menu i{font-size:1.25rem}
.btn-menu span{line-height:1}

body{padding-bottom: 92px}
@media (min-width: 992px){ body{padding-bottom:0} }

/* Mobile: stamp hero logo bottom-right */
@media (max-width: 768px){
  .hero{ min-height: 88vh; }
  .hero .hero-logo{
    position: absolute;
    bottom: clamp(12px, 3.5vh, 24px);
    right: clamp(12px, 4vw, 28px);
    width: clamp(72px, 22vw, 110px);
    min-width: 72px;
    border-width: 4px;
  }
}


/* --- Override Bootstrap muted color to fit theme --- */
.text-muted{ color: var(--muted) !important; }

/* --- Advanced Calendar styles --- */
.cal-wrap{ background: var(--surface, #132b3e); border:1px solid var(--border, rgba(255,255,255,.08)); border-radius:1rem; padding:1rem; }
.cal-head{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.5rem; }
.cal-head .title{ font-weight:800; color:#fff; }
.cal-head .controls .btn{ border-color: var(--border, rgba(255,255,255,.08)); color: var(--text, #e8eef2); background: rgba(255,255,255,.03); }
.cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
  grid-auto-rows: 112px;   /* <-- sabit yükseklik (isteğine göre 96–128px arası oynat) */
}
.cal-colhead{ text-align:center; text-transform:uppercase; font-size:.8rem; color: var(--muted, #b8c6d1); }
.cal-day{
  position: relative;
  height: 100%;            /* satır yüksekliğini kullan */
  min-height: 0;           /* min-height uzamasın */
  border:1px solid var(--border);
  border-radius:.75rem;
  padding:.5rem;
  background: rgba(255,255,255,.02);
  overflow: hidden;        /* içerik taşarsa dışarı taşmasın */
}
.cal-day .num{
  position:absolute; top:.4rem; right:.5rem;
  font-weight:700; color: var(--muted);
}
.cal-day.today{ outline:2px solid var(--accent, #e39a2a); }
.cal-day.has-events{ background: linear-gradient(180deg, rgba(227,154,42,.08), rgba(255,255,255,.02)); border-color: rgba(227,154,42,.25); }
/* chip alanı sabit; içerik taşarsa gizle */
.cal-day .chips{
  position: absolute;
  left: .5rem; right: .5rem;
  top: 1.9rem;                 /* numaranın altına gelsin */
  bottom: .5rem;               /* kartın dibine kadar */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .25rem;
  overflow: hidden;            /* fazla satır görünmesin */
}
/* chip’ler tek satırda daralsın */
.cal-chip{
  font-size:.7rem;
  padding:.15rem .4rem;
  border-radius:.5rem;
  background: rgba(227,154,42,.18);
  color:#111; font-weight:600;
  white-space: nowrap;         /* taşmayı engelle */
}
.cal-day button.day-btn{ position:absolute; inset:0; background:transparent; border:0; cursor:pointer; }
.cal-foot{ display:flex; justify-content:flex-end; margin-top:.5rem; }
.cal-foot .legend{ display:flex; gap:.5rem; align-items:center; font-size:.85rem; color: var(--muted, #b8c6d1); }
.legend .swatch{ width:10px; height:10px; border-radius:50%; background: var(--accent, #e39a2a); display:inline-block; }


@media (max-width: 576px){
  .cal-grid{ grid-auto-rows: 90px; }
}


#eventModal .modal-content{ background: var(--surface, #132b3e); color: var(--text, #e8eef2); border:1px solid var(--border, rgba(255,255,255,.08)); }
#eventModal .list-group-item{ background: transparent; color: var(--text, #e8eef2); border-color: var(--border, rgba(255,255,255,.08)); }