/* ==== ABC Schools – Light UI v3 (lacivert + gold + kırık beyaz) ==== */
:root{
  --brand-navy:  #18345A;
  --brand-gold:  #C9A24E;
  --brand-cream: #FBFAF4;

  --pico-background-color: var(--brand-cream);
  --pico-card-background-color: #f8f8f2;
  --pico-primary: var(--brand-navy);
  --pico-primary-hover: color-mix(in srgb, var(--brand-navy) 92%, white);
  --pico-muted-border-color: #e7e5e4;
  --pico-text-selection-color: color-mix(in srgb, var(--brand-navy) 25%, white);
}

/* her durumda aydınlık */
html{ color-scheme: light !important; }
@media (prefers-color-scheme: dark){
  :root{
    --pico-background-color: var(--brand-cream) !important;
    --pico-card-background-color: #f8f8f2 !important;
  }
}

/* sayfa genişliği */
body.container{
  max-width: 980px;
  background: var(--pico-background-color) !important;
}

/* ---------- kart (üst hero + form) ---------- */
.wrap{ width:100%; max-width:760px; margin:28px auto; }
.card{
  background: var(--pico-card-background-color) !important;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 18px;
  box-shadow:
    0 18px 34px rgba(24,52,90,.08),
    0 2px 0 rgba(255,255,255,.6) inset;
  overflow: hidden;
  padding: 0;
}

/* ÜST BAŞLIK / HERO – TEK SÜTUN, ORTALANMIŞ */
.header-wrap{
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, #ffffff, #f3f6fb);
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.logo{
  width: 78px; height: 78px; border-radius: 50%;
  object-fit: cover; background: #fff;
  border: 3px solid var(--brand-gold);
  box-shadow: 0 8px 18px rgba(24,52,90,.08);
}
.badge{
  display:inline-block;
  background: color-mix(in srgb, var(--brand-gold) 20%, white);
  color: var(--brand-navy);
  border: 1px solid var(--brand-gold);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .78rem; font-weight: 700;
}
.title{
  margin: .2rem 0 .1rem; font-size: 1.7rem; line-height: 1.2;
  color: var(--brand-navy) !important; font-weight: 800; letter-spacing: .2px;
  opacity: 1 !important;
}
.subtitle{ margin: .15rem 0 0; color:#5b6671; font-size: .96rem }

/* FORM GÖVDESİ */
.card form{ padding: 18px 20px 16px; }
.card .notice{ margin: 10px 20px 0; }

.notice{
  background: var(--pico-card-background-color) !important;
  border: 1px solid var(--pico-muted-border-color);
  border-left: 6px solid var(--brand-gold);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(24,52,90,.06);
}
.notice--ok{   border-left-color: var(--brand-navy); }
.notice--warn{ border-left-color: #ef4444; }

/* ALANLAR – ferah ve net */
label{
  font-weight: 700; color: var(--brand-navy);
  margin-bottom: .35rem; display:block;
}
label + label{ margin-top: .9rem; }

label > input,
label > select,
label > textarea{
  background: #f8f8f2 !important;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 1.05rem .95rem;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .04s;
}
label > input:hover,
label > select:hover,
label > textarea:hover{
  border-color: color-mix(in srgb, var(--brand-navy) 18%, #e5e7eb);
}
label > input::placeholder,
label > textarea::placeholder{ color:#9aa4ad; }
label > input:focus,
label > select:focus,
label > textarea:focus{
  background:#fff !important;
  border-color: color-mix(in srgb, var(--brand-navy) 30%, #e5e7eb);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-navy) 12%, white);
}

/* BUTON – altın, güçlü, tam genişlik */
.btn-gold{
  width: 100%;
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #1f2937;
  font-weight: 800; letter-spacing:.2px;
  border-radius: 12px;
  padding: .95rem 1rem;
  box-shadow: 0 12px 26px rgba(201,162,78,.35);
  transition: transform .06s ease, filter .15s ease;
  margin-top: 1rem;
}
.btn-gold:hover,
.btn-gold:focus{ filter: brightness(1.03); transform: translateY(-1px); }

/* ALT BİLGİ */
.helper, .subtitle, .footer{ color:#6b7280; }
.footer{ text-align:center; margin: 10px 0 0; }

/* admin tabloları */
table{
  background: var(--pico-card-background-color);
  border:1px solid var(--pico-muted-border-color);
  border-radius:14px; overflow:hidden;
  box-shadow:0 10px 20px rgba(24,52,90,.06);
}
thead th{ background: color-mix(in srgb, var(--brand-navy) 6%, white); }
tbody tr + tr td{ border-top:1px solid #eee; }

/* Pico'nun koyu .contrast sınıfını etkisizleştir */
.contrast{
  background: var(--pico-card-background-color) !important;
  color: inherit !important;
}

.support-wrap{ margin-top: 10px; display:flex; justify-content:flex-start; }
.btn-support{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem; border-radius:12px;
  background:#18345A; color:#fff; text-decoration:none; font-weight:700;
  box-shadow:0 8px 18px rgba(24,52,90,.25);
  transition:transform .06s ease, filter .15s ease;
}
.btn-support:hover,.btn-support:focus{ filter:brightness(1.03); transform:translateY(-1px); }
@media (max-width: 520px){
  .support-wrap{ justify-content:stretch; }
  .btn-support{ width:100%; }
}

/* =========================
   Geçersiz durum görünürlüğü
   ========================= */

/* 1) Tarayıcıların default kırmızısını sıfırla (başta kırmızı görünmesin) */
input:invalid,
select:invalid,
textarea:invalid{
  border-color: #e7e5e4;            /* normal kenarlık */
  box-shadow: none;
}

/* 2) Sadece touched OLDUĞUNDA veya form .was-validated iken kırmızı göster */
.touched:invalid,
.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid{
  border-color: #ef4444 !important;
}

.touched:invalid:focus,
.was-validated input:invalid:focus,
.was-validated select:invalid:focus,
.was-validated textarea:invalid:focus{
  box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 20%, white) !important;
}

/* 3) Alan altındaki hata metnini yalnızca yukarıdaki durumlarda göster */
.field .err{ display:none; margin:.35rem 0 0; color:#b91c1c; font-size:.875rem; }
.field .touched:invalid ~ .err,
.was-validated .field :invalid ~ .err{ display:block; }