/* Napalım? site. Values come from docs/brand/rehber/tokens.json; the issue sample copies docs/brand/final.html. */

/* Fonts are served from this site, so a visit makes no request to Google. Archivo is a variable font (400–700). */
@font-face{font-family:Archivo;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Shrikhand;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/shrikhand-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Shrikhand;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/shrikhand-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --page:#f3eee4;--paper:#fffdf8;--ink:#2a1a12;--muted:#74685c;--rule:#eadfcf;
  --simit:#d2381f;--on-simit:#fffdf8;--sesame:#f2b53a;--focus:var(--ink);
  --sans:Archivo,Verdana,sans-serif;--display:Shrikhand,Georgia,serif;
  color-scheme:only light; /* the site has no dark theme; "only" also stops browsers from darkening it on their own */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.5 var(--sans)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.shell{max-width:1190px;margin:0 auto;padding:26px 28px 0}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.top a{display:block;line-height:0}
.top img{display:block;height:46px;width:auto}

/* Home: intro and signup on the left, the issue sample in a webmail browser window on the right. */
.home{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);column-gap:clamp(40px,5vw,72px);align-items:start;margin-top:52px}
.intro{max-width:430px}
.sample{min-width:0;max-width:680px;justify-self:end;width:100%}

h1.headline{margin:0 0 16px;font:400 44px/1.04 var(--display);color:var(--ink)}
h1.headline span{white-space:nowrap} /* breaks only between the three parts */
.lede{margin:0 0 26px;font-size:17px;line-height:1.5}
.intro .lede:first-of-type{margin-bottom:1.5em} /* one empty line between the two sentences */

