/* meyvo.com.tr: shared look for every page (landing, profile, post, legal). "İncir & Ayva": fig-dark ground,
   quince-yellow accent, pomegranate only for likes. Bricolage Grotesque (display) + Figtree (text), self-hosted. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff") format("woff");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff") format("woff");
  font-weight: 300 900; font-display: swap;
}

:root {
  --incir: #1F1521;
  --incir-derin: #160F18;
  --yuzey: #271A2A;
  --yuzey-2: #301F33;
  --cizgi: #3A2A3E;
  --ayva: #E9C46A;
  --ayva-acik: #F6DC8E;
  --ayva-koyu: #C9962F;
  --nar: #D7263D;
  --yaprak: #6FAF7A;
  --kagit: #F3E9DC;
  --soluk: #B9A9B6;
  --sessiz: #8C7A89;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --page: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--incir-derin); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--incir);
  color: var(--kagit);
  font: 400 17px/1.6 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: var(--ayva); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ayva-acik); }
:focus-visible { outline: 2px solid var(--ayva); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--ayva); color: var(--incir); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type ---------------------------------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 760;
  font-stretch: 78%;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 0;
}
h1, h2, h3 { font-family: var(--display); font-variation-settings: "opsz" 48; letter-spacing: -0.02em; margin: 0; }
h2 { font-weight: 720; font-stretch: 85%; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-weight: 650; font-size: 21px; line-height: 1.25; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--soluk); max-width: 34em; margin: 0; }
.muted { color: var(--soluk); }
.quiet { color: var(--sessiz); }

/* ---- Buttons: outlined and text-only. No filled yellow pills (user's taste). ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 20px;
  border: 1.5px solid var(--cizgi); border-radius: 12px; background: transparent;
  color: var(--kagit); font: 600 16px/1 var(--text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.btn:hover { border-color: var(--soluk); color: var(--kagit); }
.btn.ayva { border-color: var(--ayva); color: var(--ayva); }
.btn.ayva:hover { background: rgba(233, 196, 106, 0.08); color: var(--ayva-acik); border-color: var(--ayva-acik); }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn svg { width: 18px; height: 18px; flex: none; }
.textlink {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px;
  color: var(--kagit); font: 600 16px/1 var(--text); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.textlink:hover { color: var(--ayva); }
.textlink.ayva { color: var(--ayva); }

/* ---- Header / footer ------------------------------------------------------------------------------------------ */
.site-head { position: relative; z-index: 5; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--kagit); text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { font: 720 23px/1 var(--display); letter-spacing: -0.03em; }
.brand:hover { color: var(--kagit); }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a { color: var(--soluk); text-decoration: none; font-weight: 500; padding: 10px 12px; border-radius: 10px; }
.site-nav a:hover { color: var(--kagit); }
.site-nav a.ayva { color: var(--ayva); font-weight: 600; }
.site-nav a.ayva:hover { color: var(--ayva-acik); }
@media (max-width: 720px) { .site-nav .wide-only { display: none; } }

.site-foot { border-top: 1px solid var(--cizgi); margin-top: 120px; padding: 36px 0 48px; color: var(--sessiz); font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot a { color: var(--soluk); text-decoration: none; }
.site-foot a:hover { color: var(--kagit); }
.site-foot .brand img { width: 26px; height: 26px; border-radius: 7px; }
.site-foot .brand span { font-size: 18px; }

/* ---- Forms ---------------------------------------------------------------------------------------------------- */
.field { display: block; font-weight: 600; font-size: 15px; margin: 0 0 8px; color: var(--kagit); }
.input {
  width: 100%; min-width: 0; height: 50px; padding: 0 16px;
  font: 500 17px/1 var(--text); color: var(--kagit);
  background: var(--incir-derin); border: 1.5px solid var(--cizgi); border-radius: 12px;
}
.input:focus { border-color: var(--ayva); outline: none; }
.input::placeholder { color: var(--sessiz); }
.message { min-height: 1.5em; margin: 10px 0 0; font-weight: 500; font-size: 15px; }
.message.error { color: #FF8A98; }
.message.ok { color: var(--yaprak); }

/* ---- Verified marks (same shapes as the apps) ---------------------------------------------------------------- */
.mark-glyph { display: inline-block; vertical-align: -0.12em; flex: none; }

/* ---- Legal / text pages --------------------------------------------------------------------------------------- */
.doc { max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) 0; }
.doc h1 { font-weight: 760; font-stretch: 82%; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -0.035em; margin: 24px 0 10px; }
.doc h2 { font-size: 23px; font-stretch: 100%; line-height: 1.3; letter-spacing: -0.015em; margin: 36px 0 8px; }
.doc .tarih { color: var(--sessiz); font-size: 15px; margin: 0 0 28px; }
.doc li { margin: 5px 0; }
.doc .kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 22px; margin: 22px 0; }
.doc .kart label { display: block; font-size: 15px; color: var(--soluk); margin: 14px 0 6px; }
.doc .kart input { width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid var(--cizgi); border-radius: 12px;
  background: var(--incir-derin); color: var(--kagit); font: 16px var(--text); }
.doc .kart input:focus { border-color: var(--ayva); outline: none; }
.doc .kart button { margin-top: 18px; height: 48px; padding: 0 20px; border-radius: 12px; cursor: pointer;
  font: 600 16px var(--text); background: transparent; border: 1.5px solid var(--ayva); color: var(--ayva); }
.doc .kart button.tehlike { border-color: var(--nar); color: #FF8A98; }
.doc .kart button[disabled] { opacity: .55; cursor: progress; }
.doc .not { color: var(--soluk); font-size: 15px; }