/* app.css (BASE) */

/* ===== theme ===== */
:root{
  --text:#111827;
  --border:#e5e7eb;
  --card:#ffffff;
  --brand:#16a34a;
  --bg:#f3f4f6;
  --link:#0b5ed7;
}

html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
}
a{color:var(--link)}
a:hover{text-decoration:underline}

/* ===== centered frame ===== */
.borderSagSol{
  max-width:1200px !important;
  width:100% !important;
  margin:18px auto !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  box-shadow:0 10px 25px rgba(0,0,0,.06) !important;
  overflow:hidden !important;
  border-collapse:separate;
  border-spacing:0;
}
.borderSagSol > tbody > tr > td > table{width:100% !important}

/* ===== kill legacy backgrounds (except header) ===== */
td[background]:not([background*="acilhost-header.jpg"]){
  background-image:none !important;
  background-color:transparent !important;
}

/* ===== legacy table blocks ===== */
.formTable,.TableBaslik{
  border:1px solid var(--border) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:var(--card) !important;
}
.formBaslik{
  background:#f3f4f6 !important;
  color:var(--text) !important;
  font-weight:700 !important;
  padding:10px !important;
}
.formTd{
  background:transparent !important;
  color:var(--text) !important;
  padding:8px 10px !important;
  border-top:1px solid var(--border) !important;
}

/* inputs: only enforce full width inside formTable */
input,select,textarea,button{font-family:inherit}
.formTable input[type="text"],
.formTable input[type="password"],
.formTable textarea,
.formTable select{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  width:100%;
  box-sizing:border-box;
}
input[type="submit"],button{
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  font-weight:700;
}