.signup label{display:block;margin-bottom:6px;font-size:12px;font-weight:700}
.signup .r{display:flex;flex-wrap:wrap;gap:8px}
.signup input[type=email]{flex:999 1 200px;min-width:0;font:400 16px/1.2 var(--sans);padding:11px 12px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}
.signup input[type=email]::placeholder{color:var(--muted);opacity:1}
.signup button{flex:1 0 auto;font:700 16px/1.2 var(--sans);padding:11px 18px;border:0;border-radius:0;background:var(--simit);color:var(--on-simit);cursor:pointer}
.signup button:hover{text-decoration:underline}
.note{margin:10px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.note a{color:var(--muted)}
.note a:hover{color:var(--ink)}

/* The captcha works with no visible box: the widget stays in the form (it adds the "altcha" field on submit) but is hidden. */
.captcha{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form-err{margin:10px 0 0;font-size:13px;line-height:1.4;font-weight:700}
.signup button[aria-busy=true]{cursor:progress}

/* "Örnek" with a sesame highlighter swipe, a side note and a hand-drawn arrow down into the browser window.
   The word starts on the window's left edge. The arrow hangs off the end of the side note, so its start
   always sits right after "görünüyor" whatever the font width; its tip ends inside the window's tab strip. */
.sample-head{position:relative;z-index:1;height:70px}
.label{position:absolute;left:0;bottom:20px;margin:0;display:flex;align-items:baseline;gap:14px;white-space:nowrap;transform:rotate(-3deg);transform-origin:left bottom}
.hl{position:relative;z-index:0;font-size:30px;line-height:1;font-weight:700;color:var(--ink)}
.hl::before{content:"";position:absolute;z-index:-1;left:-5px;right:-7px;top:44%;bottom:-8%;background:var(--sesame);transform:skewX(-14deg);clip-path:polygon(3% 14%,99% 0,100% 82%,0 100%)}
.aside{position:relative;font-size:15px;line-height:1;color:var(--muted)}
.arrow{position:absolute;left:100%;top:0;width:84px;height:80px;margin:-2px 0 0 -1px;overflow:visible;fill:none;stroke:var(--simit);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* The browser window: flat drawing in the gull's style (ink outline, no shadow). Neutral, no real browser or mail brand:
   the address bar says only "posta". */
.browser{--side:172px;margin:0;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--page);color:var(--ink);font-family:var(--sans)}
.browser .ic{width:15px;height:15px;flex:none;fill:currentColor}
.chrome{background:var(--rule);user-select:none}
.tabs{display:flex;align-items:flex-end;gap:10px;height:34px;padding:0 10px}
.dots{display:flex;gap:6px;align-self:center;margin-right:4px}
.dots i{display:block;width:10px;height:10px;border:1.5px solid var(--ink);border-radius:50%}
.tab{display:flex;align-items:center;gap:7px;min-width:0;max-width:240px;height:27px;padding:0 10px 0 12px;background:var(--paper);border-radius:7px 7px 0 0;font-size:12px;line-height:1}
.browser .mk{flex:none;width:18px;height:14px;color:var(--simit)}
.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab b{margin-left:auto;padding-left:12px;font-weight:400;color:var(--muted)}
.newtab{align-self:center;font-size:17px;line-height:1;color:var(--muted)}
.addr{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;background:var(--paper);border-bottom:1px solid var(--rule)}
.navs{display:flex;gap:10px;color:var(--muted)}
.navs .ic{width:14px;height:14px}
.navs .flip{transform:scaleX(-1);opacity:.5}
.url{flex:1;display:flex;align-items:center;gap:7px;height:25px;padding:0 12px;background:var(--page);border-radius:13px;font-size:12.5px;line-height:1}
.url .ic{width:12px;height:12px;color:var(--muted)}
.url .mk{display:none} /* phones only: there the tab strip and the app bar with the mail mark are hidden */

/* The webmail: top bar with search, folders on the left, the open message on the right. */
.webmail{display:flex;flex-direction:column;height:500px}
.wm-top{flex:none;display:grid;grid-template-columns:var(--side) minmax(0,1fr) auto;align-items:center;height:48px;padding-right:12px}
.wm-brand{display:flex;align-items:center;gap:12px;padding-left:18px}
.wm-brand .ic{width:17px;height:17px;color:var(--muted)}
.wm-brand .mk{width:26px;height:20px}
.wm-brand b{margin-left:-4px;font-size:15px;font-weight:700;letter-spacing:.01em}
.search{display:flex;align-items:center;gap:9px;max-width:380px;height:31px;padding:0 14px;background:var(--rule);border-radius:16px;font-size:12.5px;color:var(--muted)}
.search .ic{width:14px;height:14px}
.me{display:grid;place-items:center;width:27px;height:27px;margin-left:12px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700}
.wm-main{flex:1;min-height:0;display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.wm-side{padding:2px 8px 0 0;font-size:12.5px;line-height:1.2;white-space:nowrap}
.compose{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px 10px;padding:10px 16px 10px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;font-weight:700}
.wm-side ul{list-style:none;margin:0;padding:0}
.wm-side li{display:flex;align-items:center;gap:10px;height:28px;padding:0 10px 0 16px;border-radius:0 14px 14px 0}
.wm-side li .ic{color:var(--muted)}
.wm-side li span{overflow:hidden;text-overflow:ellipsis}
.wm-side li b{margin-left:auto;padding-left:6px;font-weight:400;font-size:12px}
.wm-side li.on{background:var(--rule);font-weight:700}
.wm-side li.on .ic{color:var(--ink)}
.wm-side li.on b{font-weight:700}
.wm-msg{display:flex;flex-direction:column;min-width:0;min-height:0;margin:0 10px 10px 0;background:var(--paper);border-radius:12px;overflow:hidden}
.wm-tools{flex:none;display:flex;align-items:center;gap:18px;height:38px;padding:0 16px;border-bottom:1px solid var(--rule);color:var(--muted)}
.wm-tools span{margin-left:auto;font-size:12px}

/* The message scrolls. The script swaps the browser's scrollbar for a drawn one and shows a "kaydır" pill
   with a slowly moving arrow; the pill fades out after the first scroll. */
.msg-wrap{position:relative;flex:1;min-height:0}
.msg-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.msg-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.js-sb .msg-scroll{scrollbar-width:none;padding-right:14px}
.js-sb .msg-scroll::-webkit-scrollbar{display:none}
.sb{display:none}
.js-sb .sb{display:block;position:absolute;top:8px;bottom:8px;right:5px;width:10px;border-radius:5px;background:var(--rule);cursor:pointer;touch-action:none}
.js-sb .sb[hidden]{display:none}
.sb-thumb{position:absolute;left:0;right:0;top:0;height:40%;border-radius:5px;background:var(--muted);cursor:grab}
.sb-thumb:hover,.sb.drag .sb-thumb{background:var(--ink)}
.sb.drag .sb-thumb{cursor:grabbing}
.more{display:none}
/* A paper fade along the bottom edge of the message, so the pill sits on clean paper and the list visibly runs on. */
.js-sb .msg-wrap::after{content:"";position:absolute;left:0;right:20px;bottom:0;height:52px;background:linear-gradient(rgba(255,253,248,0),var(--paper) 62%);pointer-events:none;transition:opacity .3s}
.js-sb .msg-wrap.moved::after{opacity:0}
.js-sb .more{display:flex;align-items:center;gap:5px;position:absolute;z-index:1;left:50%;bottom:12px;transform:translateX(-50%);margin:0;padding:5px 10px 5px 13px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:700 12px/1 var(--sans);cursor:pointer;transition:opacity .3s,visibility 0s;animation:more-bounce 1.6s ease-in-out infinite}
.more svg{width:14px;height:14px;fill:none;stroke:var(--simit);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.more:hover{background:var(--page)}
.moved .more{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
/* the whole pill (word + arrow) hops: a quick lift, a soft landing, then a rest */
@keyframes more-bounce{0%,55%,100%{transform:translate(-50%,0)}20%{transform:translate(-50%,-7px)}38%{transform:translate(-50%,0)}46%{transform:translate(-50%,-2.5px)}}
@media (prefers-reduced-motion:reduce){.js-sb .more{animation:none}.more,.moved .more,.js-sb .msg-wrap::after{transition:none}}

.msg-head{padding:14px 18px 10px;border-bottom:1px solid var(--rule)}
.subj{margin:0 0 10px;font-size:18px;line-height:1.25;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.from{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3}
.av{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--page);border:1px solid var(--rule)}
.av img{display:block;width:23px;height:auto}
.who{flex:1;min-width:0}
.who > span{color:var(--muted);font-size:12px}
.who small{display:block;color:var(--muted);font-size:12px}
.when{flex:none;align-self:flex-start;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.when .ic{width:14px;height:14px}

/* The issue itself: same rules as final.html (paper, no box, no shadow). */
.sheet{padding:14px 18px 12px;font:14px/1.3 var(--sans);color:var(--ink)}
.sheet .sh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}
.sheet .sh img{display:block;height:28px;width:auto}
.sheet .sh small{font-size:12px;color:var(--muted)}
.sheet .lead{margin:8px 0 6px;padding:2px 0 2px 12px;border-left:3px solid var(--sesame)}
.sheet .lead p{display:flex;gap:8px;align-items:baseline;margin:0 0 3px;font-size:14px;line-height:1.35}
.sheet .lead .ic{color:var(--simit);flex:none;position:relative;top:2px}
.sheet h3{margin:19px 0 4px;padding-bottom:3px;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:var(--simit)}
.sheet h3 small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:6px;font-size:12px}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet li{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:2.5px 0;font-size:14px;line-height:1.35}
.ic{width:15px;height:15px;flex:none;fill:currentColor}
.sheet li .ic{color:var(--simit);opacity:.9}
.sheet li b{font-weight:700;flex:none;max-width:55%;overflow:hidden;text-overflow:ellipsis}
.sheet li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:13px}
.sheet li i{flex:none;font-style:normal;font-size:12px;font-weight:700;color:var(--simit)}
.sheet .foot{margin:16px 0 0;padding-top:8px;border-top:1px solid var(--rule);color:var(--muted);font-size:12px;line-height:1.4}
.sheet .foot p{margin:0 0 3px}

/* Text pages (privacy, thank-you): one reading column on paper. */
.page{max-width:720px;margin:44px 0 0;background:var(--paper);padding:28px 32px 30px;font-size:16px;line-height:1.55}
.page h1{margin:0 0 6px;font-size:28px;line-height:1.15;font-weight:700}
.page .sub{margin:0 0 4px;color:var(--muted);font-size:13px}
.page h2{margin:28px 0 8px;padding-bottom:3px;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.3;letter-spacing:.07em;text-transform:uppercase;color:var(--simit)}
.page p,.page ul{margin:0 0 10px}
.page ul{padding-left:20px}
.page li{margin-bottom:4px}
.page a{color:var(--simit);font-weight:700}

.site-foot{margin-top:56px;padding:12px 0 28px;border-top:1px solid var(--rule);color:var(--muted);font-size:13px}
.site-foot a{color:var(--muted)}
.site-foot a:hover{color:var(--ink)}

@media (max-width:1120px){
  .home{grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:40px}
  h1.headline{font-size:40px}
  .browser{--side:150px}
  .wm-side{font-size:12px}
  .wm-side li{gap:8px;padding-left:12px}
  .compose{margin-left:8px;padding:9px 12px}
}
@media (max-width:860px){
  .home{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .intro{max-width:600px}
  .sample{justify-self:start;max-width:660px;margin-top:36px}
}
/* Phones: only the message, in a plain browser frame (no tabs, no top bar, no folders), so the list keeps its full size. */
@media (max-width:600px){
  body{font-size:16px}
  .shell{padding:18px 14px 0}
  .top img{height:40px}
  .home{margin-top:28px}
  h1.headline{font-size:34px}
  .lede{font-size:16px}
  .sample{margin-top:28px}
  .sample-head{height:62px}
  .label{gap:14px;bottom:18px}
  .hl{font-size:26px}
  .aside{font-size:13px}
  .arrow{width:68px;height:66px}
  .browser{border-radius:8px}
  .tabs,.wm-top,.wm-side,.wm-tools span{display:none}
  .addr{gap:10px;padding:0 8px}
  .url .mk{display:block;width:16px;height:12px}
  .webmail{height:min(560px,78vh)}
  .wm-main{grid-template-columns:minmax(0,1fr)}
  .wm-msg{margin:0;border-radius:0}
  .wm-tools{height:36px;padding:0 12px}
  .msg-head{padding:10px 12px 9px}
  .subj{font-size:16px}
  .sheet{padding:12px 12px 10px}
  .sheet li b{max-width:60%}
  .js-sb .msg-scroll{padding-right:12px}
  .js-sb .sb{right:3px;width:8px}
  .page{margin:28px -14px 0;padding:22px 14px 24px}
  .page h1{font-size:24px}
}