/* Haber Kudüs — shared tokens and the mahya world.
   CMS: every text font reads var(--devlo-font, …) first, so a font the client
   picks in «الخطوط» reaches the whole page (SiteFont contract); nothing else changed.
   Night is the sky the mahya hangs in; day is the page it is read on. */

:root{
  /* night: the sky between the minarets */
  --gece:#0f1838;
  --gece-0:#0a1230;
  --gece-2:#16214a;
  --gece-3:#202d5e;
  --gece-text:#eef0f7;
  --gece-muted:#aab2cf;
  --gece-line:rgba(170,184,230,.18);
  --gece-rig:#7d8fca;

  /* light: olive-oil flame, and the two domes the Ü carries */
  --kandil:#ffc15e;
  --kandil-2:#f3a23a;
  --kandil-soft:rgba(255,184,77,.32);
  --kubbe:#ffcf4a;
  --kursun:#dfe6f2;

  /* day: the page */
  --gun:#f4f6fa;
  --kagit:#ffffff;
  --ink:#0f1838;
  --ink-2:#38415f;
  --muted:#596180;
  --line:#d8dce7;
  --line-2:#bfc6d8;
  --kirmizi:#cf1f2b;
  --kehribar:#8a5200;

  --f-head:"Sofia Sans Condensed","Sofia Sans","Arial Narrow",sans-serif;
  --f-text:"Sofia Sans",system-ui,sans-serif;
  --f-num:"Sofia Sans Extra Condensed","Sofia Sans Condensed",sans-serif;

  --wrap:1320px;
  --gutter:32px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms;
  --t-mid:320ms;

  color-scheme:light;
}

/* the reader turned the lights on: the whole page becomes night */
:root[data-theme="dark"]{
  --gun:#0a1230;
  --kagit:#111a3d;
  --ink:#eef0f7;
  --ink-2:#cdd2e6;
  --muted:#a3abc8;
  --line:rgba(170,184,230,.16);
  --line-2:rgba(170,184,230,.28);
  --kirmizi:#ff6d72;
  --kehribar:#ffc15e;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{--devlo-theme-font:var(--f-text);margin:0;background:var(--gun);color:var(--ink);font:400 17.5px/1.6 var(--devlo-font, var(--f-text));
  font-feature-settings:"kern","liga";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
a:where(:not(.plain)):hover{text-decoration:underline;text-decoration-color:var(--kandil-2);text-decoration-thickness:2px;text-underline-offset:.22em}
time,.num{font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--kandil);color:#0f1838}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--kandil-soft);border-radius:1px}
.gok :focus-visible,.gece :focus-visible{outline-color:var(--kandil)}
html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--gun);border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--kandil);color:#0f1838;padding:10px 16px;font-weight:700}
.skip:focus{top:12px}

/* ---------- the mahya ---------- */
.mahya{overflow:visible;height:auto}
.mahya__rope{stroke:currentColor;stroke-width:.13;fill:none;opacity:.42}
.mahya__threads{stroke:currentColor;stroke-width:.05;fill:none;opacity:.2}
.mahya--night{color:var(--gece-rig)}
.mahya--day,.mahya--mono{color:var(--ink)}
.mahya--day .mahya__lamps circle,.mahya--mono .mahya__lamps circle{fill:currentColor}
.mahya--day .mahya__threads{opacity:.16;stroke-width:.04}
.mahya--mono .mahya__rig{display:none}
/* at night the day's ink numerals are lamps too */
:root[data-theme="dark"] .mahya--mono .mahya__lamps circle{fill:var(--kandil)}
:root[data-theme="dark"] .mahya--mono{filter:drop-shadow(0 0 2px rgba(255,170,60,.75)) drop-shadow(0 0 6px rgba(255,150,40,.35))}

/* before the mahyacı lights it: dark glass on its thread */
.mahya.is-armed .mahya__lamps circle{opacity:.16;transition:opacity 220ms var(--ease-out)}
.mahya.is-armed .mahya__halos circle{opacity:0;transition:opacity 420ms var(--ease-out)}
.mahya.is-armed.is-lit .mahya__lamps circle,
.mahya.is-armed.is-lit .mahya__halos circle{opacity:1;transition-delay:calc(var(--i) * var(--step, 8ms))}
.mahya .titrek{animation:titrek 5s steps(1,end) infinite}
@keyframes titrek{0%,100%{opacity:1}46%{opacity:1}48%{opacity:.62}50%{opacity:.96}53%{opacity:.74}56%{opacity:1}}

