/* Vikivadi · Kâinat Atlası (direction B). The night plate of an engraved atlas; the universes are flat pictures under glass.
   Rules: nothing soft of any kind, no glows, no gradients, no pills, no caps, no mono.
   Depth comes from line, never from softness. */

@font-face{font-family:"Fell";src:url(fonts/IMFellDoublePica-Italic.woff2) format("woff2");font-style:italic;font-display:swap}
/* Junicode is cut down to what the page sets: weights 400-600, widths 90-100 %, no ENLA (fontTools instancer) */
@font-face{font-family:"Junicode";src:url(fonts/JunicodeVF-Roman.woff2) format("woff2");font-weight:400 600;font-stretch:90% 100%;font-display:swap}
@font-face{font-family:"Junicode";src:url(fonts/JunicodeVF-Italic.woff2) format("woff2");font-weight:400 600;font-stretch:90% 100%;font-style:italic;font-display:swap}

:root{
  --zemin:#15120E;      /* plate ground, warm ink brown-black */
  --levha:#1F1A14;      /* margin column and chapter panels */
  --cizgi:#4A4032;      /* dotted boundaries, hairlines (decor only) */
  --parsomen:#EDE3CB;   /* text, window highlight, bezel */
  --parsomen-2:#B3A588; /* secondary text, labels, hatching */
  --yaldiz:#D2A84E;     /* gilt: armillary, outer rule, focus */
  --zincifre:#E0583A;   /* vermilion: the one event colour */
  --ipucu:#2A231A;      /* the ground of every transient hint (hover/focus callouts): a step lighter than the plate */
  --fell:"Fell", Georgia, serif;
  --kenar-x:24px;       /* plate frame inset */
}

*{box-sizing:border-box}
html{font:400 18px/1.65 Junicode, Georgia, serif;font-variant-numeric:oldstyle-nums;background:var(--zemin);color:var(--parsomen);
     scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;font-kerning:normal}
