/* ==========================================================================
   namazvakitleri.io – Stilbogen
   Eine Datei, keine Abhängigkeit. Die Vorgängerseite lud 232 KB Bootstrap für
   ein Raster und eine Tabelle; das hier deckt dieselbe Seite in einem Bruchteil
   ab und lädt ohne zweiten Serverkontakt.
   ========================================================================== */

/* --------------------------------------------------------------- Farbwerte */

:root {
  color-scheme: light;

  /* Grün ist bei einer Gebetszeiten-Seite Erwartung, nicht Geschmack. Damit es
     nicht nach Vereinsheim aussieht, ist es tief und leicht ins Blaugrüne
     gezogen, mit warmem Messing als einzigem Gegenpol. */
  --yesil-900: #06251a;
  --yesil-800: #0a3325;
  --yesil-700: #0d4b33;
  --yesil-600: #116043;
  --yesil-500: #177954;
  --yesil-300: #6bbfa0;
  --yesil-100: #dff0e8;
  --yesil-50:  #f0f8f4;

  --pirinc-600: #8a5f1e;
  --pirinc-500: #b3822b;
  --pirinc-300: #e0b95f;
  --pirinc-100: #fbf1d8;

  --kagit:     #ffffff;
  --zemin:     #f7f8f6;
  --zemin-alt: #eef1ed;
  --cizgi:     #dfe4de;
  --cizgi-acik:#ecefea;

  --yazi:      #14201b;
  --yazi-orta: #4c5a53;
  --yazi-soluk:#6f7d75;

  --vurgu:     var(--yesil-700);
  --vurgu-yazi:#ffffff;

  --uyari-zemin: #fdf3e3;
  --uyari-cizgi: #e8cf9d;
  --uyari-yazi:  #6b4c12;

  /* Abstände in einer Reihe, damit nichts "fast gleich" ist. */
  --a1: .25rem;  --a2: .5rem;   --a3: .75rem;  --a4: 1rem;
  --a5: 1.5rem;  --a6: 2rem;    --a7: 3rem;    --a8: 4rem;

  --yuvarlak-s: 8px;
  --yuvarlak:   14px;
  --yuvarlak-b: 22px;

  --golge-1: 0 1px 2px rgba(10, 40, 30, .06), 0 1px 3px rgba(10, 40, 30, .04);
  --golge-2: 0 2px 8px rgba(10, 40, 30, .07), 0 8px 24px rgba(10, 40, 30, .06);
  --golge-3: 0 4px 16px rgba(10, 40, 30, .10), 0 16px 48px rgba(10, 40, 30, .08);

  --genislik: 1120px;

  /* Systemschriften decken Türkisch vollständig ab – ı, İ, ğ, ş, ç, ö, ü sind
     überall enthalten. Ein Webfont würde nur Ladezeit kosten. */
  --yazi-tipi: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
  --yazi-rakam: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                Menlo, Consolas, monospace;
}

/* Das dunkle Schema gilt zweimal: einmal, wenn das Gerät es verlangt und der
   Besucher nicht ausdrücklich hell gewählt hat, und einmal, wenn er selbst auf
   dunkel gestellt hat. Beide Blöcke setzen dieselben Werte – ein gemeinsamer
   Selektor ginge nicht, weil eine Bedingung eine Medienabfrage ist. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;

    --kagit:     #12201a;
    --zemin:     #0b1512;
    --zemin-alt: #172b23;
    --cizgi:     #24382f;
    --cizgi-acik:#1b2c25;

    --yazi:      #e8f0ea;
    --yazi-orta: #a9bcb1;
    --yazi-soluk:#7f9389;

    --yesil-100: #16332a;
    --yesil-50:  #102a21;

    --vurgu:     var(--yesil-300);
    --vurgu-yazi:#06251a;

    --uyari-zemin: #2e2413;
    --uyari-cizgi: #57431c;
    --uyari-yazi:  #e8cf9d;

    --golge-1: 0 1px 2px rgba(0, 0, 0, .35);
    --golge-2: 0 2px 8px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .28);
    --golge-3: 0 4px 16px rgba(0, 0, 0, .45), 0 16px 48px rgba(0, 0, 0, .35);
  }
}

:root[data-tema="koyu"] {
  color-scheme: dark;

  --kagit:     #12201a;
  --zemin:     #0b1512;
  --zemin-alt: #172b23;
  --cizgi:     #24382f;
  --cizgi-acik:#1b2c25;

  --yazi:      #e8f0ea;
  --yazi-orta: #a9bcb1;
  --yazi-soluk:#7f9389;

  --yesil-100: #16332a;
  --yesil-50:  #102a21;

  --vurgu:     var(--yesil-300);
  --vurgu-yazi:#06251a;

  --uyari-zemin: #2e2413;
  --uyari-cizgi: #57431c;
  --uyari-yazi:  #e8cf9d;

  --golge-1: 0 1px 2px rgba(0, 0, 0, .35);
  --golge-2: 0 2px 8px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .28);
  --golge-3: 0 4px 16px rgba(0, 0, 0, .45), 0 16px 48px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--yazi-tipi);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--a3);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.65rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--a4); }
p:last-child { margin-bottom: 0; }

a { color: var(--yesil-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--yesil-500); }
:root[data-tema="koyu"] a { color: var(--yesil-300); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) a { color: var(--yesil-300); } }

:focus-visible {
  outline: 3px solid var(--yesil-500);
  outline-offset: 2px;
  border-radius: 3px;
}

img, svg { max-width: 100%; }
svg { fill: currentColor; }

.kap {
  width: 100%;
  max-width: var(--genislik);
  margin-inline: auto;
  padding-inline: var(--a4);
}

.gizli {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.atla {
  position: absolute; left: -9999px;
  background: var(--vurgu); color: var(--vurgu-yazi);
  padding: var(--a3) var(--a4); border-radius: 0 0 var(--yuvarlak-s) 0;
  z-index: 100;
}
.atla:focus { left: 0; top: 0; }

/* ------------------------------------------------------------------- Kopf */

.ust {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--kagit) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  display: flex; align-items: center; gap: var(--a3);
  min-height: 60px; padding-block: var(--a2);
}

.marka {
  display: inline-flex; align-items: center; gap: var(--a2);
  color: var(--yazi); text-decoration: none; font-weight: 700;
  font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; flex: none;
}
.marka-im { width: 26px; height: 26px; color: var(--yesil-600); flex: none; }
:root[data-tema="koyu"] .marka-im { color: var(--yesil-300); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .marka-im { color: var(--yesil-300); } }
.marka-ad b { font-weight: 700; color: var(--yesil-600); }
:root[data-tema="koyu"] .marka-ad b { color: var(--yesil-300); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .marka-ad b { color: var(--yesil-300); } }

@media (max-width: 560px) {
  .marka-ad { display: none; }
}

