:root{
  --bg:#0b1f4a;
  --bg-grad-1:#081a43;
  --bg-grad-2:#0b255e;
  --txt:#ffffff;
  --muted:#dbe7ff;
  --link:#9bd0ff;
  --link-hover:#ffffff;
  --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.18);
  --accent:#ffd34d;
  --focus:#9fd0ff;
  --max:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

body{
  margin:0;
  background:linear-gradient(180deg,var(--bg-grad-1),var(--bg-grad-2) 45%,var(--bg));
  color:var(--txt);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(3,10,35,.60);
  backdrop-filter:saturate(160%) blur(10px);
}
.topbar__inner{
  width:min(var(--max),92vw);
  margin:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
}
.brand{color:var(--txt);text-decoration:none;font-weight:800;letter-spacing:.2px}
.brand__dot{color:var(--accent)}
.menu-btn{
  appearance:none;border:0;background:transparent;cursor:pointer;
  display:grid;gap:5px;padding:8px 6px;border-radius:10px
}
.menu-btn__bar{
  width:26px;height:2px;background:var(--txt);border-radius:2px;
  transition:transform .25s ease,opacity .25s ease
}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 auto;
  width:min(360px,88vw);
  background:rgba(8,20,56,.98);
  transform:translateX(100%);
  transition:transform .28s ease;
  box-shadow:-14px 0 40px rgba(0,0,0,.55);
  padding:96px 22px 28px;
  overflow:auto;
  z-index:10002
}
.drawer--open{transform:translateX(0)}
.drawer__nav{display:grid;gap:14px}
.drawer__link{
  display:block;text-decoration:none;text-align:center;
  padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--txt);font-weight:700;
}
.drawer__link:visited{color:var(--txt)}
.drawer__link:hover{background:rgba(255,255,255,.12);color:var(--link-hover)}
.drawer__link:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-color:transparent}

.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease;
  z-index:10001;pointer-events:none
}
.backdrop.show{opacity:1;pointer-events:auto}