body{margin:0;position:relative;min-height:100vh;background:var(--zemin)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}   /* no grey-blue tap flash on phones; focus keeps its gilt ring */
p{margin:0}
:focus-visible{outline:2px solid var(--yaldiz);outline-offset:3px}
::selection{background:var(--yaldiz);color:var(--zemin)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#duyuru{top:0;left:0}   /* the live region sits at the top: placed after the page it would add a pixel of scroll */
html.kilit{overflow:hidden}

.atla{position:fixed;left:40px;top:40px;z-index:60;background:var(--parsomen);color:var(--zemin);padding:6px 12px;transform:translateY(-200%)}
.atla:focus{transform:none}

/* ------------------------------------------------------------ the cetvel: double rule inset 24px */
.cetvel{position:fixed;inset:0;z-index:40;pointer-events:none;border:var(--kenar-x) solid var(--zemin)}
.cetvel::before{content:"";position:absolute;inset:0;border:1px solid var(--yaldiz);box-shadow:inset 0 0 0 5px var(--zemin)}
.cetvel::after{content:"";position:absolute;inset:5px;border:1px solid var(--cizgi)}

/* ------------------------------------------------------------ page grid: plate (cols 1-8) + margin (9-12) */
.sayfa{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;
       grid-template-rows:112px auto;padding:48px 48px 70px;min-height:100vh}
html.acik .sayfa{opacity:0}   /* a chapter is open (and the move is over); the map recedes under the chapter's own ground (.b-ort) */

.kunye{grid-column:1/9;grid-row:1;position:relative;z-index:3}
.wordmark{margin:0;display:flex;align-items:center;gap:12px;font:italic 400 64px/1 var(--fell);color:var(--parsomen);letter-spacing:-.005em}
.wordmark svg{width:40px;height:40px;flex:none;margin-top:6px}
.wordmark span{display:block;transform:translateY(-2px)}
.slogan{margin-top:12px;font-style:italic;font-size:20px;line-height:1.3}
.mobil-anahtar{display:none}

/* ------------------------------------------------------------ the plate
   On a screen tall enough (982 px and up) the whole plate, its ebru endpaper and the note under it sit inside the
   frame and the page does not scroll. On a shorter one the universes keep the first screen and the endpaper goes
   clearly below the fold (never half under the frame's rule); the page scrolls to it. */
.levha{grid-column:1/9;grid-row:2;position:relative;margin-top:16px;min-height:calc(100vh - 70px - 176px)}
@media (min-width:768px) and (max-height:981px){ .levha{min-height:calc(max(100vh + 40px, 912px) - 176px)} }
.levha > .ebru{position:absolute;left:0;right:0;bottom:0;height:24px;background:url(ebru.webp) 0 0/auto 24px no-repeat}
.sinir{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;z-index:1;pointer-events:none}
.sinir .bolge-cizgi{fill:none;stroke:#5C5040;stroke-width:1.6;stroke-dasharray:0 4.2;stroke-linecap:round}
.sinir .kardes{stroke:var(--parsomen-2);stroke-width:1;fill:none}
.sinir .kardes-alan{stroke:transparent;stroke-width:14;fill:none;pointer-events:stroke;cursor:help}
.kardes-not{position:absolute;z-index:7;background:var(--ipucu);border:1px solid var(--yaldiz);padding:2px 8px 3px;font-style:italic;font-size:14px;line-height:1.4;color:var(--parsomen);white-space:nowrap;pointer-events:none}
.halka{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;z-index:3;pointer-events:none}

/* region names, set inside each region like constellation names */
.bolge-ad{position:absolute;margin:0;font:italic 400 22px/1.2 var(--fell);color:var(--parsomen-2);white-space:nowrap;z-index:3;pointer-events:none}
.bolge ul{list-style:none;margin:0;padding:0}

/* ------------------------------------------------------------ universes: real links; WebGL only paints under them */
.u{position:absolute;display:block;border-radius:50%;text-decoration:none;color:inherit;z-index:4;-webkit-tap-highlight-color:transparent}
.u > img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;opacity:0}
/* the ball a chapter's picture is travelling from or back into is not drawn under it (atlas.js: hideSource) */
.u.kaynak > img{visibility:hidden}
.no-gl .u.kaynak:not(.bos){box-shadow:none}
.no-gl .u > img{opacity:1}
.no-gl .u:not(.bos){box-shadow:0 0 0 1px var(--parsomen)}   /* the ring sits on the link, so the picture's saturate() leaves it alone */
.u .lbl{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:150px;
        text-align:center;font-style:italic;font-size:14px;line-height:1.2;color:var(--parsomen-2);text-wrap:balance}
/* transient hints (a ball's name and facts, the empty slot's invitation, the sister-wiki note, an index row's facts) sit on
   their own panel, a step lighter than the plate and ruled in gilt like the armillary, so they never read as the plate's
   own engraved labels. Solid fill, 1-px rule, no shadow. */
.u .tam{position:absolute;left:50%;top:calc(100% + 13px);transform:translateX(-50%);white-space:nowrap;text-align:center;
        font:italic 400 24px/1.2 var(--fell);padding:5px 11px 7px;background:var(--ipucu);border:1px solid var(--yaldiz);color:var(--parsomen);display:none;
        pointer-events:none}   /* a callout never stands between the pointer and the ball under it */
.u.bos .tam{white-space:normal;width:max-content;max-width:250px;font:italic 400 16px/1.4 Junicode, Georgia, serif;padding:5px 11px 6px}
.u .tam-ad{display:block}
.u .tam-olgu{display:block;margin-top:1px;font:italic 400 14px/1.35 Junicode, Georgia, serif;color:var(--parsomen-2)}
.kv{margin-right:-.11em}
.u.on{z-index:8}
.u.on .lbl{visibility:hidden}
.u.on .tam{display:block}
.u.on.sus .tam{display:none}
.u.on.sus .lbl{visibility:visible}
.u:focus-visible{outline:2px solid var(--yaldiz);outline-offset:3px}
.u.bos svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.levha.yakin{cursor:pointer}

/* ------------------------------------------------------------ the margin column */
.kenar{grid-column:9/13;grid-row:1/3;position:relative;z-index:3;border-left:1px solid var(--cizgi);margin-left:-12px;padding-left:23px;
       font-size:15px;line-height:1.5;align-self:stretch}
.menu{display:flex;flex-wrap:wrap;gap:0 26px;font-size:17px;line-height:1.5;padding-top:6px}
.menu a{text-decoration:none;padding:0 0 0 0}
.menu a:hover{text-decoration:underline}
.anahtar{margin-top:30px}
.anahtar em{font-style:italic;color:var(--parsomen)}
.anahtar p,.anahtar li{color:var(--parsomen-2)}
.olcek-svg{display:block;margin-top:14px;overflow:visible}
.olcek-svg circle{fill:none;stroke:var(--parsomen-2);stroke-width:1}
.olcek-svg line{stroke-width:1;shape-rendering:crispEdges}
.olcek-svg .taban{stroke:var(--cizgi)}
.olcek-svg .cetik{stroke:var(--parsomen-2)}
.olcek-svg text{fill:var(--parsomen-2);font:14px Junicode, Georgia, serif;font-variant-numeric:oldstyle-nums}
.renk-anahtar{margin-top:18px}
.renk-anahtar ul{list-style:none;margin:6px 0 6px;padding:0}
.renk-anahtar li{display:flex;align-items:center;gap:12px;min-height:37px}
.glif{display:inline-block;width:34px;height:34px;border-radius:50%;flex:none;vertical-align:middle}
.no-gl .glif{box-shadow:0 0 0 1px var(--parsomen-2);position:relative;overflow:hidden}
.no-gl .glif > img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.no-gl .u > .lbl,.no-gl .u > .tam{z-index:1}
.tur-anahtar{margin-top:12px}

.dizin-bolum{margin-top:18px;padding-top:12px;border-top:1px solid var(--cizgi)}
.dizin{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-flow:column;
       grid-template-rows:repeat(12,auto);column-gap:22px}
.dizin li{position:relative}
.dizin a{display:flex;align-items:baseline;gap:7px;padding:1px 6px;margin:0 -6px;text-decoration:none;font-stretch:90%;line-height:1.38;position:relative}
.dizin .ad{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dizin .sayi{font-variant-numeric:oldstyle-nums tabular-nums;color:var(--parsomen-2)}
.dizin a.on{background:var(--parsomen);color:var(--zemin)}
.dizin a.on .sayi{color:var(--zemin)}
/* exactly one row tall: it covers the row beneath and nothing more */
.dizin .olgu{display:none;position:absolute;left:0;top:100%;width:max-content;min-width:100%;max-width:260px;min-height:100%;z-index:9;align-items:center;
             background:var(--ipucu);border:1px solid var(--yaldiz);color:var(--parsomen);font-style:italic;font-size:14px;line-height:1.3;padding:0 8px}
.dizin a.on .olgu{display:flex}
.dizin li:nth-child(n+13) .olgu{left:auto;right:0}
.dizin li:nth-child(12) .olgu{top:auto;bottom:100%}   /* the left column's last row opens upward, never over "Liste olarak gör" */
.dizin .bos-satir .ad{font-style:italic}
.kunye-alt{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--parsomen-2);display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.kunye-alt .veri{text-align:right}
.veri-eksik{display:block}
.liste-ac{flex:none}
.liste-ac a{font-size:15px;color:var(--parsomen);white-space:nowrap}

/* ------------------------------------------------------------ the margin's pages: the list, Hakkında, Katıl, Tüzük, Günlük.
   A page takes the place of the margin's default and the map stays. The column holds still while the plate
   scrolls and the page scrolls inside it; the column ends 70 px above the viewport's foot, where the plate ends.
   The ebru belongs to the left side only (the plate's endpaper, the chapter picture's edge): never in this column. */
html.kenar-acik .kenar{position:sticky;top:48px;align-self:start;height:calc(100vh - 118px);display:flex;flex-direction:column}
html.kenar-acik .kenar-varsayilan{display:none}
.menu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--yaldiz)}
.kenar-sayfa{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:20px;font-size:16px;line-height:1.6;container-type:inline-size}
.k-ust{flex:none;display:flex;align-items:center;min-height:44px}
/* the scroll box clips at its padding edge: a 6-px inner gutter on the left (cancelled by the margin) keeps the list's
   round thumbnails and every focus ring whole while the text still starts on the column's edge */