/* Suche */
.ara { position: relative; flex: 1 1 auto; display: flex; min-width: 0; }
.ara input {
  flex: 1; min-width: 0;
  padding: .55rem .75rem; padding-right: 2.6rem;
  font: inherit; font-size: .95rem; color: var(--yazi);
  background: var(--zemin-alt);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
}
.ara input::placeholder { color: var(--yazi-soluk); }
.ara input:focus { background: var(--kagit); border-color: var(--yesil-500); outline-offset: 0; }
.ara button {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--yazi-orta);
  border-radius: 999px;
}
.ara button svg { width: 18px; height: 18px; }
.ara button:hover { color: var(--vurgu); }

.ara-liste {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: var(--a1); list-style: none;
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: var(--golge-3);
  max-height: 60vh; overflow-y: auto; z-index: 60;
}
.ara-liste li a {
  display: flex; align-items: baseline; gap: var(--a2);
  padding: .5rem .7rem; border-radius: var(--yuvarlak-s);
  color: var(--yazi); text-decoration: none;
}
.ara-liste li a:hover,
.ara-liste li a:focus,
.ara-liste li[aria-selected="true"] a { background: var(--yesil-50); }
.ara-liste .il { color: var(--yazi-soluk); font-size: .85rem; }
.ara-liste .bos { padding: .7rem; color: var(--yazi-soluk); font-size: .9rem; }

.ust-dugmeler { display: flex; gap: var(--a1); flex: none; }
.dugme-konum, .dugme-tema {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: 999px;
  color: var(--yazi-orta); cursor: pointer;
}
.dugme-konum svg, .dugme-tema svg { width: 19px; height: 19px; }
.dugme-konum:hover, .dugme-tema:hover { background: var(--zemin-alt); color: var(--vurgu); }
.dugme-konum[data-calisiyor] { animation: doner 1.1s linear infinite; }
@keyframes doner { to { transform: rotate(360deg); } }

/* Menü */
.gezinti { border-top: 1px solid var(--cizgi-acik); }
.gezinti-ic {
  display: flex; gap: var(--a4); overflow-x: auto;
  scrollbar-width: none; padding-block: .55rem;
}
.gezinti-ic::-webkit-scrollbar { display: none; }
.gezinti a {
  white-space: nowrap; font-size: .9rem; font-weight: 500;
  color: var(--yazi-orta); text-decoration: none;
}
.gezinti a:hover { color: var(--vurgu); }

@media (max-width: 720px) {
  .gezinti-ic { padding-inline: var(--a4); }
}

/* --------------------------------------------------------------- Bausteine */

main { padding-block: var(--a5) var(--a8); }

.izler { margin-bottom: var(--a4); font-size: .85rem; }
.izler ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.izler li + li::before { content: "›"; margin-right: .35rem; color: var(--yazi-soluk); }
.izler a { color: var(--yazi-orta); text-decoration: none; }
.izler a:hover { color: var(--vurgu); text-decoration: underline; }
.izler [aria-current] { color: var(--yazi-soluk); }

.kart {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: var(--a5);
  box-shadow: var(--golge-1);
}

.bolum { margin-block: var(--a7); }
.bolum > h2 { margin-bottom: var(--a4); }

.bolum-bas {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--a3); flex-wrap: wrap; margin-bottom: var(--a4);
}
.bolum-bas h2 { margin: 0; }
.bolum-bas a { font-size: .9rem; font-weight: 500; }

/* Zwei gleichwertige Blöcke nebeneinander, untereinander sobald es eng wird.
   Kein Rasterystem für die ganze Seite – das hier ist der einzige Fall. */
.ikili {
  display: grid; gap: var(--a5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.ikili > div > h2 { margin-bottom: var(--a4); }

.uyari {
  display: flex; gap: var(--a3); align-items: flex-start;
  background: var(--uyari-zemin);
  border: 1px solid var(--uyari-cizgi);
  color: var(--uyari-yazi);
  border-radius: var(--yuvarlak-s);
  padding: var(--a3) var(--a4);
  font-size: .9rem;
}
.uyari svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; }
.uyari p { margin: 0; }

.dugme {
  display: inline-flex; align-items: center; gap: var(--a2);
  padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--vurgu); color: var(--vurgu-yazi);
  border: 1px solid transparent;
  font-weight: 600; font-size: .93rem; text-decoration: none; cursor: pointer;
}
.dugme:hover { background: var(--yesil-600); color: #fff; }
.dugme-ikincil {
  background: var(--kagit); color: var(--yazi);
  border-color: var(--cizgi);
}
.dugme-ikincil:hover { background: var(--zemin-alt); color: var(--yazi); }
.dugme svg { width: 17px; height: 17px; }

/* ------------------------------------------------------- Vakit-Darstellung */

/* Die Kopfkarte einer Ortsseite. Sie beantwortet in einem Blick, was 90 % der
   Besucher wissen wollen: welche Vakit läuft und wie lange noch. */
.vakit-bas {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--yesil-800), var(--yesil-600) 65%, var(--yesil-500));
  color: #fff;
  border-radius: var(--yuvarlak-b);
  padding: var(--a6) var(--a5);
  box-shadow: var(--golge-2);
}
.vakit-bas::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 88% 10%, rgba(224, 185, 95, .22), transparent 70%),
    radial-gradient(50% 80% at 8% 100%, rgba(107, 191, 160, .18), transparent 70%);
  pointer-events: none;
}
.vakit-bas > * { position: relative; }

.vakit-bas h1 { color: #fff; margin-bottom: var(--a1); }
.vakit-tarih {
  color: rgba(255, 255, 255, .82); font-size: .95rem; margin-bottom: var(--a5);
  display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3);
}
.vakit-tarih .hicri { color: var(--pirinc-300); }