/* ===== sidebar ===== */
td[style*="width:280px"], td[width="147"]{
  width:196px !important;
  background:#f9fafb !important;
  border-right:1px solid var(--border) !important;
  padding:8px !important;
  vertical-align:top !important;
}
td[style*="width:280px"] .formTable,
td[width="147"] .formTable{
  width:100% !important;
  max-width:180px !important;
  margin:6px auto !important;
}
td[style*="width:280px"] table.formTable[width="130"],
td[width="147"] table.formTable[width="130"]{
  border-collapse:collapse !important;
  border-spacing:0 !important;
  border:1px solid #a9d69d !important;
  background:#eef8e7 !important;
  box-shadow:0 6px 16px rgba(22,163,74,.11) !important;
}
td[style*="width:280px"] table.formTable[width="130"] .formBaslik,
td[width="147"] table.formTable[width="130"] .formBaslik{
  background:linear-gradient(180deg,#6acc52 0%,#52b83e 100%) !important;
  color:#fff !important;
  font-weight:900 !important;
  border-top:0 !important;
  letter-spacing:.01em;
}
td[style*="width:280px"] table.formTable[width="130"] .formTd,
td[width="147"] table.formTable[width="130"] .formTd{
  background:#eef8e7 !important;
  border-top:1px solid #b8dca9 !important;
  padding:4px 6px !important;
  line-height:1.2 !important;
}
td[style*="width:280px"] .uyemenu,
td[width="147"] .uyemenu{
  padding:4px 6px;
  font-size:12px;
  line-height:1.15;
}
td[style*="width:280px"] table.formTable[width="130"] .uyemenu,
td[width="147"] table.formTable[width="130"] .uyemenu{
  color:#114523 !important;
  font-weight:800;
  border-radius:6px;
}
td[style*="width:280px"] table.formTable[width="130"] .uyemenu:hover,
td[width="147"] table.formTable[width="130"] .uyemenu:hover{
  background:#dff2cf !important;
  color:#0a3518 !important;
  text-decoration:none;
}

.sidebar-banner-link{
  display:block;
  width:156px;
  margin:10px auto;
  text-align:center;
}

.sidebar-banner-img{
  display:block;
  width:156px;
  height:260px;
  max-width:100%;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

td[style*="width:280px"] form[action="/login.php"] .formTable,
td[width="147"] form[action="/login.php"] .formTable{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid #acd79f !important;
  background:#eef8e7 !important;
  box-shadow:0 6px 16px rgba(22,163,74,.12) !important;
}
td[style*="width:280px"] form[action="/login.php"] .formBaslik,
td[width="147"] form[action="/login.php"] .formBaslik{
  background:linear-gradient(180deg,#6acc52 0%,#52b83e 100%) !important;
  color:#fff !important;
  font-weight:900 !important;
}
td[style*="width:280px"] form[action="/login.php"] .formTd,
td[width="147"] form[action="/login.php"] .formTd{
  background:#eef8e7 !important;
  color:#1f4723 !important;
  padding:6px 8px !important;
  line-height:1.3 !important;
  border-top:0 !important;
}
td[style*="width:280px"] form[action="/login.php"] .formTd a,
td[width="147"] form[action="/login.php"] .formTd a{
  color:#1c6b2d !important;
  font-weight:700;
}
td[style*="width:280px"] form[action="/login.php"] input[type="text"],
td[style*="width:280px"] form[action="/login.php"] input[type="password"],
td[width="147"] form[action="/login.php"] input[type="text"],
td[width="147"] form[action="/login.php"] input[type="password"]{
  border-color:#9fc98f !important;
}
td[width="853"], td[valign="top"]:not([style*="width:280px"]):not([width="147"]){
  padding:16px 18px !important;
  vertical-align:top !important;
}
.uyemenu{
  display:block;
  padding:8px 10px;
  text-decoration:none;
  border-radius:8px;
}
.uyemenu:hover{background:#f3f4f6}

/* ===== header banner + menu + search (single source of truth) ===== */
td[background*="acilhost-header.jpg"]{
  background-image:url("/images/acilhost-header.jpg") !important;
  background-repeat:no-repeat !important;
  background-position:center top !important;
  background-size:cover !important;

  height:176px !important;
  position:relative !important;
  padding-bottom:40px !important; /* menu bar height + breathing room */
}

/* top menu row (your td has class="main-menu") */
td.main-menu{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  height:34px !important;
  line-height:34px !important;
  padding:0 12px !important;

  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;

  /* keep separators visible */
  color:#ffffff !important;

  /* you already set bg inline in HTML; this just adds a nice top border */
  border-top:1px solid rgba(255,255,255,.15) !important;
}

td.main-menu a{
  font-size:13px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  padding:2px 6px !important;
  display:inline-block !important;
  opacity:.95 !important;
  color:#fff !important; 
}
td.main-menu a:hover{opacity:1 !important; text-decoration:underline !important;}


/* MENU is a normal row (not inside header image) */
td.main-menu{
  position: static !important;
  height: auto !important;
  line-height: 34px !important;
  padding: 6px 12px !important;
  text-align: center !important;
  color: #fff !important;
  white-space: nowrap !important;
}

/* domain search position: RIGHT, above menu */
td[background*="acilhost-header.jpg"] td[align="right"]{
  position:absolute !important;
  right:12px !important;
  bottom:40px !important; /* sits just above menu bar */
  padding:0 !important;
  z-index:5 !important;
}

form.domain-search{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}
form.domain-search input[type="text"]{width:220px !important; box-sizing:border-box !important;}
form.domain-search select{width:120px !important;}
form.domain-search input[type="submit"]{width:auto !important;}

.site-footer{
  display:block !important;
  clear:both;
  width:100%;
  max-width:1200px;
  border-top:1px solid var(--border);
  margin:24px auto 0;
  padding:18px 14px 16px;
  box-sizing:border-box;
  background:#f8fafc;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;
  text-align:center;
  font-size:14px;
  line-height:1.5;
  white-space:normal;
  color:#6b7280;
}

.footer-links a{
  color:var(--link);
  font-weight:700;
  text-decoration:none;
}
.footer-links a:hover{text-decoration:underline;}

.footer-legal{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 10px;
  margin-top:8px;
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:#6b7280;
}

.footer-legal a{
  color:#374151;
  font-weight:700;
  text-decoration:none;
}

.footer-legal a:hover{
  text-decoration:underline;
}

.footer-copy{
  text-align:center;
  font-size:14px;
  margin-top:12px;
}

.footer-copy a{
  color:#111827;
  font-weight:700;
  text-decoration:none;
}

.footer-copy a:hover{
  text-decoration:underline;
}

.site-flash-wrap{
  border-collapse:separate;
  border-spacing:0;
}

.site-flash{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  color:#fff;
  font-weight:800;
  line-height:1.4;
}

.site-flash a{
  color:#fff;
  font-weight:800;
  text-decoration:underline;
}

@media (max-width:640px){
  .site-footer{
    width:calc(100% - 12px) !important;
    margin:14px auto 0 !important;
    padding:14px 10px 12px;
    border-radius:10px;
  }
  .footer-links{
    font-size:0;
    gap:4px 8px;
  }
  .footer-legal{
    font-size:0;
    gap:4px 8px;
  }
  .footer-links a{
    font-size:13px;
  }
  .footer-legal a{
    font-size:12px;
  }
  .footer-copy{font-size:13px;}
}