/* Fix My Coffee — site
   Ratio tasarım sisteminin web karşılığı. Uygulamayla aynı kurallar:
   400'den ince ağırlık yok · italik yok · metin sola hizalı · rakamlar tabular.

   Bauhaus tarafı: ızgara görünür (ince çizgiler), ölçek karşıtlığı sert,
   ve palet üç renkli — vermilion, kobalt, safran. Üçü de uygulamanın
   Assets.xcassets'inden geliyor, uydurma değil.
     vermilion = düzeltme, eylem
     kobalt    = bilgi, bağlantı
     safran    = raf, kulüp
*/

:root{
  --paper:#FAF8F2;
  --bone:#EFEBE1;
  --ink:#111110;
  --ink-2:#3A3936;
  --ink-3:#6E6B63;
  --vermilion:#EF3D1F;
  --cobalt:#1B3FD1;
  --saffron:#F7B32B;
  --rule:rgba(17,17,16,.15);
  --rule-soft:rgba(17,17,16,.08);

  --gap:1.5rem;
  --measure:62ch;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0F0F0E;
    --bone:#1A1A18;
    --ink:#F7F5EF;
    --ink-2:#C2BEB4;
    --ink-3:#8B877D;
    --vermilion:#FF5334;
    --cobalt:#6B87FF;
    --saffron:#FFC24A;
    --rule:rgba(247,245,239,.20);
    --rule-soft:rgba(247,245,239,.10);
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Archivo,ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.56;
  font-variant-numeric:tabular-nums;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:66rem;margin:0 auto;padding:0 var(--gap);}
.narrow{max-width:44rem;}

/* ---------------------------------------------------------------- tipografi */
h1,h2,h3{margin:0;text-wrap:balance;}
h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:800;letter-spacing:-.032em;line-height:1.01;}
h2{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:700;letter-spacing:-.024em;line-height:1.1;}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.012em;}
p{margin:0;max-width:var(--measure);}
.lede{font-size:clamp(1.08rem,2.2vw,1.35rem);color:var(--ink-2);max-width:52ch;}
.mono{font-family:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;}
.label{
  font-family:"DM Mono",ui-monospace,Menlo,monospace;
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:block;
}
.label.red{color:var(--vermilion);}
.label.blue{color:var(--cobalt);}
.label.yellow{color:#A9761A;}
@media (prefers-color-scheme:dark){.label.yellow{color:var(--saffron);}}

a{color:var(--ink);text-decoration-color:var(--vermilion);text-decoration-thickness:1.5px;text-underline-offset:.2em;}
a:hover{text-decoration-color:var(--ink);}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;}
.stack{display:flex;flex-direction:column;gap:1rem;}
.stack-lg{display:flex;flex-direction:column;gap:2.5rem;}

/* ------------------------------------------------------------------- şerit */
.bar{
  display:flex;align-items:center;gap:.9rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);
}
.bar .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);}
.bar img{width:34px;height:34px;border-radius:8px;display:block;}
.bar .brand b{font-weight:700;letter-spacing:-.015em;font-size:1.02rem;}
.bar nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;}
.bar nav a{color:var(--ink-3);text-decoration:none;font-size:.93rem;}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--ink);}
.bar .lang{
  font-family:"DM Mono",monospace;font-size:.76rem;letter-spacing:.1em;
  border:1px solid var(--rule);border-radius:999px;padding:.2rem .6rem;
  color:var(--ink-3);text-decoration:none;
}
.bar .lang:hover{color:var(--ink);border-color:var(--ink-3);}

/* ----------------------------------------------------------------- bölümler */
section{padding:4.5rem 0;border-top:1px solid var(--rule);}
section.first{border-top:0;padding-top:3.5rem;}
.head{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2.75rem;}