.sonraki {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--a3) var(--a6);
}
.sonraki-etiket {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .09em;
  color: rgba(255, 255, 255, .7); margin-bottom: var(--a1);
}
.sonraki-ad { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.sonraki-saat { font-size: 1.05rem; color: rgba(255, 255, 255, .85); }

.geri-sayim {
  font-family: var(--yazi-rakam);
  font-size: clamp(2.1rem, 1.2rem + 4vw, 3.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  /* Feste Breite, sonst zappelt die Zeile bei jeder Sekunde. */
  min-width: 5.5ch;
}
.geri-sayim small { font-size: .42em; font-weight: 500; opacity: .75; }

/* Die sechs Vakit als Streifen. Auf schmalen Geräten scrollt er waagerecht,
   statt in zwei unruhige Reihen zu brechen. */
.vakitler {
  display: grid; gap: var(--a2);
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--a5);
}
@media (max-width: 760px) {
  .vakitler { grid-template-columns: repeat(3, 1fr); }
}

.vakit {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--yuvarlak);
  padding: var(--a3) var(--a2);
  text-align: center;
}
.vakit-ad {
  font-size: .8rem; color: rgba(255, 255, 255, .78);
  margin-bottom: var(--a1); white-space: nowrap;
}
.vakit-saat {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em;
}
.vakit[data-simdi] {
  background: #fff; color: var(--yesil-800);
  border-color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.vakit[data-simdi] .vakit-ad { color: var(--yesil-600); font-weight: 600; }
.vakit[data-gecti] { opacity: .55; }

/* -------------------------------------------------------------- Tabellen */

.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.vakit-tablo {
  width: 100%; border-collapse: collapse; font-size: .93rem;
  background: var(--kagit);
}
.vakit-tablo th, .vakit-tablo td {
  padding: .6rem .7rem; text-align: center;
  border-bottom: 1px solid var(--cizgi-acik);
  white-space: nowrap;
}
.vakit-tablo thead th {
  position: sticky; top: 0;
  background: var(--zemin-alt); color: var(--yazi-orta);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; z-index: 1;
}
.vakit-tablo tbody td { font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums; }
.vakit-tablo th:first-child, .vakit-tablo td:first-child {
  text-align: left; font-family: var(--yazi-tipi); white-space: normal;
}
.vakit-tablo tbody tr:hover { background: var(--yesil-50); }
.vakit-tablo tr[data-bugun] { background: var(--yesil-100); font-weight: 600; }
.vakit-tablo tr[data-bugun] td:first-child { box-shadow: inset 3px 0 0 var(--vurgu); }
.vakit-tablo tr[data-cuma] td:first-child { color: var(--yesil-600); }
.vakit-tablo caption {
  caption-side: top; text-align: left; padding-bottom: var(--a3);
  color: var(--yazi-orta); font-size: .9rem;
}

/* ----------------------------------------------------------- Ortslisten */

.yer-izgara {
  display: grid; gap: var(--a2);
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.yer-izgara a {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--a2);
  padding: .55rem .8rem;
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-s);
  color: var(--yazi); text-decoration: none; font-size: .92rem;
}
.yer-izgara a:hover {
  border-color: var(--yesil-300); background: var(--yesil-50); color: var(--yesil-700);
}
.yer-izgara .saat {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-size: .85rem; color: var(--yazi-soluk);
}
.yer-izgara a:hover .saat { color: var(--yesil-600); }
.yer-izgara .plaka {
  font-size: .72rem; color: var(--yazi-soluk);
  background: var(--zemin-alt); border-radius: 4px; padding: 0 .3rem;
}

/* Karten mit Zeitangabe, z. B. beliebte Städte auf der Startseite */
.sehir-izgara {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.sehir-kart {
  display: block; padding: var(--a4);
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); text-decoration: none; color: var(--yazi);
  box-shadow: var(--golge-1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sehir-kart:hover {
  transform: translateY(-2px); box-shadow: var(--golge-2);
  border-color: var(--yesil-300); color: var(--yazi);
}
.sehir-kart .ad { font-weight: 600; margin-bottom: var(--a1); }
.sehir-kart .alt-satir {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--yazi-soluk); font-size: .85rem;
}
.sehir-kart .vurgulu {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  color: var(--yesil-600); font-weight: 700; font-size: 1.05rem;
}

/* ------------------------------------------------------------- Textseiten */

.metin { max-width: 68ch; }
.metin h2 { margin-top: var(--a6); }
.metin h3 { margin-top: var(--a5); }
.metin ul, .metin ol { padding-left: 1.2rem; margin-bottom: var(--a4); }
.metin li { margin-bottom: var(--a2); }
.metin blockquote {
  margin: var(--a5) 0; padding: var(--a3) var(--a4);
  border-left: 3px solid var(--yesil-300);
  background: var(--yesil-50); border-radius: 0 var(--yuvarlak-s) var(--yuvarlak-s) 0;
  color: var(--yazi-orta);
}
.metin blockquote p:last-child { margin-bottom: 0; }

.oz {
  font-size: 1.08rem; color: var(--yazi-orta);
  border-left: 3px solid var(--yesil-300); padding-left: var(--a4);
  margin-bottom: var(--a6);
}

/* Fragen und Antworten */
.sss details {
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-s); margin-bottom: var(--a2);
}
.sss summary {
  padding: var(--a3) var(--a4); cursor: pointer; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: var(--a3);
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: "+"; font-weight: 400; font-size: 1.3rem; line-height: 1;
  color: var(--yazi-soluk); flex: none;
}
.sss details[open] summary::after { content: "−"; }
.sss details[open] summary { border-bottom: 1px solid var(--cizgi-acik); }
.sss .cevap { padding: var(--a4); color: var(--yazi-orta); }
.sss .cevap p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Kıble */

.kible-kutu {
  display: grid; gap: var(--a5);
  grid-template-columns: minmax(0, 260px) 1fr;
  align-items: center;
}
@media (max-width: 640px) {
  .kible-kutu { grid-template-columns: 1fr; }
}
.pusula { width: 100%; max-width: 260px; margin-inline: auto; }
.pusula-gul { fill: none; stroke: var(--cizgi); stroke-width: 1.5; }
.pusula-yon { fill: var(--yazi-soluk); font-size: 11px; font-weight: 600; }
.pusula-ok { fill: var(--yesil-600); }
.pusula-ic { fill: var(--kagit); stroke: var(--cizgi); }

.olcu-listesi { display: grid; gap: var(--a3); }
.olcu {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--a3); padding-bottom: var(--a2);
  border-bottom: 1px dashed var(--cizgi);
}
.olcu dt { color: var(--yazi-orta); font-size: .9rem; }
.olcu dd {
  margin: 0; font-weight: 700; font-family: var(--yazi-rakam);
  font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}

/* Angabenliste, die bei genug Platz zweispaltig läuft – für Blöcke mit
   vielen kurzen Werten wie den Ortsdaten. */
.olcu-genis {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: var(--a6);
}

/* ------------------------------------------------------------ Tagesbogen */

.bogen { width: 100%; height: auto; }
.bogen-gece { fill: var(--zemin-alt); }
.bogen-gunduz { fill: var(--yesil-50); }
.bogen-cizgi { stroke: var(--yesil-500); stroke-width: 2; fill: none; }
.bogen-nokta { fill: var(--yesil-600); }
.bogen-simdi { fill: var(--pirinc-500); stroke: var(--kagit); stroke-width: 2; }
.bogen-yazi { fill: var(--yazi-soluk); font-size: 10px; }

/* ------------------------------------------------------------ Seitenfuss */

.alt {
  background: var(--kagit); border-top: 1px solid var(--cizgi);
  margin-top: var(--a8); padding-block: var(--a6) var(--a5);
}
.alt-ic {
  display: grid; gap: var(--a5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.alt-bolum h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--yazi-soluk); margin-bottom: var(--a3);
}
.alt-bolum ul { list-style: none; margin: 0; padding: 0; }
.alt-bolum li { margin-bottom: var(--a2); }
.alt-bolum a { color: var(--yazi-orta); text-decoration: none; font-size: .9rem; }
.alt-bolum a:hover { color: var(--vurgu); text-decoration: underline; }
.alt-metin { font-size: .9rem; color: var(--yazi-orta); }

