/*! © 2026 Cengiz Ilerler. All rights reserved. https://cengiz.ilerler.info/ */
.dt { width: 100%; max-width: 1040px; }
.dt-opts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; margin: -4px 0 18px; }
.dt-set { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dt > .tabs { margin: 0 0 26px; }
.dt-pane[hidden], .dt-set[hidden] { display: none; }
.dt-lines { display: flex; flex-direction: column; gap: 14px; }
.dt-line { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; }
.dt-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.dt-in input, .dt-amt input {
  height: 46px; padding: 0 14px; border: 1px solid rgba(238,244,246,.22); border-radius: 12px; background: var(--abyss);
  color: var(--foam); font: 500 16px/1 var(--mono); color-scheme: dark; outline: none;
}
.dt-in input:focus, .dt-amt input:focus { border-color: var(--sea); }
.dt-in input[type="date"] { width: 184px; }
.dt-in input[type="time"] { width: 150px; }
.dt-in input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .8; }
.dt-in input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.dt-wd { min-width: 6.25em; margin: 0 2px 0 6px; font: 400 14px/1.3 var(--sans); color: var(--mist); }
.dt-amt { display: flex; align-items: center; gap: 8px; }
.dt-amt input { width: 92px; padding: 0 8px; text-align: center; font-size: 18px; }
.dt-amt button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: var(--tide); color: var(--foam); cursor: pointer; transition: color .15s, box-shadow .15s; touch-action: manipulation; }
.dt-amt button:hover { color: var(--sea); box-shadow: inset 0 0 0 1px var(--sea); }
.dt-amt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.dt .g-seg button { white-space: nowrap; }
.dt-out { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--tide); }
.dt-ymd { font: 400 17px/1.4 var(--sans); color: var(--body); }
.dt-ymd[hidden], .dt-back[hidden] { display: none; }
.dt-res { font: 400 clamp(26px, 22px + 1vw, 34px)/1.15 var(--serif); color: var(--foam); }
.dt-back { margin: 18px 0 0; font: 400 14px/1.4 var(--sans); color: var(--amber); }
.dt-time { position: relative; height: 64px; margin-top: 26px; }
.dt-time[hidden] { display: none; }
.dt-track { position: absolute; left: 0; right: 0; top: 22px; height: 10px; border-radius: 99px; background: var(--foam); }
.dt-tick { position: absolute; top: 20px; width: 1px; height: 14px; background: rgba(6,16,25,.35); }
.dt-tick.is-major { top: 16px; height: 22px; background: var(--line); }
.dt-tick b { position: absolute; top: 26px; left: 0; transform: translateX(-50%); font: 400 11.5px/1 var(--sans); color: var(--mist); white-space: nowrap; }
.dt-tick.is-major b { top: 30px; }
.dt-tick b[hidden] { display: none; }
.dt-now { position: absolute; top: 12px; width: 2px; height: 30px; margin-left: -1px; background: var(--amber); }
.dt-now b, .dt-off b { font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.dt-now b { position: absolute; top: -12px; left: 0; transform: translateX(-50%); }
.dt-now.at-l b { transform: none; }
.dt-now.at-r b { transform: translateX(-100%); }
.dt-off { position: absolute; top: -6px; display: inline-flex; align-items: center; gap: 6px; color: var(--amber); }
.dt-off.is-l { left: 0; }
.dt-off.is-r { right: 0; }
.dt-off svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dt-facts { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.dt-facts div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.dt-facts dt { font: 400 14px/1.3 var(--sans); color: var(--mist); }
.dt-facts dd { margin: 0; font: 500 15px/1.35 var(--mono); color: var(--foam); overflow-wrap: anywhere; }
.dt-facts dd small { display: block; font: 400 12px/1.3 var(--sans); color: var(--mist); }
.dt-range { margin-top: 14px; }
@media (max-width: 859px) {
  .dt-facts { grid-template-columns: minmax(0, 1fr); }
  .dt-line { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 560px) {
  .dt-in input[type="date"], .dt-in input[type="time"] { flex: 1 1 140px; width: auto; min-width: 0; padding: 0 10px; }
  .dt-facts div { grid-template-columns: 112px minmax(0, 1fr); }
  .dt-out { padding: 16px 18px; }
  .dt-opts { gap: 14px; }
}
@media (pointer: coarse) { .dt-in input, .dt-amt input { font-size: 16px; } }