/* ---------- minarets ---------- */
.minare{position:absolute;bottom:0;width:34px;height:auto;color:var(--gece-rig);pointer-events:none}
.minare__body{fill:none;stroke:currentColor;stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
.minare__shade{fill:currentColor;opacity:.08}
.minare__lamp{fill:var(--kandil)}
.minare__glow{fill:var(--kandil);opacity:.18}

/* ---------- lamp marks (freshness is light) ---------- */
.lamp{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none;vertical-align:middle;
  background:radial-gradient(circle at 42% 38%,#fffbe9 0 18%,#ffd27a 55%,#f3a23a 100%);
  box-shadow:0 0 0 3px rgba(255,184,77,.16),0 0 10px 2px rgba(255,170,60,.45)}
.lamp--dim{background:var(--kandil);opacity:.55;box-shadow:none}
.lamp--off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.lamp--red{background:radial-gradient(circle at 42% 38%,#ffe9e9 0 16%,#ff5a5f 55%,#c8141f 100%);box-shadow:0 0 0 3px rgba(255,80,90,.16),0 0 10px 2px rgba(255,60,70,.5)}
.lamp--red.is-live{animation:canli 1.6s var(--ease-in-out) infinite}
@keyframes canli{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- type ---------- */
.h-manset{font:800 clamp(40px,5.2vw,76px)/1.02 var(--devlo-font, var(--f-head));letter-spacing:-.012em;text-wrap:balance}
.h-1{font:800 clamp(30px,3.4vw,46px)/1.06 var(--devlo-font, var(--f-head));letter-spacing:-.008em;text-wrap:balance}
.h-2{font:700 clamp(23px,2.1vw,29px)/1.12 var(--devlo-font, var(--f-head));text-wrap:balance}
.h-3{font:700 20px/1.3 var(--devlo-font, var(--f-head));text-wrap:balance}
.h-4{font:700 17.5px/1.34 var(--devlo-font, var(--f-head));text-wrap:pretty}
.lede{font:400 clamp(18px,1.5vw,21px)/1.5 var(--devlo-font, var(--f-text));color:var(--ink-2);text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:500 13.5px/1.35 var(--devlo-font, var(--f-text));color:var(--muted)}
.meta .yer{font:700 13.5px/1 var(--devlo-font, var(--f-head));text-transform:uppercase;letter-spacing:.07em;color:var(--ink)}
.meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.kaynak{font:500 13.5px/1.4 var(--devlo-font, var(--f-text));color:var(--muted)}
.not{font-size:13.5px;line-height:1.5;color:var(--muted)}
.kaynak b{font-weight:700;color:var(--ink-2)}

/* section heading: the name of the section in plain type, its signature in lamps */
.bolum{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--ink)}
.bolum h2{font:800 clamp(26px,2.6vw,36px)/1 var(--devlo-font, var(--f-head));letter-spacing:-.005em}
.bolum p{font-size:15.5px;color:var(--muted);margin-top:6px}
.bolum a.tum{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 13.5px/1 var(--devlo-font, var(--f-head));text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.bolum a.tum svg{width:16px;height:16px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;
  font:700 15.5px/1 var(--devlo-font, var(--f-head));letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--gun);
  border:1px solid var(--ink);transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.btn:hover{background:transparent;color:var(--ink);text-decoration:none}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--gun)}
.btn--kandil{background:var(--kandil);color:#0f1838;border-color:var(--kandil)}
.btn--kandil:hover{background:transparent;color:var(--kandil)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- photos ---------- */
.foto{position:relative;background:var(--gece-2);overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 520ms var(--ease-out)}
.foto img.is-loaded,.no-js .foto img{opacity:1}
figcaption{font:400 13.5px/1.45 var(--devlo-font, var(--f-text));color:var(--muted);margin-top:10px}
figcaption b{font-weight:700;color:var(--ink-2)}
figcaption .arsiv{font:700 12px/1 var(--devlo-font, var(--f-head));letter-spacing:.1em;text-transform:uppercase;color:var(--kehribar);margin-inline-end:6px}

@media (max-width:760px){
  :root{--gutter:16px}
  body{font-size:17.5px}
}

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