.alt-son {
  display: flex; flex-wrap: wrap; gap: var(--a2) var(--a5);
  justify-content: space-between; align-items: baseline;
  margin-top: var(--a6); padding-top: var(--a4);
  border-top: 1px solid var(--cizgi-acik);
  font-size: .82rem; color: var(--yazi-soluk);
}
.alt-son p { margin: 0; }
.alt-uyari { max-width: 62ch; }

/* ------------------------------------------------ Dini günler ve geceler */

/* Nur auf takvim.php. Die Aufzählung ist bewusst keine Tabelle: zu jedem Tag
   gehört ein erklärender Satz, und vier Spalten Fliesstext sind auf einem
   Telefon unlesbar. Eine Liste bricht dagegen von selbst um. */

.yil-gezinti {
  display: flex; flex-wrap: wrap; gap: var(--a2);
  list-style: none; margin: 0 0 var(--a5); padding: 0;
}
.yil-gezinti a {
  display: inline-block; padding: .35rem .9rem;
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 999px;
  color: var(--yazi); text-decoration: none;
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.yil-gezinti a:hover {
  border-color: var(--yesil-300); background: var(--yesil-50); color: var(--yesil-700);
}
.yil-gezinti a[aria-current] {
  background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi);
  font-weight: 600;
}

.takvim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a3); }

.takvim-gun {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--a4);
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: var(--a4);
  box-shadow: var(--golge-1);
}
/* Vergangene Tage bleiben stehen – auf einer Jahresseite gehören sie dazu –,
   treten aber zurück, damit das Auge beim nächsten Termin hängen bleibt. */
.takvim-gun[data-gecti] { opacity: .55; }
.takvim-gun[data-bugun] { border-color: var(--yesil-300); box-shadow: var(--golge-2); }

.takvim-tarih {
  display: grid; align-content: start; justify-items: center; text-align: center;
  background: var(--zemin-alt); border-radius: var(--yuvarlak-s);
  padding: var(--a2) var(--a1);
}
.takvim-tarih .g {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-size: 1.55rem; font-weight: 700; line-height: 1.15;
}
.takvim-tarih .ay { font-size: .82rem; color: var(--yazi-orta); }
.takvim-tarih .hafta { font-size: .75rem; color: var(--yazi-soluk); }
.takvim-tarih .yil {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-size: .72rem; color: var(--yazi-soluk);
}

@media (max-width: 560px) {
  .takvim-gun { grid-template-columns: 1fr; gap: var(--a2); }
  .takvim-tarih {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
    gap: var(--a1) var(--a2); padding: .2rem .6rem;
  }
  .takvim-tarih .g { font-size: 1.05rem; }
}

.takvim-ad { margin: 0 0 var(--a2); font-size: 1.12rem; }
.takvim-ad a { color: var(--yazi); text-decoration: none; }
.takvim-ad a:hover { color: var(--vurgu); text-decoration: underline; }

.takvim-etiket {
  display: inline-block; vertical-align: middle; margin-left: var(--a2);
  padding: .05rem .5rem; border-radius: 999px;
  background: var(--pirinc-100); color: var(--pirinc-600);
  border: 1px solid var(--pirinc-300);
  font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
:root[data-tema="koyu"] .takvim-etiket {
  background: #2e2413; color: var(--pirinc-300); border-color: #57431c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .takvim-etiket {
    background: #2e2413; color: var(--pirinc-300); border-color: #57431c;
  }
}

/* Der Satz, der sagt, an welchem Abend eine Nacht begangen wird. Er ist der
   Grund für diese Seite und darf deshalb nicht wie Kleingedrucktes aussehen. */
.takvim-gece {
  margin: 0 0 var(--a2); padding-left: var(--a3);
  border-left: 3px solid var(--pirinc-300);
  font-size: .95rem; font-weight: 600;
}

.takvim-aciklama { margin: 0; color: var(--yazi-orta); font-size: .93rem; }
.takvim-suren { margin: var(--a1) 0 0; color: var(--yazi-soluk); font-size: .85rem; }

/* Der Zähler zeigt hier Tage, keine Uhrzeit – und manchmal ein Wort statt
   einer Zahl ("Bu akşam"). Als Wort braucht er die Fliesstextschrift und
   darf nicht auf Ziffernbreite aufgespannt bleiben. */
.geri-sayim.metin {
  font-family: var(--yazi-tipi);
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.1rem);
  min-width: 0;
}

/* ==========================================================================
   Nachtrag: Entwicklerseite /api

   Die API-Dokumentation ist die einzige Seite mit Quelltext im Fliesstext.
   Tabellen mit ganzen Sätzen in den Zellen stehen bereits als .veri-tablo
   weiter unten; die wird hier mitbenutzt und nicht noch einmal beschrieben.
   Neu ist nur, was es sonst nirgends gibt: der Codeblock und die Kopfzeile
   eines Endpunkts.
   ========================================================================== */

/* Feldnamen und Adressen im Fliesstext. Deckungsgleich mit .metin code weiter
   unten – eine Textseite und eine Entwicklerseite sollen denselben Bezeichner
   nicht unterschiedlich setzen –, aber ohne Bindung an .metin, weil /api mit
   Karten und Tabellen aufgebaut ist. */
code {
  font-family: var(--yazi-rakam);
  font-size: .92em;
  background: var(--zemin-alt);
  border-radius: 4px;
  padding: .1em .35em;
  /* Lange Bezeichner dürfen umbrechen, sonst schieben sie eine Tabelle über
     den Rand des Telefons hinaus. */
  overflow-wrap: anywhere;
}

