/* Ortak tarih/saat secici (bkz. js/datetime-picker.js).
   Yerlesik input gizli ama DOM'da: degerleri okuyan kod degismedi. */
input.dtp-native {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- alanin yuzu --- */
.dtp-face {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 10px 13px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--atl-line); background: var(--atl-surface-2);
    color: var(--atl-ink); font-family: inherit; font-size: 13px; text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dtp-face:hover { border-color: color-mix(in oklab, var(--atl-accent) 45%, var(--atl-line)); }
.dtp-face:focus-visible,
.dtp-face.is-open {
    outline: none; border-color: var(--atl-accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--atl-accent) 18%, transparent);
}
.dtp-face[disabled] { opacity: .55; cursor: not-allowed; }
.dtp-face__ico { font-size: 13px; color: var(--atl-faint); flex: none; }
.dtp-face__val { flex: 1; font-variant-numeric: tabular-nums; }
.dtp-face.is-empty .dtp-face__val { color: var(--atl-faint); }

/* --- acilir panel --- */
.dtp {
    z-index: 100000; width: 288px; padding: 12px;
    border-radius: 16px; border: 1px solid var(--atl-line);
    background: var(--atl-surface-2);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(11, 11, 20, .16), 0 2px 8px rgba(11, 11, 20, .06);
    font-family: inherit; color: var(--atl-ink);
    animation: dtp-in .13s ease-out;
}
@keyframes dtp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dtp { animation: none; } }

.dtp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dtp__head--time { justify-content: center; }
.dtp__title {
    font-size: 13.5px; font-weight: 700; text-transform: capitalize;
    font-variant-numeric: tabular-nums;
}
.dtp__nav {
    width: 27px; height: 27px; border-radius: 8px; cursor: pointer; flex: none;
    border: 1px solid transparent; background: none; color: var(--atl-faint); font-size: 11px;
}
.dtp__nav:hover { background: var(--atl-surface-1); color: var(--atl-ink); border-color: var(--atl-line); }

.dtp__dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dtp__dows span {
    text-align: center; font-size: 9.5px; font-weight: 700;
    letter-spacing: .02em; color: var(--atl-faint); text-transform: uppercase;
    overflow: hidden; white-space: nowrap;
}

.dtp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp__day {
    aspect-ratio: 1; border: 0; background: none; cursor: pointer; border-radius: 9px;
    font-family: inherit; font-size: 12.5px; color: var(--atl-ink);
    font-variant-numeric: tabular-nums;
    transition: background .12s ease, color .12s ease;
}
.dtp__day:hover { background: var(--atl-surface-1); }
.dtp__day--out { color: color-mix(in oklab, var(--atl-faint) 60%, transparent); }
/* Bugun: cerceve. Secili: dolu. Ikisi ayni anda olabilir. */
.dtp__day.is-today { box-shadow: inset 0 0 0 1px var(--atl-accent); }
.dtp__day.is-sel {
    background: var(--atl-accent); color: var(--atl-accent-ink); font-weight: 700;
    box-shadow: none;
}
.dtp__day.is-sel:hover { background: var(--atl-accent); }

.dtp__foot {
    display: flex; justify-content: space-between; gap: 8px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--atl-line);
}
.dtp__quick {
    background: none; border: 0; padding: 4px 2px; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 600; color: var(--atl-accent);
}
.dtp__quick:hover { text-decoration: underline; }
.dtp__quick--clear { color: var(--atl-faint); }
.dtp__quick--ok { margin-left: auto; }

/* --- saat --- */
.dtp--time { width: 232px; }
.dtp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dtp__col-lbl {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--atl-faint); text-align: center; margin-bottom: 5px;
}
.dtp__col-body {
    max-height: 186px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
    scrollbar-width: thin;
}
.dtp__t {
    border: 0; background: none; cursor: pointer; border-radius: 8px; padding: 6px 0;
    font-family: inherit; font-size: 12.5px; color: var(--atl-ink);
    font-variant-numeric: tabular-nums;
}
.dtp__t:hover { background: var(--atl-surface-1); }
.dtp__t.is-sel { background: var(--atl-accent); color: var(--atl-accent-ink); font-weight: 700; }

@media (max-width: 420px) {
    .dtp { width: calc(100vw - 24px); }
    .dtp--time { width: calc(100vw - 24px); }
}