/* Türkçe tarih/saat seçici (assets/js/zaman-secici.js).
   Tüm sınıflar .zs- öneki altındadır; genel CSS'e dokunulmaz. */

.zs{position:relative;display:block;width:100%}

/* Özgün input DOM'da KALIR ve odaklanabilir olmalıdır: display:none yapılırsa
   "required" doğrulaması "odaklanamayan alan" hatası verir. Bu yüzden görünmez
   ama ölçülebilir bırakılır. */
.zs-gercek{position:absolute;left:12px;bottom:0;width:1px;height:1px;opacity:0;
  padding:0;margin:0;border:0;pointer-events:none}

.zs-alan{display:flex;align-items:center;gap:9px;width:100%;min-height:41px;
  padding:9px 38px 9px 13px;border:1px solid var(--cizgi2);border-radius:9px;
  background:var(--kart);color:var(--metin);font:inherit;font-size:14px;text-align:left;
  cursor:pointer;transition:border-color .14s,box-shadow .14s}
.zs-alan::before{content:"";flex:none;width:17px;height:17px;background:currentColor;opacity:.45;
  -webkit-mask:center/contain no-repeat var(--zs-ikon);mask:center/contain no-repeat var(--zs-ikon)}
.zs{--zs-ikon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>")}
.zs-time{--zs-ikon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")}
.zs-alan:hover{border-color:var(--ana)}
.zs-alan.bos{color:var(--metin3)}
.zs-alan:disabled{opacity:.6;cursor:not-allowed;background:var(--kart2)}
/* Odak halkası gerçek input'a geldiğinde de görünsün. */
.zs-alan:focus-visible,.zs-gercek:focus+.zs-alan{outline:none;border-color:var(--ana);box-shadow:0 0 0 3px var(--ana-acik)}
.zs-gercek:invalid:not(:placeholder-shown)+.zs-alan{border-color:var(--kirmizi)}

.zs-temizle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;
  display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--metin3);
  font-size:13px;line-height:1;cursor:pointer}
.zs-temizle:hover{background:var(--kart2);color:var(--kirmizi)}

/* ---------- Açılır panel ---------- */
.zs-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:284px;
  padding:13px;border:1px solid var(--cizgi);border-radius:14px;background:var(--kart);
  box-shadow:0 14px 40px rgba(23,32,51,.16);animation:zsGir .14s ease}
/* Sınıf adları bileşene özeldir: sitede .ust üst çubuk, .sag bir yardımcı sınıftır. Eskiden
   .ust kullanılıyordu; üst çubuğun kuralları panele de işliyor, top ve bottom birlikte kalıp
   panel 72px'e sıkışıyordu (Panel › Bildirim › "Ne zaman gitsin?": takvim ve saat görünmüyordu). */
.zs-panel.zs-sag{left:auto;right:0}
/* Altta yer kalmadığında alanın üstünde açılır. */
.zs-panel.zs-ust{top:auto;bottom:calc(100% + 6px)}
@keyframes zsGir{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.zs-panel{animation:none}}

.zs-ay{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.zs-ay strong{font-size:.92rem;font-weight:650}
.zs-ok{width:30px;height:30px;border:1px solid var(--cizgi);border-radius:8px;background:var(--kart);
  color:var(--metin2);font-size:16px;line-height:1;cursor:pointer}
.zs-ok:hover{background:var(--ana-acik);color:var(--ana);border-color:var(--ana)}

.zs-hafta,.zs-gunler{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.zs-hafta span{text-align:center;font-size:.68rem;font-weight:700;color:var(--metin3);padding:3px 0}
.zs-gun{height:34px;border:0;border-radius:9px;background:none;color:var(--metin);
  font:inherit;font-size:.86rem;cursor:pointer}
.zs-gun:hover:not([disabled]){background:var(--kart2)}
.zs-gun.bugun{box-shadow:inset 0 0 0 1px var(--ana)}
.zs-gun.secili{background:var(--ana);color:#fff;font-weight:650}
.zs-gun[disabled]{opacity:.3;cursor:not-allowed}
.zs-bos{height:34px}

.zs-saat{margin-top:11px;padding-top:11px;border-top:1px solid var(--cizgi)}
.zs-saat-baslik{display:block;font-size:.78rem;font-weight:650;color:var(--metin2);margin-bottom:7px}
.zs-saat-baslik small{font-weight:400;color:var(--metin3)}
.zs-saat-ic{display:flex;align-items:center;gap:7px}
.zs-saat-ic select{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--cizgi2);border-radius:9px;
  background:var(--kart);color:var(--metin);font:inherit;font-size:15px;text-align:center}
.zs-saat-ic b{color:var(--metin3)}

.zs-eylem{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:12px}
.zs-kisayol{padding:7px 13px;border:1px solid var(--cizgi);border-radius:999px;background:var(--kart);
  color:var(--metin2);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer}
.zs-kisayol:hover{background:var(--ana-acik);color:var(--ana);border-color:var(--ana)}
.zs-tamam{padding:8px 17px;border:0;border-radius:9px;background:var(--ana);color:#fff;
  font:inherit;font-size:.84rem;font-weight:650;cursor:pointer}
.zs-tamam:hover{background:var(--ana-koyu,var(--ana))}

/* ---------- Telefon: panel alttan açılan tabaka ---------- */
@media(max-width:600px){
  .zs-panel{position:fixed;inset:auto 0 0 0;top:auto;min-width:0;width:100%;
    border-radius:20px 20px 0 0;border-bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 40px rgba(23,32,51,.22);animation:zsAlttan .18s ease}
  .zs-gun,.zs-bos{height:42px}
  .zs-saat-ic select{font-size:16px;padding:12px 10px}
  .zs-tamam{padding:12px 22px}
}
@keyframes zsAlttan{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){@media(max-width:600px){.zs-panel{animation:none}}}