.kod-blok {
  margin: 0 0 var(--a4);
  padding: var(--a4);
  font-family: var(--yazi-rakam);
  font-size: .84rem;
  line-height: 1.55;
  tab-size: 2;
  /* Der dunkle Grund bleibt in beiden Farbschemata derselbe: ein Codeblock,
     der im hellen Schema hell und im dunklen dunkel ist, verliert genau die
     Abgrenzung, für die er da ist. */
  background: var(--yesil-900);
  color: #dff0e8;
  border-radius: var(--yuvarlak-s);
  /* Eine vollständige Beispielantwort ist über hundert Zeilen lang. Ohne
     Höhenbegrenzung müsste man an ihr vorbeiscrollen, um weiterzulesen. */
  max-height: 26rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.kod-blok code {
  background: none; border: 0; padding: 0;
  color: inherit; font-size: inherit;
  overflow-wrap: normal;
}

/* Kopfzeile eines Endpunkts: Verfahren und Pfad in einem Blick. */
.api-uc {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--a2); margin-bottom: var(--a3);
}
.api-uc .istek-turu {
  font-family: var(--yazi-rakam); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em;
  background: var(--yesil-600); color: #fff;
  border-radius: 5px; padding: .15rem .45rem;
}
/* Nicht .yol: den Namen trägt weiter unten schon ein Block der Kıble-Seite. */
.api-uc .api-yol {
  font-family: var(--yazi-rakam); font-size: 1rem; font-weight: 600;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- Drucken */

@media print {
  .ust, .alt, .izler, .dugme, .ara { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .vakit-bas { background: none !important; color: #000; box-shadow: none; padding: 0; }
  .vakit-bas h1, .vakit-tarih, .sonraki-ad { color: #000 !important; }
  .vakit { border: 1px solid #999; }
  .vakit-ad, .vakit-saat { color: #000; }
  .kart { box-shadow: none; border-color: #999; }
  .vakit-tablo th, .vakit-tablo td { border-color: #999; }
  a[href]::after { content: ""; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

/* ==========================================================================
   Kıble-Seiten – /kible-yonu und /kible-yonu-{slug}
   Nachtrag zum Bogen oben. Die Ortsseite zeigt die Rose klein neben den
   Vakit; auf der Kıble-Seite ist sie der Gegenstand der Seite und braucht
   entsprechend Platz.
   ========================================================================== */

/* Die Kopfkarte der Kıble-Seite hat keine laufende Zeit, aber dieselbe Form.
   Damit die Gradzahl dort so gross steht wie sonst der Countdown, wiederholt
   diese Klasse dessen Schriftgrad – ohne die Bedeutung "Countdown" zu erben. */
.buyuk-olcu {
  font-family: var(--yazi-rakam);
  font-size: clamp(2.1rem, 1.2rem + 4vw, 3.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.kible-buyuk { grid-template-columns: minmax(0, 340px) 1fr; }
.kible-buyuk .pusula { max-width: 340px; }
@media (max-width: 640px) {
  .kible-buyuk { grid-template-columns: 1fr; }
}

/* Die vier Wege zur Kıble auf der Erklärseite: gleichrangige Blöcke, die
   voneinander deutlicher abstehen müssen als zwei Absätze. */
.yol + .yol { margin-top: var(--a6); }
.yol .kart { margin-top: var(--a4); }

/* Nummerierte Anleitung. Die Ziffer steht im Kreis links und überspannt
   Überschrift und Text, damit beide auf einer Fluchtlinie beginnen – mit der
   Nummerierung des Browsers ginge das nicht, sie hängt am Zeilenanfang. */
.adimlar {
  list-style: none; counter-reset: adim;
  margin: 0; padding: 0;
  display: grid; gap: var(--a5);
}
.adimlar > li {
  counter-increment: adim;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  column-gap: var(--a3); row-gap: var(--a1);
  align-items: start;
}
.adimlar > li::before {
  content: counter(adim);
  grid-column: 1; grid-row: 1 / span 2;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: var(--yesil-100); color: var(--vurgu);
  border-radius: 999px;
  font-family: var(--yazi-rakam); font-weight: 700; font-size: .95rem;
}
.adimlar > li > * { grid-column: 2; margin: 0; }
.adimlar h3, .adimlar h4 { font-size: 1rem; }
.adimlar p { color: var(--yazi-orta); }

/* Der Gerätekompass. Er ist im Markup versteckt und wird erst vom Skript
   gezeigt, deshalb steht hier nichts, was ihn ohne Skript sichtbar machte. */
.canli-pusula { margin-top: var(--a4); text-align: center; }
.canli-gul {
  display: block; max-width: 300px; margin-inline: auto;
  /* Der Sensor springt um Zehntelgrade; ohne die kurze Überblendung zittert
     die Rose sichtbar. Bei "reduzierte Bewegung" hebt die Regel ganz oben
     diese Dauer wieder auf. */
  transition: transform .12s linear;
}
.canli-gul .pusula { max-width: 100%; }
.canli-durum {
  margin-top: var(--a3); color: var(--yazi-orta); font-size: .92rem;
  /* Feste Mindesthöhe, sonst hüpft die Karte, sobald der Satz zweizeilig wird. */
  min-height: 3.2em;
}

@media print {
  .canli-pusula, [data-pusula-baslat] { display: none !important; }
}

/* ==========================================================================
   Monatsseite – aylik.php
   Nachtrag zum Stilbogen. Alles hier dient der Tabelle über einen ganzen
   Monat; das Übrige der Seite kommt mit den vorhandenen Klassen aus.
   ========================================================================== */

/* Die Zeilenköpfe der Tabellen sind <th scope="row">, damit jede Zeile einen
   Namen hat, den ein Vorleseprogramm nennen kann. Die vorhandenen
   Hervorhebungen greifen nur auf td und liefen deshalb ins Leere. */
.vakit-tablo tr[data-bugun] > :first-child { box-shadow: inset 3px 0 0 var(--vurgu); }
.vakit-tablo tr[data-cuma] > :first-child { color: var(--yesil-600); }
:root[data-tema="koyu"] .vakit-tablo tr[data-cuma] > :first-child { color: var(--yesil-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .vakit-tablo tr[data-cuma] > :first-child { color: var(--yesil-300); }
}

/* Erste Spalte: Tageszahl, Wochentag und gegebenenfalls der religiöse Tag.
   Als Flexzeile, damit der Hinweis auf schmalen Geräten unter das Datum
   rutscht, statt die ganze Tabelle in die Breite zu ziehen. */
.gun-hucre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.gun-no {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.gun-ad { font-size: .82rem; color: var(--yazi-soluk); }

/* Kennzeichnung religiöser Tage. Die Nacht davor bekommt die ruhigere
   Fassung: sie ist der Abend, an dem man in die Moschee geht, aber nicht der
   Tag selbst – der Unterschied muss sichtbar bleiben. */
.dini-im {
  display: inline-block; padding: 0 .45rem; border-radius: 999px;
  background: var(--uyari-zemin); color: var(--uyari-yazi);
  border: 1px solid var(--uyari-cizgi);
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.dini-im.gece {
  background: none; color: var(--yazi-soluk);
  border-color: var(--cizgi); border-style: dashed; font-weight: 500;
}

/* Die hicrî Spalte trägt Text, keine Uhrzeit – deshalb ohne Ziffernschrift.
   Der Selektor ist eine Stufe genauer als der für die übrigen Zellen. */
.vakit-tablo tbody td.hicri-hucre {
  font-family: var(--yazi-tipi); font-size: .85rem; color: var(--yazi-orta);
  white-space: normal;
}
.hicri-hucre .ay-adi { color: var(--yazi-soluk); }

/* Über dem Vakit-Streifen der Monatsseite steht, welcher Tag gezeigt wird. */
.vakit-bas .gun-etiket { margin-top: var(--a5); }
.vakit-bas .gun-etiket + .vakitler { margin-top: var(--a2); }

/* Blättern zwischen den Monaten: einer nach links, einer nach rechts. Der
   leere <span> hält den Folgemonat rechts, wenn es keinen Vormonat gibt. */
.ay-gezinti {
  display: flex; flex-wrap: wrap; gap: var(--a3);
  justify-content: space-between; margin-top: var(--a4);
}

/* Der angezeigte Monat in der Monatswahl. */
.yer-izgara a[aria-current] {
  border-color: var(--yesil-500); background: var(--yesil-50);
  color: var(--vurgu); font-weight: 600;
}

/* Auf Papier gehören Bedienelemente nicht aufs Blatt. */
@media print {
  .basma-yok { display: none !important; }
}

/* ------------------------------------------------------------- Startseite */

/* Die Startseite kommt fast vollständig mit dem Bestand aus – .vakit-bas,
   .sehir-izgara, .vakit-tablo, .sss. Neu ist nur, was es sonst nirgends gibt:
   das grosse Suchfeld im Kopf, der Hinweis auf den nächsten religiösen Tag
   und die zwei Uhrzeiten je Stadtkarte. */

.giris-bas .vakit-tarih { margin-bottom: var(--a4); }

.giris-oz {
  color: rgba(255, 255, 255, .85);
  max-width: 56ch;
  margin-bottom: 0;
}

/* Der Hinweis auf Kandil, Bayram oder Arefe. Er sitzt auf dem grünen Verlauf,
   deshalb sind seine Farben fest und nicht aus den Themenwerten genommen. */
.gun-rozet {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--a1) var(--a2);
  margin-bottom: var(--a4);
  padding: .4rem .9rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  /* Kein Pillenradius: der Text ist mal drei Wörter lang und mal drei Zeilen,
     und ein halbrunder Rand um einen Absatz sieht wie ein Versehen aus. */
  border-radius: var(--yuvarlak);
  font-size: .9rem;
}
.gun-rozet strong { color: var(--pirinc-300); }
/* Zwei Elemente im Selektor, damit die Regel die Linkfarbe des dunklen
   Schemas überschreibt – auf dem grünen Grund wäre Grün unlesbar. */
.vakit-bas .gun-rozet a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}

.giris-ara {
  display: flex; flex-wrap: wrap; gap: var(--a2);
  margin-top: var(--a5);
  max-width: 34rem;
}
.giris-ara input {
  flex: 1 1 15rem; min-width: 0;
  padding: .8rem 1.1rem;
  font: inherit; font-size: 1rem;
  color: var(--yesil-900);
  background: rgba(255, 255, 255, .95);
  border: 1px solid transparent;
  border-radius: 999px;
}
.giris-ara input::placeholder { color: #6f7d75; }
.giris-ara input:focus { background: #fff; }
.giris-ara button {
  flex: none;
  padding: .8rem 1.4rem;
  font: inherit; font-weight: 600;
  color: var(--yesil-900); background: var(--pirinc-300);
  border: 0; border-radius: 999px; cursor: pointer;
}
.giris-ara button:hover { background: #fff; }

/* Der Knopf ist ohne JavaScript nutzlos und startet deshalb verborgen. Die
   eigene display-Regel würde das hidden-Attribut aushebeln, also hier
   ausdrücklich wieder ausschalten. */
.giris-konum {
  display: inline-flex; align-items: center; gap: var(--a2);
  margin-top: var(--a3); padding: .3rem 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .9rem;
  color: rgba(255, 255, 255, .85);
  text-decoration: underline; text-underline-offset: 3px;
}
.giris-konum:hover { color: #fff; }
.giris-konum svg { width: 16px; height: 16px; flex: none; }
.giris-konum[hidden] { display: none; }

/* İmsak und Akşam nebeneinander in der Stadtkarte: die beiden Zeiten, nach
   denen tatsächlich gesucht wird. */
.kart-saatler {
  display: flex; gap: var(--a5);
  margin: var(--a2) 0 0;
}
.kart-saatler dt {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--yazi-soluk);
}
.kart-saatler dd {
  margin: 0;
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 700; line-height: 1.2;
  color: var(--yesil-600);
}
:root[data-tema="koyu"] .kart-saatler dd { color: var(--yesil-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) .kart-saatler dd { color: var(--yesil-300); }
}

/* In der Städtetabelle der Startseite steht in der ersten Spalte ein Link;
   er soll wie die übrige Zeile aussehen, nicht wie ein Fremdkörper. */
.vakit-tablo th[scope="row"] a { color: inherit; text-decoration: none; }
.vakit-tablo th[scope="row"] a:hover { text-decoration: underline; }

/* Beim Drucken verliert .vakit-bas seinen grünen Grund. Die hellen Schriften
   darauf müssen mitziehen, sonst steht auf dem Papier Weiss auf Weiss. Such-
   feld und Standortknopf entfallen, wie oben schon die Kopfleistensuche. */
@media print {
  .giris-oz, .gun-rozet, .vakit-bas .gun-rozet a { color: #000; }
  .gun-rozet { background: none; border-color: #999; }
  .giris-ara, .giris-konum { display: none; }
}

/* ==========================================================================
   Nachtrag: die Seiten über die Seite selbst
   /nasil-hesaplaniyor, /hakkimizda und die Fehlerseite erklären, statt zu
   rechnen. Sie brauchen zweierlei, das oben fehlt: Tabellen, in deren Zellen
   ganze Sätze stehen dürfen, und ein Suchfeld ausserhalb der Kopfleiste.
   ========================================================================== */

/* Wie .vakit-tablo, aber linksbündig und mit Umbruch. Die Vakit-Tabelle setzt
   white-space: nowrap, weil dort nur Uhrzeiten stehen; eine Spalte mit
   Erklärungen würde damit weit über jedes Telefon hinauswachsen. */
table.veri-tablo {
  width: 100%; border-collapse: collapse; font-size: .93rem;
  background: var(--kagit);
}
.veri-tablo caption {
  caption-side: top; text-align: left; padding-bottom: var(--a3);
  color: var(--yazi-orta); font-size: .9rem;
}
.veri-tablo th, .veri-tablo td {
  padding: .6rem .7rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--cizgi-acik);
}
.veri-tablo thead th {
  background: var(--zemin-alt); color: var(--yazi-orta);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; white-space: nowrap;
}
.veri-tablo tbody th { font-weight: 600; white-space: nowrap; }
.veri-tablo tbody tr:hover { background: var(--yesil-50); }

/* Zahlenspalten in Ziffernschrift, damit die Werte untereinander fluchten. */
.veri-tablo .sayi {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Formelzeichen im Fliesstext – auf /nasil-hesaplaniyor steht eine Gleichung. */
.metin code {
  font-family: var(--yazi-rakam); font-size: .92em;
  background: var(--zemin-alt); border-radius: 4px; padding: .1em .35em;
}

/* --------------------------------------------------------- Fehlerseite */

.hata { max-width: 44rem; margin-inline: auto; text-align: center; }
/* Die Zahl trägt --vurgu und nicht einen festen Grünton: nur so bleibt sie in
   beiden Farbschemata lesbar, hell auf dunkel und dunkel auf hell. */
.hata-kod {
  font-family: var(--yazi-rakam); font-size: 3.4rem; font-weight: 700;
  line-height: 1; color: var(--vurgu); letter-spacing: -.03em;
  margin-bottom: var(--a3);
}
.hata p { color: var(--yazi-orta); }
/* Die Listen darunter tragen keinen eigenen Abstand nach unten, deshalb
   bekommt die nächste Überschrift ihn. */
.hata h2 { margin-top: var(--a7); }

/* Das Suchfeld der Fehlerseite. Es trägt bewusst nicht .ara: jene Klasse
   gehört der Kopfleiste, und das Skript hängt die Sofortsuche an das erste
   .ara im Dokument – das bleibt das obere. */
.hata-ara {
  display: flex; gap: var(--a2); margin-block: var(--a5) var(--a6);
  text-align: left;
}
.hata-ara input {
  flex: 1 1 auto; min-width: 0;
  padding: .7rem 1.1rem; font-size: 1rem;
  background: var(--kagit); color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: 999px;
}
.hata-ara input::placeholder { color: var(--yazi-soluk); }
.hata-ara input:focus { border-color: var(--yesil-500); }

/* Die Ortsliste darunter steht in .yer-izgara, die Zeilen bleiben aber
   linksbündig – zentrierter Text in Kästchen liest sich unruhig. */
.hata .yer-izgara, .hata .sehir-izgara { text-align: left; }

/* ==========================================================================
   Nachtrag: die Rechtsseiten
   /gizlilik-politikasi und /kullanim-sartlari kommen mit .metin, .kart und
   .veri-tablo aus. Eine einzige Regel fehlt oben.
   ========================================================================== */

/* .veri-tablo setzt die Zeilenköpfe auf nowrap, weil dort sonst Kurzbegriffe
   stehen. In der Übersicht der verarbeiteten Daten heisst eine Zeile aber
   "Tarayıcı ve işletim sistemi bilgisi" – ohne Umbruch wüchse die Tabelle auf
   das Doppelte der nötigen Breite und liesse sich auf dem Telefon nur noch
   schieben. Die Mindestbreite verhindert dabei den anderen Fehler: eine Spalte,
   die auf ein Wort je Zeile zusammenfällt. */
.veri-tablo-metin tbody th {
  white-space: normal;
  min-width: 9rem;
}

/* ==========================================================================
   Nachtrag: die Ramazan-Seiten – imsakiye.php
   Die İmsakiye ist die einzige Tabelle des Hauses, die ausgedruckt und einen
   Monat lang in die Küche gehängt wird. Daher der Druckblock am Ende dieses
   Abschnitts; alles Übrige der Seite kommt mit dem Bestand aus.
   ========================================================================== */

/* Zellen, in denen Wörter stehen statt Uhrzeiten: Datum, Wochentag, Kandilname.
   Die Ziffernschrift von .vakit-tablo passt dort nicht, und der erlaubte
   Umbruch lässt die Tabelle auf dem Telefon schmaler werden, statt sie mit
   einem langen Namen in die Breite zu ziehen. */
.vakit-tablo tbody td.yazi-hucre {
  font-family: var(--yazi-tipi);
  font-variant-numeric: normal;
  white-space: normal;
}

/* In den Ramazan-Tabellen hängt unter dem Datum der Wochentag und unter der
   Jahreszahl das hicrî Jahr. Als Block, sonst verschmelzen beide Angaben zu
   einer Zeile, die sich nicht mehr lesen lässt. */
.ramazan-tablo small {
  display: block;
  font-family: var(--yazi-tipi);
  font-size: .78rem; font-weight: 400; color: var(--yazi-soluk);
}

/* Kadir Gecesi und die Arefe in der İmsakiye. Messing statt Grün, damit die
   Zeile nicht mit der Markierung des heutigen Tages verwechselt wird.
   color-mix statt --pirinc-100, weil jener Wert nur im hellen Schema
   definiert ist und die Zeile im dunklen sonst weiss aufleuchtet. */
.vakit-tablo tr[data-ozel] {
  background: color-mix(in srgb, var(--pirinc-500) 12%, var(--kagit));
}
.vakit-tablo tr[data-ozel] > :first-child {
  box-shadow: inset 3px 0 0 var(--pirinc-500);
}

/* Der Kopf der İmsakiye zeigt vier Werte statt der sechs Vakit: Sahur, İftar,
   Teravih und die Fastendauer. */
.vakitler-dort { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .vakitler-dort { grid-template-columns: repeat(2, 1fr); }
}

/* Die Fastendauer steht als "13 sa 45 dk" und ist damit dreimal so breit wie
   eine Uhrzeit; in der Grösse von .vakit-saat bräche sie auf dem Telefon um. */
.vakit-sure {
  font-family: var(--yazi-rakam); font-variant-numeric: tabular-nums;
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em;
}

/* Dreissig Zeilen passen auf kein Blatt: ohne display: table-header-group
   wiederholt kein Browser den Tabellenkopf auf der zweiten Seite. Die farbigen
   Hervorhebungen entfallen – der Ausdruck hängt einen Monat an der Wand, "heute"
   stimmt also schon am nächsten Morgen nicht mehr; die Fettschrift bleibt. */
@media print {
  .ramazan-tablo thead { display: table-header-group; }
  .vakit-tablo thead th { position: static; background: none; color: #000; }
  .vakit-tablo tr[data-bugun], .vakit-tablo tr[data-ozel] { background: none; }
  .vakit-tablo tr[data-bugun] > :first-child,
  .vakit-tablo tr[data-ozel] > :first-child { box-shadow: none; }
  .dini-im { background: none; border-color: #999; color: #000; }
  .vakit-sure { color: #000; }
}

/* ==========================================================================
   Ergänzungen für die Übersichtsseiten: /iller, /bolge/{slug} und /ara
   Eigener Abschnitt am Dateiende, damit beim Nachlesen sichtbar bleibt, was
   zu den Listenseiten gehört und was zum ursprünglichen Bestand.
   ========================================================================== */

/* Sprungleiste über der Länderliste. Die Anfangsbuchstaben sind auf dem
   Telefon die einzige Möglichkeit, nicht durch 81 Zeilen zu wischen. */
.harf-serit {
  display: flex; flex-wrap: wrap; gap: var(--a1);
  margin-bottom: var(--a4);
}
.harf-serit a {
  min-width: 2.1rem; padding: .3rem .5rem;
  text-align: center; font-weight: 600; font-size: .9rem;
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak-s);
  color: var(--yazi); text-decoration: none;
}
/* Die Schriftfarbe kommt aus --vurgu und nicht fest aus --yesil-700: im
   dunklen Schema stünde sonst dunkles Grün auf dunklem Grund. */
.harf-serit a:hover {
  border-color: var(--yesil-300); background: var(--yesil-50); color: var(--vurgu);
}

/* Listentabellen mit Ortsnamen erweitern .vakit-tablo um eine eigene Klasse,
   damit diese Regeln die Ortsseite nicht mitverändern. */
.il-tablo th small {
  display: block; font-weight: 400; font-size: .78rem;
  color: var(--yazi-soluk);
}

/* Buchstabentrenner. Er ist zugleich Sprungziel; der Abstand nach oben hält
   ihn unter dem klebenden Seitenkopf frei, sonst verschwindet die Zeile beim
   Anspringen darunter. */
.il-tablo .harf-satir th {
  background: var(--zemin-alt);
  font-size: 1.05rem; font-weight: 700;
  scroll-margin-top: 8rem;
}

/* Die Differenzzeile der West-Ost-Gegenüberstellung. */
.il-tablo tfoot th, .il-tablo tfoot td {
  background: var(--zemin-alt); font-weight: 700; border-bottom: 0;
}

/* Suchfeld im Seiteninhalt. Das Feld im Seitenkopf ist auf Kopfzeilenhöhe
   gebaut und sitzt in einem Flexstreifen; im Fliesstext braucht es eine
   eigene, grössere Fassung. */
.ara-kutu {
  display: flex; gap: var(--a2); align-items: stretch;
  margin-bottom: var(--a6); max-width: 34rem;
}
.ara-kutu input {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem 1rem; font: inherit; font-size: 1rem;
  color: var(--yazi); background: var(--kagit);
  border: 1px solid var(--cizgi); border-radius: 999px;
}
.ara-kutu input::placeholder { color: var(--yazi-soluk); }
.ara-kutu input:focus { border-color: var(--yesil-500); }

@media print {
  .harf-serit, .ara-kutu { display: none !important; }
}


/* ---------------------------------------------- Nachtrag: die Rehber-Seiten

   Die Artikelkarte trägt mehr als eine Stadtkarte: Etikett, Titel und einen
   ganzen Satz Zusammenfassung. .sehir-kart ist dafür zu eng gebaut (ihre
   .alt-satir ist eine Flexzeile für zwei kurze Werte), deshalb eine eigene,
   schmale Ergänzung statt einer Überschreibung. */

.yazi-izgara {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.yazi-kart {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--a2);
  padding: var(--a4);
  background: var(--kagit); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); text-decoration: none; color: var(--yazi);
  box-shadow: var(--golge-1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.yazi-kart:hover {
  transform: translateY(-2px); box-shadow: var(--golge-2);
  border-color: var(--yesil-300); color: var(--yazi);
}
.yazi-kart .ad { font-weight: 600; line-height: 1.3; }
/* Die Zusammenfassung ist ein ganzer Satz und muss umbrechen dürfen; .alt-metin
   allein regelt nur Farbe und Schriftgrad. */
.yazi-kart .alt-metin { font-size: .88rem; line-height: 1.5; }
/* Schiebt die Zeile mit Lesedauer an den unteren Rand, damit die Karten einer
   Reihe unten bündig abschliessen, auch wenn die Titel verschieden lang sind. */
.yazi-kart .yazi-kunye { margin-top: auto; padding-top: var(--a2); }

/* Kopfzeile eines Artikels: Etikett, Lesedauer, Änderungsdatum nebeneinander.
   Als Flexzeile, damit sie auf dem Telefon umbricht statt zu überlaufen. */
.yazi-kunye {
  display: flex; flex-wrap: wrap; gap: var(--a2) var(--a3);
  align-items: center;
  margin-bottom: var(--a4);
  color: var(--yazi-soluk); font-size: .85rem;
}
.yazi-kunye .takvim-etiket { margin: 0; }

/* ==========================================================================
   Nachtrag: die Artikelseite – makale.php, /rehber/{slug}

   Die Übersicht /rehber kommt mit .sehir-izgara und .sehir-kart aus. Der
   Artikel selbst braucht dreierlei, das oben fehlt: ein Inhaltsverzeichnis,
   Sprungziele, die nicht unter der klebenden Kopfleiste verschwinden, und
   Tabellen, in deren Zellen Sätze stehen statt Uhrzeiten.
   ========================================================================== */

/* Das Inhaltsverzeichnis über dem Text. Bei acht Abschnitten ist es die
   einzige Möglichkeit, den gesuchten Abschnitt zu finden, ohne durch den
   ganzen Artikel zu wischen. Die Breite folgt .metin, damit Verzeichnis und
   Text auf derselben Fluchtlinie enden. */
.icindekiler {
  max-width: 68ch;
  margin-bottom: var(--a6);
  padding: var(--a4) var(--a5);
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge-1);
}

/* Wie die Überschriften im Seitenfuss: es ist eine echte Überschrift in der
   Gliederung, soll aber nicht mit den Abschnittsüberschriften konkurrieren. */
.icindekiler h2 {
  margin-bottom: var(--a3);
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--yazi-soluk);
}
.icindekiler ol { margin: 0; padding-left: 1.4rem; }
.icindekiler li { margin-bottom: var(--a2); }
.icindekiler li:last-child { margin-bottom: 0; }
.icindekiler a { color: var(--yazi); text-decoration: none; }
.icindekiler a:hover { color: var(--vurgu); text-decoration: underline; }

/* Der Abstand hält die angesprungene Überschrift unter der klebenden
   Kopfleiste frei; ohne ihn landet sie dahinter und der Leser sieht mitten im
   Absatz zu beginnen. Derselbe Wert wie bei den Buchstabentrennern in
   .il-tablo. */
.metin h2[id] { scroll-margin-top: 8rem; }

/* Auf Papier ist ein Verzeichnis aus Sprungmarken nutzlos. */
@media print {
  .icindekiler { display: none !important; }
}

/* --------------------------------------------- Tabellen im Artikeltext */

/* .vakit-tablo ist für Uhrzeiten gebaut: mittig, Ziffernschrift, kein
   Umbruch. Im Artikeltext stehen in denselben Zellen ganze Sätze, und die
   wüchsen damit weit über jedes Telefon hinaus. Der Selektor greift nur
   innerhalb einer Textspalte; die Zeitentabellen der Ortsseiten stehen
   ausserhalb von .metin und bleiben unberührt. */
.metin .vakit-tablo th,
.metin .vakit-tablo td {
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

/* Zeilenköpfe tragen hier Begriffe, keine Werte – die Ziffernschrift der
   Datenzellen passt dazu nicht. */
.metin .vakit-tablo tbody td {
  font-family: var(--yazi-tipi);
  font-variant-numeric: normal;
}
.metin .vakit-tablo tbody th { font-weight: 600; }

/* Der klebende Tabellenkopf gehört zu Tabellen, an denen man scrollt. Mitten
   im Fliesstext bliebe er beim Weiterlesen unter der Kopfleiste hängen. */
.metin .vakit-tablo thead th {
  position: static;
  white-space: nowrap;
}