/* gunay-aralik.css — yilsiz gun+ay araligi secici (gunay-aralik.js). Tetik alan + acilir panel;
   dil olarak takvim.css'in kardesi (ayni yukseklik, radius, golge, tema degiskenleri). */

.p360-gunay { position: relative; }
.p360-gunay-alan {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 38px; padding: 0 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.p360-gunay-alan:hover { border-color: var(--border-strong, var(--border)); }
/* Form alan-alti hata durumu: .error hem kapta hem dogrudan butonda olabilir
   (dogrulama.js gizli degeri degil kullanicinin gordugu butonu isaretler). */
.p360-gunay.error .p360-gunay-alan,
.p360-gunay-alan.error { border-color: var(--red); background: rgba(255, 59, 48, 0.04); }
.p360-gunay-alan:focus-visible,
.p360-gunay.acik .p360-gunay-alan {
  outline: none; border-color: var(--accent, #007AFF);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #007AFF) 18%, transparent);
}
.p360-gunay-alan > .bi-calendar-range { color: var(--muted); font-size: 14px; }
.p360-gunay-metin { flex: 1; letter-spacing: .2px; }
.p360-gunay.bos .p360-gunay-metin { color: var(--muted); }
/* Yarim kalan aralik (yalniz bir uc secili): sunucu reddedecek, ekranda da belli olsun. */
.p360-gunay.eksik .p360-gunay-metin { color: var(--orange); }
.p360-gunay-ok { color: var(--muted); font-size: 12px; transition: transform .18s ease; }
.p360-gunay.acik .p360-gunay-ok { transform: rotate(180deg); }

/* Acilir panel (body'ye portal, position:fixed). */
.p360-gunay-panel {
  position: fixed; z-index: 9500; width: 300px;
  background: var(--surface, rgba(255,255,255,0.98));
  backdrop-filter: var(--cam-panel); -webkit-backdrop-filter: var(--cam-panel);
  border: 1px solid var(--border-soft); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.4);
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none; overflow: hidden;
}
.p360-gunay-panel.gor { opacity: 1; transform: none; pointer-events: auto; }

.ga-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
}
.ga-baslik {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text);
  padding: 4px 8px; border-radius: 8px; transition: background .12s ease;
}
.ga-baslik:hover { background: var(--gray-surface); }
.ga-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 14px;
  transition: background .12s ease, color .12s ease;
}
.ga-nav:hover { background: var(--gray-surface); color: var(--text); }
.ga-nav:active { transform: scale(.94); }

/* Ozet seridi: hangi ucun duzenlendigi ve iki ucun degeri. Uce tiklayinca o uc duzenlenir. */
.ga-ozet {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
}
.ga-ok { color: var(--muted); font-size: 12px; }
.ga-uc {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  background: var(--gray-surface); color: var(--text);
  padding: 6px 10px; font-family: var(--font); text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.ga-uc span { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.ga-uc b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ga-uc.etkin {
  border-color: var(--accent, #007AFF);
  background: color-mix(in srgb, var(--accent, #007AFF) 10%, transparent);
}
.ga-uc.etkin span { color: var(--accent, #007AFF); }

.ga-govde { padding: 10px 12px; }
/* pencere-tara: kirilma-gerekmiyor — yedi-sutunlu gun izgarasi; panel sabit genislikte */
.ga-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.ga-gun {
  position: relative; height: 32px; border: 0; cursor: pointer;
  background: transparent; color: var(--text);
  font-family: var(--font); font-size: 13px; font-variant-numeric: tabular-nums;
  border-radius: 9px; transition: background .12s ease, color .12s ease;
}
.ga-gun:hover { background: var(--gray-surface); }
/* Aralik govdesi bitisik bir serit gibi gorunsun: ic gunlerde radius yok, uclarda var. */
.ga-gun.ic { background: color-mix(in srgb, var(--accent, #007AFF) 14%, transparent); border-radius: 0; }
.ga-gun.uc {
  background: var(--accent, #007AFF); color: #fff; font-weight: 600; border-radius: 9px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent, #007AFF) 40%, transparent);
}

/* Ay hizli-atlama modu (baslik tiklaninca). */
.p360-gunay-panel.ga-mod-ay .ga-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ga-hucre {
  height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text);
  font-family: var(--font); font-size: 13px; transition: background .12s ease, color .12s ease;
}
.ga-hucre:hover { background: var(--gray-surface); }
.ga-hucre.secili { background: var(--accent, #007AFF); color: #fff; font-weight: 600; }

.ga-alt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-top: 1px solid var(--border-soft);
}
.ga-temizle, .ga-tamam {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; color: var(--muted);
  transition: background .12s ease, color .12s ease;
}
.ga-temizle:hover { background: var(--gray-surface); color: var(--text); }
.ga-tamam { color: var(--accent, #007AFF); }
.ga-tamam:hover { background: color-mix(in srgb, var(--accent, #007AFF) 12%, transparent); }
