/* VELİ TALEP SİTESİ — GÖRÜNÜM
   3TYazılım / Modafen teması (yeşil + altın). Telefon öncelikli tasarım:
   veliler çoğunlukla telefondan dolduruyor. */
:root{
  --yesil:#2F6B47;
  --yesil-koyu:#173F27;
  --altin:#D4A017;
  --zemin:#F3F6F4;
  --kart:#FFFFFF;
  --cizgi:#DCE6DF;
  --metin:#1F2A23;
  --soluk:#5E7268;
  --kirmizi:#B5322F;
  --sec:#E9F2EC;
}
*{box-sizing:border-box;}
/* "hidden" işaretli hiçbir kutu görünmesin: aşağıdaki .teslimat ve
   .onemli-not kuralları display:flex kullandığı için tarayıcının
   varsayılan gizleme kuralını eziyor, metni boş olan şeritler boş bir
   çerçeve olarak görünüyordu. */
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--zemin); color:var(--metin);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.5; padding-bottom:70px;
}

/* ---- Üst başlık ---- */
.ust{ background:linear-gradient(135deg,var(--yesil) 0%,var(--yesil-koyu) 100%); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.ust-ic{ max-width:900px; margin:0 auto; padding:16px; display:flex; align-items:center; gap:14px; }
.ust img{ width:52px; height:52px; object-fit:contain; background:#fff; border-radius:10px; padding:4px; }
.ust h1{ margin:0; font-size:19px; letter-spacing:.2px; }
.alt-baslik{ font-size:13px; opacity:.92; margin-top:2px; }
.rozet{ display:inline-block; background:var(--altin); color:#3a2a00; font-weight:700; font-size:11.5px; padding:1px 8px; border-radius:20px; margin-left:4px; }

.sayfa{ max-width:900px; margin:0 auto; padding:16px; }

/* ---- Kartlar ---- */
.kart{ background:var(--kart); border:1px solid var(--cizgi); border-radius:12px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.kart h2{ margin:0 0 10px; font-size:17px; color:var(--yesil-koyu); display:flex; align-items:center; gap:9px; }
.adim{ background:var(--yesil); color:#fff; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex:none; }
.aciklama{ color:var(--soluk); font-size:13.5px; margin:0 0 12px; }
.bilgi{ background:#FFF8E6; border-left:3px solid var(--altin); padding:9px 12px; border-radius:6px; font-size:13.5px; color:#6b5200; }
.uyari{ border-left:5px solid var(--altin); }
.basari{ border-left:5px solid var(--yesil); }
.hata{ background:#FDECEC; border-left:3px solid var(--kirmizi); color:#8a2422; padding:10px 12px; border-radius:6px; margin-bottom:10px; font-size:14px; white-space:pre-line; }

/* ---- Form alanları ---- */
.alanlar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.alanlar label{ display:block; font-size:13px; font-weight:600; color:var(--yesil-koyu); }
.alanlar label input,.alanlar label select{ margin-top:5px; }
.alanlar label.genis{ grid-column:1/-1; }
.zorunlu{ color:var(--kirmizi); }
input,select,textarea{
  font:inherit; font-weight:400; color:var(--metin); padding:10px 12px;
  border:1px solid var(--cizgi); border-radius:8px; background:#fff; width:100%;
}
input:focus,select:focus{ outline:2px solid var(--yesil); outline-offset:1px; border-color:var(--yesil); }
input.eksik{ border-color:var(--kirmizi); background:#FFF6F6; }

/* ---- Ürün kartları ---- */
.kartlar{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.urun{ border:1px solid var(--cizgi); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; background:#fff; }
.urun.secili{ border-color:var(--yesil); box-shadow:0 0 0 2px var(--sec); }
.urun-gorsel{ height:150px; background:var(--sec); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.urun-gorsel img{ width:100%; height:100%; object-fit:cover; }
.urun-gorsel .yer{ color:var(--yesil); font-weight:700; font-size:13px; text-align:center; padding:12px; opacity:.6; }
.urun-govde{ padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.urun-ad{ font-weight:700; font-size:14px; color:var(--yesil-koyu); }
.paket-rozet{ background:var(--altin); color:#3a2a00; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px; margin-left:4px; vertical-align:middle; }
.paket-icerik{ font-size:12px; color:var(--soluk); }
.cesit{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px dashed var(--cizgi); }
.cesit:first-of-type{ border-top:none; }
.cesit-ad{ flex:1; font-size:13px; }
.cesit-fiyat{ font-size:13px; font-weight:700; color:var(--yesil-koyu); white-space:nowrap; }
.adet{ display:flex; align-items:center; gap:4px; }
.adet button{ width:30px; height:30px; border:1px solid var(--cizgi); background:#fff; border-radius:7px; font-size:17px; line-height:1; cursor:pointer; color:var(--yesil-koyu); }
.adet button:hover{ background:var(--sec); }
.adet input{ width:46px; text-align:center; padding:5px; }
.not-alani{ margin-top:4px; }
.not-alani input{ font-size:13px; padding:7px 10px; }

/* ---- Kitap listesi ---- */
.kitap-satir{ display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--cizgi); }
.kitap-satir:last-child{ border-bottom:none; }
.kitap-satir input[type=checkbox]{ width:20px; height:20px; flex:none; accent-color:var(--yesil); }
.kitap-ad{ flex:1; font-size:14px; }
.kitap-program{ color:var(--soluk); font-size:12.5px; }
.kitap-fiyat{ font-weight:700; color:var(--yesil-koyu); white-space:nowrap; }
.kitap-grup-baslik{ font-weight:700; color:var(--yesil-koyu); margin:6px 0; font-size:14px; }

/* ---- Özet ---- */
.ozet-satir{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--cizgi); font-size:14px; }
.ozet-satir:last-of-type{ border-bottom:none; }
.ozet-toplam{ display:flex; justify-content:space-between; font-size:17px; font-weight:700; color:var(--yesil-koyu); padding-top:10px; margin-top:6px; border-top:2px solid var(--yesil); }
.ozet-bos{ color:var(--soluk); font-style:italic; }
.onay{ display:flex; align-items:flex-start; gap:9px; margin:14px 0; font-size:13.5px; }
.onay input{ width:20px; height:20px; flex:none; margin-top:1px; accent-color:var(--yesil); }

/* ---- Düğmeler ---- */
.btn,.btn-buyuk{ background:var(--yesil); color:#fff; border:none; border-radius:9px; font:inherit; font-weight:700; cursor:pointer; padding:11px 18px; }
.btn-buyuk{ width:100%; padding:15px; font-size:16px; }
.btn:hover,.btn-buyuk:hover{ background:var(--yesil-koyu); }
.btn-buyuk:disabled{ background:#9fb3a7; cursor:not-allowed; }

/* ---- Alt sepet çubuğu ---- */
.sepet-cubugu{
  position:fixed; left:0; right:0; bottom:0; background:var(--yesil-koyu); color:#fff;
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 -2px 12px rgba(0,0,0,.2); z-index:50;
}
.sepet-cubugu .btn{ background:var(--altin); color:#3a2a00; padding:8px 14px; }
.sepet-cubugu .btn:hover{ background:#b4830e; }

/* ---- Dip ---- */
.dip{ text-align:center; color:var(--soluk); font-size:12.5px; padding:18px 0 10px; }
.imza{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:8px; opacity:.85; }
.imza img{ width:16px; height:16px; object-fit:contain; }

@media (max-width:560px){
  .ust h1{ font-size:17px; }
  .kartlar{ grid-template-columns:1fr; }
  .urun-gorsel{ height:180px; }
}
@media print{ .sepet-cubugu,.btn,.btn-buyuk{ display:none !important; } }

/* Program/şube seçimi (lise sınıflarında) */
.program-secim{ background:var(--sec); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.program-secim label{ display:block; font-size:13px; color:var(--yesil-koyu); }
.program-secim select{ margin-top:6px; max-width:360px; }
.kitap-satir input[type=radio]{ width:20px; height:20px; flex:none; accent-color:var(--yesil); }

/* Teslimat bilgisi şeritleri: kıyafet okuldan elden, kitap adrese kargo */
.teslimat{ display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:8px; font-size:13.5px; margin-bottom:12px; line-height:1.45; }
.teslimat-simge{ font-size:17px; line-height:1.2; flex:none; }
.teslimat-kiyafet{ background:#EAF3ED; border-left:4px solid var(--yesil); color:#1d4630; }
.teslimat-kitap{ background:#FFF6E2; border-left:4px solid var(--altin); color:#6b4e00; }
.alan-notu{ display:block; margin-top:5px; font-size:12px; font-weight:400; color:var(--soluk); }

/* Koyu puntolu önemli uyarı (değişiklik talepleri için ön büro) */
.onemli-not{
  background:#FFF4F4; border:1px solid #F2C3C2; border-left:5px solid var(--kirmizi);
  color:#7d2220; font-weight:700; font-size:14px; line-height:1.5;
  padding:12px 14px; border-radius:8px; margin:0 0 14px;
  display:flex; align-items:flex-start; gap:9px;
}
.onemli-not .not-simge{ font-size:17px; line-height:1.2; flex:none; }