.k-govde{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:12px 0 0 -6px;padding:0 14px 28px 6px;
         scrollbar-width:thin;scrollbar-color:var(--cizgi) transparent}
.k-baslik{margin:0 0 12px;font:italic 400 clamp(32px,10.5cqi,46px)/1.12 var(--fell);color:var(--parsomen);letter-spacing:-.005em;text-wrap:balance}
.k-baslik.uzun{font-size:clamp(28px,8.4cqi,40px)}
.k-baslik:focus{outline:none}
.k-giris{text-wrap:pretty}
.k-metin p{text-wrap:pretty}
.k-metin p + p{margin-top:10px}
.k-metin h3{margin:22px 0 4px;font:italic 400 24px/1.2 var(--fell);color:var(--parsomen)}
.gunluk{list-style:none;margin:4px 0 0;padding:0}
.gunluk li{display:grid;grid-template-columns:8.2em 1fr;gap:14px;padding:8px 0;border-top:1px solid var(--cizgi)}
.gunluk time{color:var(--parsomen-2);font-variant-numeric:oldstyle-nums tabular-nums}
@container (max-width:330px){ .gunluk li{grid-template-columns:1fr;gap:0} }
/* the day plate: Tüzük and long reading only (directions.md §4.3: zemin F1E8D2, mürekkep 1E1912, mürekkep-2 5A4E3C,
   zincifre A3301A for the rubrics) */