.close-btn{
  position:absolute;top:18px;right:18px;
  background:transparent;border:0;cursor:pointer;
  color:var(--txt);font-size:2rem;line-height:1;padding:4px 8px;border-radius:8px;z-index:10003
}
.close-btn:hover{background:rgba(255,255,255,.12)}
.close-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.main{width:min(var(--max),92vw);margin:auto;padding:32px 0 44px}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:28px;
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}
.card-clock{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
  max-width:none;
  min-height:300px;
}
#orak .card-clock canvas{
  width:160px; height:160px;
  margin:0 auto;
}
#orak.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  justify-items: stretch;
}
.hero{margin-top:18px;text-align:center}
.hero__title{margin:0 0 10px;font-size:clamp(1.9rem,2.6vw,2.5rem);color:var(--txt)}
.hero__lede{color:var(--muted);margin:0 auto 14px;max-width:80ch;text-align: justify;}
.clock__time{
  font-size:clamp(40px,8vw,60px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-variant-numeric:tabular-nums lining-nums
}
.clock__date{font-size:clamp(14px,2.2vw,18px);color:var(--muted);margin-top:6px}
.hero__links{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:16px}
.hero__links a{
  color:var(--link);text-decoration:underline;text-underline-offset:3px;
}
.hero__links a:hover{color:var(--link-hover)}

.tz-blokk.tz-city {text-align: center;}

#content{margin-top:32px}
.prose{max-width:78ch;margin:0 auto}
.prose h2{margin:26px 0 10px;font-size:clamp(1.3rem,2.1vw,1.6rem);color:var(--txt)}
.prose h3{margin:18px 0 8px;font-size:clamp(1.15rem,2vw,1.35rem);color:var(--txt)}
.prose p{margin:0 0 12px;text-align: justify;}
.prose a{color:var(--link)}
.prose a:hover{color:var(--link-hover)}
.prose ul,.prose ol{margin:0 0 14px 1.2em}
.prose li{margin:6px 0}
.prose img,.prose video{max-width:100%;height:auto;border-radius:10px;display:block;margin:12px auto}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.prose thead th{background:rgba(255,255,255,.10);text-align:left}
.prose th,.prose td{padding:10px 12px;border-top:1px solid var(--border)}
.prose pre{overflow:auto;background:#0a1a44;border:1px solid var(--border);border-radius:10px;padding:12px;margin:16px 0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:#fff}

summary {cursor: pointer;line-height: 1.8;}

.footer{
  width:min(var(--max),92vw);
  margin:auto auto 20px;
  text-align:center;
  color:#cfe4ff;
  font-size:.95rem;
  margin-top: 10px;
}
.footer__links a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer__links a:hover{color:var(--link-hover)}

a{color:var(--link)}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (pointer:coarse){ .menu-btn:focus-visible{outline:3px solid rgba(255,255,255,.5)} }

.grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card--clickable{cursor:pointer}
.card--clickable:hover{background:rgba(255,255,255,.12)}

.breadcrumbs{
  font-size:.95rem;
  color:var(--muted);
  margin:8px 0 16px;
  text-align:left;
}
.breadcrumbs a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs a:hover{color:var(--link-hover)}

.regionlist{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:4px 0 18px;
}
.regionlist a{
  padding:6px 10px;border:1px solid var(--border);
  border-radius:999px;background:rgba(255,255,255,.06);
  color:var(--txt);text-decoration:none
}
.regionlist a:hover{background:rgba(255,255,255,.12);color:var(--link-hover)}

.cardlink{
  display:block;padding:12px;border:1px solid var(--border);
  border-radius:12px;background:rgba(255,255,255,.06);
  color:var(--txt);text-decoration:none
}
.cardlink:hover{background:rgba(255,255,255,.12);color:var(--link-hover)}

.small{font-size:.92rem;color:var(--muted)}

.search{margin:10px 0 18px}
.search input{
  width:100%;padding:10px;border-radius:10px;
  border:1px solid var(--border);background:rgba(0,0,0,.15);
  color:var(--txt)
}

.alpha{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:10px 0 6px
}
.alpha a{
  padding:4px 8px;border:1px solid var(--border);
  border-radius:8px;background:rgba(255,255,255,.06);
  color:var(--txt);text-decoration:none
}
.alpha a:hover{background:rgba(255,255,255,.12);color:var(--link-hover)}

.section{margin-top:14px}

table{
  width:100%;border-collapse:collapse;margin:16px 0;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02)
}
thead th{background:rgba(255,255,255,.10);text-align:left}
th,td{padding:10px 12px;border-top:1px solid var(--border)}
td.small{font-size:.92rem;color:var(--muted)}

canvas{
  background:#fff;border-radius:50%;
  width:200px;height:200px;display:block;margin:0 auto
}
#digital{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:20px;margin-top:10px;color:#f5f7ff;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1
}
#daypart{color:var(--muted);margin-top:4px}
#date{color:var(--muted);margin-top:2px}

section[aria-label$="pontos ideje"] > canvas + div,
section[aria-label$="pontos ideje"] > canvas + div + div,
section[aria-label$="pontos ideje"] > h3{
  text-align:center;
}

section[aria-label$="pontos ideje"] > p:not(.small){ text-align:center; }

.map-wrap{margin-top:14px}
.map-wrap iframe{width:100%;height:320px;border:0}

.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll > table{ width:100%; min-width:560px; }
@media (max-width:560px){ .tbl-scroll > table{ min-width:480px; } }

.main > header{
  text-align:center;
}
.main > header h1,
.main > header p{
  margin-left:auto;
  margin-right:auto;
}

.main > header h1{ margin-bottom:10px; }
.main > header p.small{ color: var(--muted); }

/* UTC, GMT oldal */
.hero__kpi{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}
.kpi-side{
  text-align:center;
  padding:10px 6px;
  color:var(--muted);
}
.kpi-side .mono{
  font-variant-numeric: tabular-nums lining-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(18px, 4.2vw, 22px);
}
.hero__kpi .kpi{
  text-align:center;
  padding:16px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:14px;
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}
.hero__kpi .clock__time{
  font-size:clamp(40px,8vw,60px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-variant-numeric:tabular-nums lining-nums;
}
.hero__kpi .clock__date{ color:var(--muted); margin-top:6px; }

.card-time {
  text-align:center;
  padding:20px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:14px;
  box-shadow:0 2px 18px rgba(0,0,0,.25);
}