/* ═══════════════════════════════════════════════════════════════════
   TAKVİM + SAAT — planlama alanları için ortak seçiciler (js/takvim.js).
   Kullanıldığı yerler: teklif.html (güzergah + depo adımı) ve ana
   sayfadaki yerleşim plakası hesaplayıcısı. Renkler beyaz kabuk
   jetonlarının sabitleri (#FFFFFF / #001553 / #47608F / #EEF2FA).

   Tetik (.takvim-tetik) bir form alanı gibi durur; pencere (.takvim)
   ya tetiğin altında (position:absolute, .takvim-alan içinde) ya da
   `tasiyici` verildiyse body'ye taşınmış `.takvim-yuzen` olarak açılır
   (overflow:hidden kartların içinden kaçmak için; JS konumlar).
   Dar ekranda (<=560px) pencere alt sayfaya dönüşür, perde çıkar.
   ═══════════════════════════════════════════════════════════════════ */
:root{ --takvim-vurgu:#FF2800; }
.takvim-alan{ position:relative; }
.takvim-tetik{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:#F7F9FD; border:1px solid rgba(0,21,83,.16); border-radius:4px;
  color:#5C7099; padding:11px 12px; font-size:14.5px; font-family:'Switzer',sans-serif;
  font-variant-numeric:tabular-nums; cursor:pointer; transition:border-color .2s, box-shadow .2s;
}
.takvim-tetik svg{ width:17px; height:17px; flex:0 0 17px; color:#47608F; }
.takvim-tetik .takvim-metin{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.takvim-tetik .takvim-ok-asagi{ width:14px; height:14px; flex:0 0 14px; color:#8FA3C6; transition:transform .25s; }
.takvim-alan.dolu .takvim-tetik{ color:#001553; font-weight:600; }
.takvim-alan.acik .takvim-tetik, .takvim-tetik:focus-visible{ border-color:var(--takvim-vurgu); outline:none; box-shadow:0 0 0 3px rgba(255,40,0,.12); }
.takvim-alan.acik .takvim-ok-asagi{ transform:rotate(180deg); }
.takvim{
  position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:min(320px, 100%); min-width:280px;
  background:#FFFFFF; border:1px solid rgba(0,21,83,.14); border-radius:10px; padding:12px;
  box-shadow:0 18px 40px rgba(0,21,83,.16), 0 2px 6px rgba(0,21,83,.08);
  animation:takvimAc .18s cubic-bezier(.25,1,.3,1);
}
@keyframes takvimAc{ from{ opacity:0; transform:translateY(-4px) scale(.98);} to{ opacity:1; transform:none;} }
.takvim-perde{ display:none; }
/* body'ye taşınmış pencere: JS top/left yazar (belge koordinatı). */
.takvim.takvim-yuzen{ position:absolute; top:0; left:0; }
.takvim-etiket{ display:none; }
.takvim-bas{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.takvim-ay{ font-weight:700; font-size:14px; color:#001553; letter-spacing:.01em; }
.takvim-ok{
  width:30px; height:30px; border-radius:8px; border:1px solid rgba(0,21,83,.12); background:#FFFFFF;
  color:#001553; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;
}
.takvim-ok svg{ width:15px; height:15px; }
.takvim-ok:hover:not([disabled]){ background:#EEF2FA; }
.takvim-ok[disabled]{ opacity:.3; cursor:default; }
.takvim-gunler{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#5C7099; margin-bottom:4px; }
.takvim-izgara{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.takvim-gun{
  aspect-ratio:1; border:none; border-radius:8px; background:transparent; color:#001553;
  font-size:13.5px; font-family:'Switzer',sans-serif; font-variant-numeric:tabular-nums; cursor:pointer;
  transition:background .12s, color .12s;
}
.takvim-gun:hover:not([disabled]){ background:#EEF2FA; }
.takvim-gun:focus-visible{ outline:2px solid var(--takvim-vurgu); outline-offset:-2px; }
.takvim-gun[disabled]{ color:#C4CEE0; cursor:default; }
.takvim-gun.bugun{ box-shadow:inset 0 0 0 1px rgba(0,21,83,.35); }
.takvim-gun.aralik{ background:#EEF2FA; border-radius:0; }
.takvim-gun.aralik-uc{ background:#DCE4F5; }
.takvim-gun.secili, .takvim-gun.secili:hover{ background:#001553; color:#FFFFFF; font-weight:700; }
.takvim-alt{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(0,21,83,.10); }
.takvim-hizli, .takvim-temizle{
  border:1px solid rgba(0,21,83,.14); background:#FFFFFF; color:#001553; border-radius:999px;
  padding:5px 11px; font-size:12px; font-family:'Switzer',sans-serif; cursor:pointer; transition:background .15s;
}
.takvim-hizli:hover{ background:#EEF2FA; }
.takvim-temizle{ margin-left:auto; color:#47608F; border-color:transparent; }
.takvim-temizle:hover{ color:#C0341C; }
/* 'uyumlu' tarih metni: tetik darsa kısa biçim ("3 Eki 2026"). Kap
   sorgusu tetiğin kendi genişliğine bakar; sayfa genişliğine değil —
   tarih + saat yan yana dururken dar olan TETİK. */
.takvim-tetik{ container-type:inline-size; }
.takvim-metin .t-kisa{ display:none; }
@container (max-width:215px){
  .takvim-metin .t-uzun{ display:none; }
  .takvim-metin .t-kisa{ display:inline; }
}
/* Saat tetiği tarih seçilmeden kilitli ("Önce tarih"). */
.takvim-tetik:disabled{ cursor:not-allowed; opacity:.6; }
.takvim-alan.kilitli .takvim-tetik{ background:#FBFCFE; }

/* ── SAAT PENCERESİ ── yarım saatlik dilimler, 4 sütun; tam saatler
   koyu, buçuklar ikincil. Izgara kendi içinde kayar (48 dilim). */
.saat-izgara{
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  max-height:236px; overflow-y:auto; overscroll-behavior:contain; padding:2px;
}
.saat-dilim{
  border:1px solid rgba(0,21,83,.10); background:#FFFFFF; border-radius:8px; padding:8px 0;
  font-family:'Switzer',sans-serif; font-size:13.5px; font-variant-numeric:tabular-nums;
  color:#001553; cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.saat-dilim.tam{ font-weight:600; }
.saat-dilim.yarim{ color:#47608F; }
.saat-dilim:hover:not([disabled]){ background:#EEF2FA; border-color:rgba(0,21,83,.18); }
.saat-dilim:focus-visible{ outline:2px solid var(--takvim-vurgu); outline-offset:-2px; }
.saat-dilim[disabled]{ color:#C4CEE0; border-color:transparent; background:transparent; cursor:default; }
.saat-dilim.secili, .saat-dilim.secili:hover{ background:#001553; border-color:#001553; color:#FFFFFF; font-weight:700; }
.saat-not{ align-self:center; font-size:12px; color:#5C7099; }

@media(max-width:560px){
  .takvim, .takvim.takvim-yuzen{
    position:fixed; top:auto; bottom:0; left:0; right:0; width:auto; min-width:0;
    border-radius:16px 16px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    animation:takvimYukari .22s cubic-bezier(.25,1,.3,1);
  }
  @keyframes takvimYukari{ from{ transform:translateY(24px); opacity:0;} to{ transform:none; opacity:1;} }
  .takvim-perde{ display:block; position:fixed; inset:0; z-index:59; background:rgba(0,21,83,.35); }
  .takvim-perde[hidden]{ display:none; }
  .takvim-gun{ font-size:15px; }
  .saat-izgara{ max-height:46vh; }
  .saat-dilim{ padding:11px 0; font-size:15px; }
  .takvim-etiket{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#47608F; font-weight:600; margin-bottom:10px; }
}