.kenar-sayfa.gunduz .k-govde{margin-left:0;background:#F1E8D2;color:#1E1912;padding:18px 20px 32px;scrollbar-color:#B3A588 transparent}
.kenar-sayfa.gunduz .k-baslik{color:#1E1912}
.kenar-sayfa.gunduz :focus-visible{outline-color:#1E1912}
.kenar-sayfa.gunduz ::selection{background:#1E1912;color:#F1E8D2}

/* the charter, set like a printed statute: each article ruled off, its heading ("Madde 1" rubricated in vermilion,
   then the article's name), and its numbered paragraphs with the numbers hanging in the margin so the text keeps
   one left edge. Line length held near 62 characters. */
.tz{max-width:62ch}
/* the plate is as wide as the margin; on a wide one the measure stands in its middle, the title on the text's own left edge */
.tz-olcu{max-width:62ch;margin:0 auto}
.tz p{text-wrap:pretty}
.tz-taslak{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 14px;margin:2px 0 16px;padding:7px 12px 8px;
           border:1px solid #A3301A;color:#A3301A;font-size:15px;line-height:1.45}
.tz-taslak strong{font-weight:600}
.tz-taslak time{white-space:nowrap}
.tz-madde{margin-top:20px;padding-top:13px;border-top:1px solid #CFC2A2}
.tz-madde h3{margin:0 0 7px;font:italic 400 23px/1.2 var(--fell);color:#1E1912;letter-spacing:-.005em;text-wrap:balance}
.tz-no{color:#A3301A;font:italic 400 18px/1 Junicode, Georgia, serif;font-variant-numeric:lining-nums}   /* lining: an old-style 1 reads as a dotless ı */
.tz-fikra{position:relative;padding-left:1.95em}
.tz-fikra + .tz-fikra{margin-top:7px}
.tz-f{position:absolute;left:0;top:0;color:#5A4E3C;font-variant-numeric:lining-nums tabular-nums}
/* a phone's narrow sheet: the numbers come back into the line rather than eat a fifth of it */
@container (max-width:330px){ .tz-fikra{padding-left:0} .tz-f{position:static} }

/* the list: a gazetteer, one ruled row per universe; hovering a row lights its ball on the map */
.liste-sirala{color:var(--parsomen-2);font-size:15px;line-height:1.5;margin-bottom:12px}
.liste-sirala button{background:none;border:0;padding:0 2px;margin-right:8px;cursor:pointer;color:var(--parsomen-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.liste-sirala button[aria-pressed="true"]{color:var(--parsomen);text-decoration:none}
.liste{width:100%;border-collapse:collapse}
.liste thead th{font-weight:400;font-style:italic;font-size:14px;text-align:left;color:var(--parsomen-2);padding:2px 0 6px;border-bottom:1px solid var(--cizgi)}
.liste tbody th{font-weight:400;text-align:left;padding:8px 12px 9px 0;border-bottom:1px solid var(--cizgi);vertical-align:top}
.liste td{padding:8px 0 9px;border-bottom:1px solid var(--cizgi);vertical-align:top;line-height:26px}
.liste .sag{text-align:right;font-variant-numeric:oldstyle-nums tabular-nums;white-space:nowrap}
.liste a{display:flex;align-items:flex-start;gap:10px;text-decoration:none}
/* the thumbnail's rule is its own border (inside its 26 px), so nothing of it can fall outside the scroll box */
.l-kure{flex:none;width:26px;height:26px;border-radius:50%;overflow:hidden;border:1px solid var(--parsomen-2)}
.l-kure img{display:block;width:100%;height:100%;object-fit:cover}
.l-ad{line-height:1.3;padding-top:calc((26px - 1.3em) / 2)}   /* the name's first line centred on the thumbnail */
.liste a:hover .l-ad,.liste a.on .l-ad{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.liste a.on .l-kure{border-color:var(--yaldiz)}
.l-olgu{display:block;margin:3px 0 0 36px;font-style:italic;font-size:13.5px;line-height:1.4;color:var(--parsomen-2);text-wrap:pretty}

/* ------------------------------------------------------------ WebGL canvas: absolute over the page; it fades with the page */
#gl{position:absolute;left:0;top:0;z-index:2;pointer-events:none}

/* ------------------------------------------------------------ the chapter ("bölüm"): a book spread inside the plate frame.
   Left page: the universe's picture, covering the whole page. Gutter: the ebru endpaper. Right page: the text, on --levha. */
.bolum{position:fixed;inset:0;z-index:20;
       --ic:calc(var(--kenar-x) + 6px);   /* inner edge of the double rule */
       --split:58vw;                       /* where the left page ends */
       --oluk:24px}                        /* the gutter: one ebru strip wide */
.bolum[hidden]{display:none}
/* the plate's ground drawn over the map: it comes up as the map recedes (a flat layer fading, so the map itself is
   never re-composited for the move) and covers it while the chapter is open */
.b-ort{position:fixed;inset:0;background:var(--zemin);pointer-events:none}
/* the picture's window: atlas.js sets this box (inset from the viewport, round corners) from the ball's place to the
   left page's rectangle, and its overflow clips the picture */
.b-sol{position:fixed;inset:0;overflow:hidden;pointer-events:none}
/* the picture at its own pixel size; atlas.js places it with translate + scale. The small copy (-k) only shows while
   the picture is ball-sized during a move, so it is never drawn shrunk many times over */
.b-kap{position:absolute;left:0;top:0;transform-origin:0 0}
.b-kap > *{display:block;position:absolute;left:0;top:0;width:100%;height:100%;max-width:none}
.b-resim-k{opacity:0}
/* the left page's rectangle, measured by atlas.js (never painted) */
.b-pencere{position:absolute;left:var(--ic);top:var(--ic);bottom:var(--ic);width:calc(var(--split) - var(--ic));visibility:hidden;pointer-events:none}
/* the ebru strip turned upright along the gutter, like an endpaper showing at the spine */
.b-ebru{position:absolute;left:var(--split);top:var(--ic);bottom:var(--ic);width:var(--oluk);overflow:hidden}
.b-ebru::before{content:"";position:absolute;left:100%;top:0;width:100vh;height:var(--oluk);transform-origin:0 0;transform:rotate(90deg);
                background:url(ebru.webp) var(--ebru-x, 0px) 0/auto var(--oluk) repeat-x}
.b-sag{position:absolute;left:calc(var(--split) + var(--oluk));right:var(--ic);top:var(--ic);bottom:var(--ic);background:var(--levha);
       padding:26px 40px 32px;overflow-y:auto;overscroll-behavior:contain}

.b-ust{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.kapat{display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;font-size:16px;line-height:1}
.kapat-kare{width:44px;height:44px;display:block;background:var(--zemin);border:1px solid var(--parsomen)}
.kapat-kare svg{display:block;width:42px;height:42px}
.kapat:hover .kapat-yazi{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.kapat:focus-visible{outline:none}
.kapat:focus-visible .kapat-kare{outline:2px solid var(--yaldiz);outline-offset:3px}

.b-govde{max-width:62ch}
.b-baslik{display:flex;margin-top:18px}
.b-kure{width:96px;height:96px;display:block;flex:none}
.b-kure-yedek{width:96px;height:96px;flex:none;position:relative;display:block;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--parsomen)}
.b-kure-yedek > img{display:block;width:100%;height:100%;object-fit:cover}
.b-govde h1{margin:14px 0 0;font:italic 400 clamp(48px,6vw,88px)/1.2 var(--fell);color:var(--parsomen);letter-spacing:-.005em;text-wrap:balance}
.b-govde h1.uzun{font-size:clamp(40px,4vw,58px);line-height:1.14}
.b-govde h1:focus{outline:none}
.b-konu{margin-top:10px;font-style:italic;font-size:18px;text-wrap:pretty}
.olgular{width:100%;border-collapse:collapse;margin-top:18px}
.olgular th{font-weight:400;text-align:left;font-size:16px;color:var(--parsomen-2);padding:6px 16px 6px 0;white-space:nowrap;border-top:1px solid var(--cizgi);vertical-align:baseline}
.olgular td{text-align:right;font-size:18px;padding:6px 0;border-top:1px solid var(--cizgi);font-variant-numeric:oldstyle-nums tabular-nums;vertical-align:baseline}
.olgular tr:last-child th,.olgular tr:last-child td{border-bottom:1px solid var(--cizgi)}
.olgular a{text-decoration-color:var(--parsomen-2);overflow-wrap:anywhere}
.nw{white-space:nowrap}
.b-durum{margin-top:16px;line-height:1.55;text-wrap:pretty}
.b-durum p + p{margin-top:4px}
.b-durum .cagri{font-style:italic}
.eylem{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:18px}
.dugme{display:inline-flex;align-items:center;min-height:48px;padding:10px 22px;font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;
       color:var(--parsomen);background:var(--levha);border:1px solid var(--parsomen);box-shadow:inset 0 0 0 3px var(--levha),inset 0 0 0 4px var(--yaldiz);cursor:pointer}
.dugme:hover{background:var(--zemin);box-shadow:inset 0 0 0 3px var(--zemin),inset 0 0 0 4px var(--yaldiz)}
.dugme.ana{background:var(--zincifre);color:var(--zemin);border-color:var(--zincifre);box-shadow:inset 0 0 0 3px var(--zincifre),inset 0 0 0 4px var(--zemin)}
.dugme.ana:hover{background:#E8694C;border-color:#E8694C;box-shadow:inset 0 0 0 3px #E8694C,inset 0 0 0 4px var(--zemin)}
.yazi-bag{font-size:17px}
.b-not{margin-top:26px;font-size:13.5px;line-height:1.5;color:var(--parsomen-2)}
.b-not p + p{margin-top:4px}
.b-not .uyari{color:var(--parsomen)}

/* Katıl's form (in the margin): engraved fields, square and ruled, on the panel's ground. A field's name above it, a
   hint or an error under it (the error in vermilion, with the field's rule); the answer under the button, ruled in
   gilt (sent) or vermilion (not sent). Nothing rounded, nothing soft. */
.katil-form{margin-top:24px;display:grid;gap:16px;max-width:46ch;color-scheme:dark}
.alan{display:grid;gap:4px;min-width:0;scroll-margin:12px 0 44px}   /* scrolled to, it clears the frame's rule */
.alan > label{font-size:16px;line-height:1.4;color:var(--parsomen-2)}
.secimli{font-style:italic}
.alan-ipucu,.alan-hata{font-style:italic;font-size:14px;line-height:1.4;color:var(--parsomen-2);text-wrap:pretty}
.alan-hata{color:var(--zincifre)}
.katil-form input,.katil-form textarea,.katil-form select{width:100%;min-width:0;min-height:44px;font:inherit;font-size:17px;line-height:1.4;color:var(--parsomen);
  background:var(--levha);border:1px solid var(--parsomen-2);border-radius:0;padding:8px 10px;margin:0}
.katil-form select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:var(--levha) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M.5.5 6 6.5 11.5.5' fill='none' stroke='%23D2A84E' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 13px center/12px 8px}
.katil-form option{background:var(--levha);color:var(--parsomen)}
.katil-form textarea{min-height:110px;resize:vertical}
.katil-form :is(input,textarea,select):focus-visible{outline:2px solid var(--yaldiz);outline-offset:1px}
.katil-form [aria-invalid="true"]{border-color:var(--zincifre)}
.gonder{margin-top:6px}
.dugme:is([disabled],[aria-disabled="true"]){cursor:progress;color:var(--parsomen-2);border-color:var(--parsomen-2)}
.form-durum{font-size:15.5px;line-height:1.5;text-wrap:pretty;scroll-margin-bottom:44px}
.form-durum:not(:empty){margin-top:16px;padding:10px 14px 12px;border:1px solid var(--yaldiz)}
.form-durum.hata{border-color:var(--zincifre)}
.form-durum strong{display:block;margin-bottom:2px;font:italic 400 21px/1.25 var(--fell);color:var(--parsomen)}
.form-durum a{overflow-wrap:anywhere}

/* ------------------------------------------------------------ short desktop screens (≤ 980 px tall): the chapter still fits one page */
@media (min-width:768px) and (max-height:980px){
  .b-sag{padding-top:18px}
  .b-baslik{margin-top:14px}
  .b-kure,.b-kure-yedek{width:84px;height:84px}
  .b-govde h1{margin-top:8px;font-size:clamp(44px,5vw,72px);line-height:1.15}
  .b-govde h1.uzun{font-size:clamp(38px,3.6vw,52px)}
  .b-konu{margin-top:6px}
  .olgular{margin-top:12px}
  .olgular th,.olgular td{padding-top:4px;padding-bottom:4px}
  .b-durum{margin-top:12px;line-height:1.5}
  .eylem{margin-top:14px}
  .b-not{margin-top:16px}
}

/* ------------------------------------------------------------ 1024–1279: same plate, tighter margin */
@media (max-width:1279px){
  .bolum{--split:55vw}
  .b-sag{padding-left:30px;padding-right:30px}
  .kenar{font-size:14px}
  .kenar-sayfa{font-size:15px}
  .dizin{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none}
  .dizin li:nth-child(n+13) .olgu{left:0;right:auto}
  .dizin li:nth-child(12) .olgu{top:100%;bottom:auto}
}
@media (min-width:768px) and (max-width:1023px){
  .bolum{--split:50vw}
  .b-sag{padding-left:24px;padding-right:24px}
}

/* ------------------------------------------------------------ mobile, 390 px: the stacked atlas */
@media (max-width:767px){
  :root{--kenar-x:12px}
  html{font-size:17px}
  .sayfa{display:flex;flex-direction:column;padding:34px 24px 40px}
  .kunye{height:auto}
  .wordmark{font-size:46px;gap:10px}
  .wordmark svg{width:32px;height:32px;margin-top:4px}
  .slogan{font-size:18px;margin-top:10px}
  .kenar,.kenar-varsayilan{display:contents}
  /* a margin page on a phone: the margin column, menu included, rises as a sheet over the plate; closing it
     puts the reader back where they were on the map */
  html.kenar-acik .kenar{position:fixed;inset:0;z-index:30;align-self:stretch;height:auto;margin:0;border:0;padding:34px 24px 0;background:var(--zemin)}
  html.kenar-acik .menu{margin-top:0}
  .kenar-sayfa{order:2;margin-top:16px}
  .k-govde{padding-right:0}
  .menu{order:1;flex-direction:row;flex-wrap:wrap;gap:2px 18px;margin-top:14px;font-size:16px}
  .mobil-anahtar{order:2;display:block;margin-top:22px;padding:12px 0 2px;border-top:1px solid var(--cizgi);font-size:15px;line-height:1.5;color:var(--parsomen-2)}
  .mobil-anahtar .glif{width:26px;height:26px;margin:0 2px 0 4px;position:relative;top:-1px}
  .ma-glif{white-space:nowrap}
  .ma-ipucu{display:block;margin-top:6px;font-style:italic;color:var(--parsomen)}
  .levha{order:3;height:auto;margin-top:10px;padding-bottom:4px}
  .levha > .ebru{bottom:0}
  .bolge{border-top:1px dotted var(--cizgi);padding-top:14px;margin-top:14px}
  .bolge:first-child{border-top:0;margin-top:0}
  .bolge-ad{position:static;margin:0 0 4px}
  .bolge ul{position:relative}
  .anahtar{order:4;margin-top:30px;padding-top:16px;border-top:1px solid var(--cizgi)}
  .dizin-bolum{order:5}
  .kunye-alt{order:6;display:block}
  .kunye-alt .veri{text-align:left;margin-top:6px}
  .levha > .ebru{position:relative;display:block;margin-top:8px}
  .olcek-anahtar{display:block}
  .dizin{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .dizin .olgu{display:none!important}
  .dizin li:nth-child(n+13) .olgu{left:0;right:auto}
  .sinir,.halka{display:none}

  /* one column: the picture stays put at the top, full width inside the frame, the ebru strip fixed along its foot
     like the endpaper at the spine; the text sheet scrolls up over both (the ebru never rides on the text) */
  .bolum{overflow-y:auto;overscroll-behavior:contain;--hero:min(62svh, calc((100vw - 2 * var(--ic)) * 1.3))}
  .b-pencere{position:fixed;left:var(--ic);right:var(--ic);top:var(--ic);bottom:auto;width:auto;height:var(--hero)}
  .b-ebru{position:fixed;left:var(--ic);right:var(--ic);top:calc(var(--ic) + var(--hero));bottom:auto;width:auto;height:var(--oluk)}
  .b-ebru::before{left:0;width:100%;transform:none}
  .b-sag{position:relative;z-index:1;left:auto;right:auto;top:auto;bottom:auto;margin:calc(var(--ic) + var(--hero) + var(--oluk)) var(--ic) var(--ic);padding:20px 20px 32px;overflow:visible;
         min-height:calc(100svh - var(--hero) - 2 * var(--ic) - var(--oluk))}
  .b-ust{position:fixed;top:30px;right:30px;z-index:5;min-height:0}
  .b-ust .kapat-yazi{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .b-baslik{margin-top:4px}
  .b-kure{width:80px;height:80px}
  .b-govde h1{font-size:44px}
  .b-govde h1.uzun{font-size:36px}
  .olgular th{font-size:15px}
  .olgular td{font-size:17px}
}