/* Cesaret Duvarı landing (/duvar). It looks like kalpturkiye.org: white pages, navy actions, Poppins
   headings over Open Sans text, red only as an accent. The one bold element is the dot logo, as the
   party's prototype draws it: the red and blue links of the brand guide's mark (2026-10-08) on the
   prototype's own white-to-navy gradient. Everything around it stays quiet. The wall's
   security policy forbids inline style, so every rule the page and its script need lives here. The
   breakpoint 960px matches the script's wide/narrow switch. */
:root{
  /* Navy is every action, link and the footer band; the logo's red is an accent (a rule, an emphasis),
     the brand guide's #EF4137, the same red as the wall, the story image and the wall card. */
  --dw-navy:#024685; --dw-navy-dark:#013766; --dw-red:#EF4137;
  /* Headings, body text and quiet text (#6B6B6B, not the site's #7A7A7A, which fails contrast). Quiet
     text on the stage is a shade darker: lines that end inside the prototype's pale glow (#E2ECF5 at
     961 to 1024px) keep 5.5:1 with #5C5C5C, where #6B6B6B is only 4.45:1. */
  --dw-ink:#111111; --dw-text:#333333; --dw-muted:#6B6B6B; --dw-muted-stage:#5C5C5C;
  /* The search field's edge is 3.25:1 on white (WCAG 1.4.11 asks 3:1), the same edge as the wizard fields. */
  --dw-line:#E5E7EB; --dw-field:#8A8F98; --dw-soft:#F5F7F9;
  --dw-shadow:0 10px 30px rgba(2,70,133,.08);
  --dw-head:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --dw-body:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* The page keeps its scrollbar's room while a sheet locks the scroll, so nothing jumps sideways. */
html{scroll-padding-top:env(safe-area-inset-top,0px);scrollbar-gutter:stable}
body.dw{margin:0;background:#fff;color:var(--dw-text);font-family:var(--dw-body);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body.dw.dw-locked{overflow:hidden}
/* Zero specificity: the reset gives form controls the page's font and colour, and every class rule
   (white text on the navy button, the buttons' own size and weight) still wins over it. */
:where(.dw) :is(button,input,select){font:inherit;color:inherit}
/* 16px or more, so iOS Safari does not zoom the page in when a field gets focus. */
.dw input,.dw select{font-size:16px}
.dw :focus-visible{outline:2px solid var(--dw-navy);outline-offset:3px;border-radius:4px}
.dw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons, as on kalpturkiye.org: the main action filled navy, every other one outlined in navy. */
.dw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 28px;border:1px solid transparent;border-radius:4px;
  font-family:var(--dw-head);font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}
.dw-btn--navy{background:var(--dw-navy);color:#fff}
.dw-btn--navy:hover{background:var(--dw-navy-dark)}
.dw-btn--outline{background:#fff;color:var(--dw-navy);border-color:var(--dw-navy)}
.dw-btn--outline:hover{background:var(--dw-soft)}

/* Top bar */
.dw-top{display:flex;align-items:center;gap:22px;min-height:96px;padding:env(safe-area-inset-top,0px) clamp(28px,4.8vw,86px) 0;
  background:#fff;border-bottom:1px solid var(--dw-line)}
.dw-top__logo{display:block;line-height:0;margin-right:auto}
.dw-top__logo img{height:48px;width:auto}
.dw-search input{width:230px;height:44px;padding:0 16px;border:1px solid var(--dw-field);border-radius:4px;background:#fff;color:var(--dw-text)}
.dw-search input::placeholder{color:var(--dw-muted)}
/* The search chooser: several matches are offered under the search box, never listed on the page. */
.dw-search{position:relative}
.dw-results{position:absolute;z-index:9;top:calc(100% + 6px);right:0;width:min(340px,calc(100vw - 32px));padding:8px;
  border:1px solid var(--dw-line);border-radius:6px;background:#fff;box-shadow:0 14px 36px rgba(2,70,133,.14)}
.dw-results__title{margin:6px 10px 6px;font-family:var(--dw-head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dw-navy)}
.dw-results__list{margin:0;padding:0;list-style:none}
.dw-results__item{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:4px;
  background:none;text-align:left;cursor:pointer}
.dw-results__item:hover,.dw-results__item:focus-visible{background:var(--dw-soft)}
.dw .dw-results__item:focus-visible{outline-offset:-2px}
.dw-results__name{font-family:var(--dw-head);font-size:15px;font-weight:600;line-height:1.3;color:var(--dw-ink);overflow-wrap:anywhere}
.dw-results__province{font-size:12px;letter-spacing:.04em;color:var(--dw-muted)}
.dw-results__more{margin:6px 10px 4px;font-size:13px;color:var(--dw-muted)}
/* What a search without script found when it cannot open one card. */
.dw-notice{margin:0;padding:12px clamp(16px,4.8vw,86px);border-bottom:1px solid var(--dw-line);background:var(--dw-soft);font-size:15px;color:var(--dw-text)}

/* Stage: the party prototype's background, stop for stop: a wide, soft sweep from the white page into
   navy, under a pale blue-white glow. The hero sits on the white; the logo straddles the sweep, its left
   loop on the pale side and its right loop on the navy. The prototype drew it over the whole window,
   under a 96px top bar; the stage is that window less the bar, so the glow is laid on a box that
   reaches 96px above the stage (the stage clips it) and keeps the prototype's size and centre. Painted
   before the canvas (tree order), so under the dots. No other motif: the logo is the only figure on it. */
.dw-stage{position:relative;overflow:hidden;height:calc(100vh - 96px);height:calc(100svh - 96px);min-height:560px;
  background:linear-gradient(90deg,#FFFFFF 0%,#FFFFFF 41%,#F7F9FB 48%,#DBE8F2 55%,#0B568F 68%,#064274 82%,#032F59 100%)}
.dw-stage::before{content:"";position:absolute;top:-96px;right:0;bottom:0;left:0;pointer-events:none;
  background:radial-gradient(55% 105% at 52% 52%,rgba(221,233,243,.96) 0%,rgba(240,245,249,.78) 35%,rgba(255,255,255,0) 69%)}
.dw-wall{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.dw-wall.dw-dragging{cursor:grabbing}
.dw-wall.dw-pointing{cursor:pointer}
/* Centred at 53 % of the window, as in the prototype, whose hero was fixed over the whole window: the
   stage is the window less the 96px bar, so 53 % of the window is 53 % of the stage less 45px. */
.dw-hero{position:absolute;z-index:4;left:clamp(40px,5vw,90px);top:calc(53% - 45px);transform:translateY(-50%);max-width:540px;
  pointer-events:none;transition:opacity .35s}
.dw-hero a{pointer-events:auto}
/* Gone at once when the wall zooms in, as the dots can then pass under it, and out of the tab order:
   hidden links must not take keyboard focus. It fades back in on the way out. */
.dw-hero.dw-away{opacity:0;visibility:hidden;transition:none}
/* The eyebrow as on kalpturkiye.org: small navy capitals over a short red rule. */
.dw-hero__kicker,.dw-story__kick{margin:0 0 18px;font-family:var(--dw-head);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dw-navy)}
.dw-hero__kicker::after,.dw-story__kick::after{content:"";display:block;width:24px;height:2px;margin-top:10px;background:var(--dw-red)}
.dw-hero__title{margin:0 0 20px;font-family:var(--dw-head);font-weight:700;font-size:clamp(52px,5vw,76px);line-height:1.02;letter-spacing:-.02em;color:var(--dw-ink)}
.dw-hero__title span{color:var(--dw-navy)}
.dw-hero__lead{margin:0 0 8px;max-width:38ch;font-size:19px;line-height:1.55;color:var(--dw-text)}
.dw-hero__sublead{margin:0 0 24px;max-width:48ch;font-size:15px;line-height:1.65;color:var(--dw-muted-stage)}
.dw-stats{display:flex;gap:34px;padding-top:3px}
.dw-stats b{display:block;font-family:var(--dw-head);font-size:27px;font-weight:700;line-height:1.1;color:var(--dw-ink);font-variant-numeric:tabular-nums}
.dw-stats span{font-size:14px;color:var(--dw-muted-stage)}
.dw-stats .dw-stats__weaving{font-size:22px}
.dw-hero__buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* The hint where the prototype puts it: centred at 73 % across, under the wall; the wall's dots keep
   clear of it (the script's keepClear). Its left end lies on the light part of the sweep, where the
   prototype's plain white text measured 1.5:1, so a navy pill keeps it legible on both parts. Its text
   sits where the prototype's does, 34px up. */
.dw-hint{position:absolute;z-index:4;left:73%;bottom:28px;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:999px;
  background:rgba(2,38,75,.85);font-size:13px;white-space:nowrap;color:#C9D6E8;pointer-events:none;transition:opacity .4s}
.dw-hint.dw-gone{opacity:0}
/* Under 1340px, 73 % would bring the hint within 20px of the zoom buttons. It sits on their line, to
   their left: 202px = the tools' right offset 34px, their width 3 × 44px + 2 × 8px and a 20px gap. */
@media (max-width:1339px){.dw-hint{left:auto;right:202px;bottom:36px;transform:none}}
.dw-tools{position:absolute;z-index:5;right:34px;bottom:30px;display:flex;gap:8px}
.dw-tools button{width:44px;height:44px;border-radius:4px;border:1px solid #FFFFFF;background:#FFFFFF;
  color:var(--dw-navy);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 5px 18px rgba(0,10,30,.35)}
.dw-tools button:hover{background:var(--dw-soft)}
/* Two tones: the white ring reads on the navy side of the sweep, the navy one on the white band of a
   narrow screen and on the white button. */
.dw .dw-tools button:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 2px var(--dw-navy)}

/* Tooltip, built by the script with textContent */
.dw-tip{position:absolute;z-index:6;width:270px;padding:14px 16px;border:1px solid var(--dw-line);border-radius:6px;background:#fff;color:var(--dw-text);
  box-shadow:0 14px 36px rgba(0,10,30,.35);pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s}
.dw-tip.dw-show{opacity:1;transform:none}
.dw-tip__person{display:flex;gap:13px;align-items:flex-start}
.dw-tip__avatar{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--dw-head);font-weight:700;font-size:18px;color:#fff;border:3px solid #fff;overflow:hidden;position:relative}
/* A full-name entry's published photo covers the monogram inside the round avatar; its ring colour
   stays as the border. The script removes a photo that cannot load, so the monogram shows. */
.dw-tip__avatar img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* The guide's on-white red and blue, darker than the wall's, carry white initials on the white card,
   inside a ring of the link's own colour, as on the wall card (wall-card.css). */
.dw-tip__avatar--red{background:#BE2C27;box-shadow:0 0 0 2px #EF4137}
.dw-tip__avatar--blue{background:#2B61AE;box-shadow:0 0 0 2px #2F6AB4}
.dw-tip__body{min-width:0}
.dw-tip__name{margin:0;font-family:var(--dw-head);font-size:18px;line-height:1.2;font-weight:600;color:var(--dw-ink);overflow-wrap:anywhere}
.dw-tip__city{margin:0;font-size:13px;color:var(--dw-muted)}
.dw-tip__sentence{display:block;margin-top:8px;font-size:14px;overflow-wrap:anywhere}
.dw-tip__no{margin:10px 0 0;font-size:12px;color:var(--dw-muted)}
.dw-tip__no b{display:block;font-family:var(--dw-head);font-size:15px;letter-spacing:.06em;color:var(--dw-ink)}

/* Footer: the site's navy band with white text. */
.dw-foot{padding:32px clamp(16px,4.8vw,86px) calc(36px + env(safe-area-inset-bottom,0px));
  background:var(--dw-navy);font-size:13.5px;line-height:1.7;color:#D6E2F0}
.dw-foot__links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-bottom:16px}
.dw-foot__links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--dw-head);color:#fff;font-weight:600;text-decoration:none}
.dw-foot__links a:hover{text-decoration:underline}
.dw-foot__title{margin:0 0 4px;font-family:var(--dw-head);font-size:14px;font-weight:600;color:#fff}
.dw-foot p{max-width:80ch;margin:0 0 12px;overflow-wrap:anywhere}
.dw-foot p a{color:#fff}
.dw .dw-foot :focus-visible{outline-color:#fff}

/* Overlays: the story sheet and the profile card. Without script the story opens through :target. */
.dw-overlay{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(2,8,20,.7)}
.dw-overlay.dw-open{display:flex}
html:not(.dw-js) .dw-overlay:target{display:flex}
/* A story opened through :target sits above a card the server opened (/duvar/no/{number}). */
.dw-overlay--sheet:target{z-index:11}
.dw-modal{width:min(460px,100%);max-height:calc(100% - 16px);overflow:auto;padding:26px 24px 22px;border-radius:6px;background:#fff;
  color:var(--dw-text);box-shadow:0 30px 80px rgba(2,40,80,.3)}
.dw-modal:focus{outline:none}
.dw-overlay--sheet{align-items:stretch;justify-content:flex-end;padding:0}
.dw-story{width:min(560px,100%);height:100%;max-height:none;border-radius:0;padding:34px 30px calc(28px + env(safe-area-inset-bottom,0px))}
.dw-story h2{margin:0 0 22px;font-family:var(--dw-head);font-size:28px;line-height:1.2;letter-spacing:-.02em;color:var(--dw-ink)}
.dw-story h2 span{color:var(--dw-navy)}
.dw-story h3{margin:22px 0 6px;font-family:var(--dw-head);font-size:17px;color:var(--dw-ink)}
/* Zero specificity, so the eyebrow and the note keep their own size and colour. */
:where(.dw-story p,.dw-story li){margin:0;font-size:15px;line-height:1.65;color:var(--dw-text)}
.dw-story ol{margin:0;padding-left:20px}
.dw-story__note{margin:24px 0 20px;padding:16px 18px;border-left:3px solid var(--dw-red);border-radius:4px;background:var(--dw-soft)}
.dw-story__note b{display:block;margin-bottom:6px;font-family:var(--dw-head);color:var(--dw-ink)}
.dw-story__note p{font-size:14px}
.dw-story__note a{color:var(--dw-navy);font-weight:600}
.dw-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
/* The card slot keeps its height while the card loads and when the web font replaces the fallback,
   so the centred sheet does not grow or move; the card fills it. 260px holds a card with a sentence
   of up to two lines on a phone. */
#profil-kart{display:flex;flex-direction:column;min-height:260px;margin-bottom:18px}
/* Very large text on a phone lays the page out at about half its width: the sheet gives the card more
   of it. */
@media (max-width:260px){.dw-modal{padding:20px 12px 16px}}
.dw-profile .wall-card{flex:1 0 auto;max-width:none}
.dw-share__label{margin:16px 0 8px;font-family:var(--dw-head);font-size:13px;font-weight:600;color:var(--dw-muted)}
.dw-share{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Every share button holds two lines of label (icon 24px, gap 6px, padding 24px, border 2px, 2 × 1.4em),
   so the row keeps its height when the script reveals the buttons that need it ("Instagram hikâyesi"
   wraps on a phone) and nothing below the row moves. */
.dw-share__btn{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:calc(56px + 2.8em);padding:12px 6px;border:1px solid var(--dw-line);
  border-radius:6px;background:#fff;color:var(--dw-ink);font-family:var(--dw-head);font-size:13px;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer}
.dw-share__btn:hover{background:var(--dw-soft)}
.dw-share__btn:disabled{opacity:.6;cursor:wait}
.dw-share__btn svg{width:24px;height:24px}
/* Fixed columns: a button the script reveals later does not push the others sideways. */
.dw-share__btn--ig{grid-column:1}
.dw-share__btn--wa{grid-column:2}
.dw-share__btn--link{grid-column:3}
.dw-share__btn--ig svg{color:#D62976}
.dw-share__btn--wa svg{color:#25D366}
.dw-share__btn--link svg{color:var(--dw-navy)}
/* The same very narrow sheet (a phone at 200 % zoom) has no room for three share buttons side by side:
   they stack, icon beside the label. Kept after the share rules above, which these override at equal
   specificity. */
@media (max-width:260px){.dw-share{grid-template-columns:1fr}
  .dw-share__btn{grid-column:auto;flex-direction:row;justify-content:flex-start;min-height:0}}
.dw-profile__join{margin:16px 0;font-size:14px;color:var(--dw-muted)}
.dw-profile__join a{color:var(--dw-navy);font-weight:600}
/* As wide as its text, up to 90vw: with left:50% alone a fixed box shrinks to half the screen, and a long
   message became a tall circle. A long message wraps into a rounded box, not a pill. */
.dw-toast{position:fixed;z-index:12;left:50%;top:calc(env(safe-area-inset-top,0px) + 86px);width:max-content;max-width:min(90vw,680px);padding:10px 18px;border-radius:22px;
  background:var(--dw-navy);color:#fff;font-weight:600;text-align:center;opacity:0;transform:translate(-50%,-10px);transition:.25s;pointer-events:none;
  /* A white hairline: the low toast can sit on the navy side of the sweep, where navy on navy would not
     show. */
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 8px 24px rgba(0,10,30,.35)}
.dw-toast.dw-show{opacity:1;transform:translate(-50%,0)}
.dw-toast.dw-toast--low{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);transform:translate(-50%,10px)}
.dw-toast.dw-toast--low.dw-show{transform:translate(-50%,0)}

/* Narrow screens: the logo above, the hero card in normal flow below it, so large text and 200% zoom
   lengthen the page instead of clipping the card. */
@media (max-width:960px){
  /* The search keeps a usable width; with large text it wraps onto its own row under the logo. */
  .dw-top{flex-wrap:wrap;min-height:72px;gap:8px 12px;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 8px}
  .dw-top__logo img{height:38px}
  .dw-search{flex:1 1 10em;min-width:min(10em,100%);display:flex;justify-content:flex-end}
  .dw-search input{width:100%;min-width:0}
  .dw-top__join{display:none}
  /* The logo's band is about as tall as the logo is wide (88vw at 0.94 of the band), so it does not
     float in empty space; on a short phone the band stays at 56svh and the logo shrinks to fit. It also
     leaves the hero card's buttons on the first screen, as the prototype's card, pinned to the foot of
     the window, always was: 420px is the 72px bar, the air and the card's 300px down to its buttons. It
     never drops under 240px. Above it, --dw-air (the script's NARROW_AIR) keeps the prototype's room
     under the top bar. As in the party prototype's phone layout, the logo stands on white, the sweep
     into navy starts across its lower rows, and the hero card sits on the blue. The stops are the
     prototype's, measured against its logo: white to 0.57 of the logo's height, #EEF4F8 at 0.86,
     #0A568F about 110px under the logo. The stage fills the first screen under the bar, so the navy runs
     to its foot, as in the prototype, and the footer starts below it. */
  .dw-stage{--dw-band:min(56svh,calc(98vw + 8px),440px,max(240px,calc(100svh - 420px)));--dw-air:40px;height:auto;min-height:calc(100svh - 72px);padding:calc(var(--dw-air) + var(--dw-band)) 14px 18px;
    background:linear-gradient(180deg,#FFFFFF 0,#FFFFFF calc(var(--dw-air) + var(--dw-band) * .56),#EEF4F8 calc(var(--dw-air) + var(--dw-band) * .82),
      #0A568F calc(var(--dw-air) + var(--dw-band) + 92px),#03345F 100%)}
  .dw-stage::before{display:none}
  /* The hero is the prototype's phone card: white, a light border and a soft navy shadow. */
  .dw-hero{position:relative;left:auto;top:auto;transform:none;max-width:640px;margin:0 auto;padding:18px;pointer-events:auto;
    background:#fff;border:1px solid #E6EBF0;border-radius:8px;box-shadow:0 14px 36px rgba(2,47,89,.16)}
  .dw-hero__kicker{margin-bottom:12px;font-size:11px}
  /* The title's longest word, "Cesaret", is about 3.9 times the font size wide, and the card's text box is
     the window less 66px (the stage's and the card's padding): from 218px down (a phone at 200 % zoom) the
     title shrinks so the word stays inside the card. */
  .dw-hero__title{margin-bottom:10px;font-size:min(38px,(100vw - 66px) / 4)}
  .dw-hero__lead{margin-bottom:14px;font-size:15px}
  .dw-hero__sublead,.dw-hint{display:none}
  .dw-stats{gap:24px}
  .dw-stats b{font-size:24px}
  .dw-hero__buttons{margin-top:14px}
  .dw-hero__buttons .dw-btn{flex:1;padding:12px 10px}
  .dw-tools{top:12px;right:12px;bottom:auto}
  .dw-story{padding:26px 20px calc(22px + env(safe-area-inset-bottom,0px))}
}
/* Phones pinch to zoom, so they keep only "show the whole wall". A mouse and keyboard window of 761 to
   960px is stacked too, but keeps + and −: the keyboard has no other way to zoom the wall. */
@media (max-width:760px),(max-width:960px) and (pointer:coarse){#wall-zoom-in,#wall-zoom-out{display:none}}
@media (prefers-reduced-motion:reduce){.dw *,.dw *::before,.dw *::after{transition:none!important}}