/* koyu bölüm — ekran görüntüleri burada kesiliyor */
.dark{
  background:var(--ink);color:var(--paper);
  border-top:0;
}
@media (prefers-color-scheme:dark){
  .dark{background:#000;}
}
.dark h2,.dark h3{color:var(--paper);}
.dark p{color:rgba(250,248,242,.72);}
.dark .label{color:rgba(250,248,242,.5);}
.dark .label.red{color:var(--vermilion);}

/* ------------------------------------------------------------- ekran kareleri */
.shots{display:grid;gap:2rem;}
@media(min-width:46rem){.shots{grid-template-columns:repeat(3,1fr);gap:2.5rem;}}
.shot{display:flex;flex-direction:column;gap:.9rem;}
.shot img{
  width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid rgba(250,248,242,.14);
  background:var(--bone);
}
.shot .cap{font-size:.92rem;color:rgba(250,248,242,.72);}
.shot .cap b{color:var(--paper);font-weight:600;display:block;}

.shot-wide{display:grid;gap:2.5rem;align-items:center;}
@media(min-width:52rem){.shot-wide{grid-template-columns:1fr 1.15fr;}}
.shot-wide img{width:100%;max-width:330px;height:auto;border-radius:16px;display:block;}

/* --------------------------------------------------------------- ızgara/kart */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(min-width:44rem){
  .grid.c2{grid-template-columns:repeat(2,1fr);}
  .grid.c3{grid-template-columns:repeat(3,1fr);}
}
.cell{background:var(--paper);padding:1.7rem;display:flex;flex-direction:column;gap:.65rem;}
.cell p{font-size:.95rem;color:var(--ink-2);}

/* --------------------------------------------------------------- diyagramlar */
figure{margin:0;display:flex;flex-direction:column;gap:.8rem;}
figure svg{width:100%;height:auto;max-width:420px;}
figcaption{font-size:.9rem;color:var(--ink-3);max-width:46ch;}

/* ------------------------------------------------------------------- rehber */
.qa{border-top:1px solid var(--rule);padding-top:1.4rem;margin-top:2.5rem;}
.answer{
  border-left:3px solid var(--vermilion);padding-left:1.1rem;
  font-size:1.12rem;color:var(--ink);max-width:56ch;
}
.guide-list{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.guide-list a{
  background:var(--paper);padding:1.25rem 1.5rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.25rem;
}
.guide-list a:hover{background:var(--bone);}
.guide-list b{font-weight:700;}
.guide-list span{font-size:.93rem;color:var(--ink-3);}

/* --------------------------------------------------------------- veri/anket */
.data{display:grid;gap:1.5rem;}
@media(min-width:40rem){.data{grid-template-columns:repeat(4,1fr);}}
.stat{display:flex;flex-direction:column;gap:.3rem;border-top:3px solid var(--vermilion);padding-top:.8rem;}
.stat .n{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;line-height:1;}
.stat .t{font-size:.9rem;color:var(--ink-2);}
.stat:nth-child(2){border-top-color:var(--cobalt);}
.stat:nth-child(3){border-top-color:var(--saffron);}
.stat:nth-child(4){border-top-color:var(--ink-3);}

/* ------------------------------------------------------------------- yasal */
.legal h2{margin-top:2.75rem;}
.legal h3{margin-top:1.9rem;}
.legal p{margin-top:.85rem;}

.note{background:var(--bone);border-left:3px solid var(--saffron);padding:1.15rem 1.4rem;max-width:var(--measure);}
.note p{font-size:.95rem;}

/* ------------------------------------------------------------------- footer */
footer{border-top:1px solid var(--rule);padding:2.75rem 0 4rem;color:var(--ink-3);font-size:.9rem;}
footer .cols{display:flex;gap:2.5rem;flex-wrap:wrap;margin-bottom:1.5rem;}
footer .col{display:flex;flex-direction:column;gap:.45rem;}
footer a{color:var(--ink-3);text-decoration-color:var(--rule);}
footer a:hover{color:var(--ink);}