/*
  Bulgaristan'da Yaşa - site stilleri

  Bu dosya dört sayfanın tamamında kullanılır.
  Renkleri ve fontları değiştirmek için en üstteki :root bloğundaki
  değişkenleri düzenlemeniz yeterlidir.

  Bölümler (dosyada bu sırayla):
    1. Renk ve font değişkenleri, temel ayarlar
    2. Üst menü ve ana sayfa girişi (hero)
    3. Başvuru akışı kutusu
    4. Bölüm başlıkları, hizmet kartları, "Nasıl çalışıyoruz"
    5. Biz kimiz, sık sorulanlar, iletişim ve form
    6. Alt bilgi (footer)
    7. Hizmet sayfaları (emeklilik, gayrimenkul, üniversite)
    8. Mobil görünüm kuralları (@media)
*/

/* Yerleşim fikri: koyu çam yeşili giriş ve alt bilgi, aradaki bölümler açık zeminde. Girişte söz solda, başvuru yolculuğu sağda. Tek tema, her cihazda aynı görünür. */

:root {
  --deep: #113628;
  --on-deep: #eef4ee;
  --mint: #93dcb9;
  --blush: #f59aae;
  --paper: #f8f5ec;
  --surface: #ede8da;
  --ink: #14241c;
  --muted: #59645a;
  --pine: #1f5c43;
  --rose: #b92d48;
  --line: #d8d2c2;
  --head: "Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --display: "Manrope","Segoe UI",system-ui,sans-serif;
  --body: "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion:reduce) {

  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--head);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.02em;
}

p {
  margin: 0;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Koyu üst alan */

.dark {
  background: var(--deep);
  color: var(--on-deep);
}

.hero-bg {
  background: linear-gradient(90deg,rgba(17,54,40,.95) 0%,rgba(17,54,40,.84) 50%,rgba(17,54,40,.62) 100%),url(../images/hero.jpg) center/cover no-repeat var(--deep);
}

.top .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.3rem;
  text-decoration: none;
  letter-spacing: -.03em;
}

.brand span {
  color: var(--mint);
}

nav.main {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-family: var(--display);
  font-weight: 500;
  font-size: .98rem;
}

nav.main a {
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

nav.main a:hover {
  border-bottom-color: var(--mint);
}

.hero {
  padding: 48px 0 72px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(0,1fr);
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.4rem,6vw,4.3rem);
  font-weight: 800;
}

.hero h1 em {
  font-style: normal;
  color: var(--mint);
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 30em;
  margin-top: 26px;
  opacity: .96;
  font-weight: 400;
}

.sub {
  max-width: 32em;
  margin-top: 14px;
  opacity: .92;
  font-size: 1rem;
  line-height: 1.6;
}

.free {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--mint);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 999px;
  border: 2px solid var(--pine);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.btn.fill {
  background: var(--pine);
  color: var(--paper);
}

.btn.fill:hover {
  background: var(--rose);
  border-color: var(--rose);
}

.dark .btn {
  border-color: var(--mint);
}

.dark .btn.fill {
  background: var(--mint);
  color: var(--deep);
}

.dark .btn.fill:hover {
  background: var(--on-deep);
  border-color: var(--on-deep);
}

.dark .btn.line {
  color: var(--mint);
}

.dark .btn.line:hover {
  border-color: var(--on-deep);
  color: var(--on-deep);
}

/* Başvuru yolculuğu */

.journey {
  background: rgba(17,54,40,.78);
  border: 1px solid rgba(238,244,238,.22);
  border-radius: 10px;
  padding: 26px 26px 22px;
}

.journey h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 14px;
  color: var(--mint);
}

.route {
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  position: relative;
  font-family: var(--display);
}

.route::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  bottom: 22px;
  width: 4px;
  border-radius: 2px;
  background: var(--mint);
}

.route li {
  position: relative;
  padding: 9px 0;
}

.route li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--deep);
  border: 4px solid var(--mint);
}

.route b {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
}

.route small {
  display: block;
  font-family: var(--body);
  font-size: .92rem;
  opacity: .8;
  line-height: 1.45;
}

.journey p {
  font-size: .92rem;
  opacity: .7;
  margin-top: 10px;
}

/* Bölümler */

section {
  padding: 68px 0;
}

section.tint {
  background: var(--surface);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 20px 48px;
  align-items: end;
  margin-bottom: 36px;
}

.sec-head h2 {
  font-size: clamp(1.9rem,4vw,2.9rem);
  font-weight: 800;
}

.sec-head p {
  color: var(--muted);
  max-width: 36em;
}

/* Üç kart */

.cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.card {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card .ph {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.card .band {
  background: var(--deep);
  color: var(--on-deep);
  padding: 18px 24px 18px;
}

.card .no {
  font-family: var(--display);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .14em;
  color: var(--mint);
}

.card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 6px;
}

.card .in {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.card .who {
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--rose);
}

.card ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 1.03rem;
}

.card li {
  margin: 3px 0;
}

.card .foot {
  margin-top: auto;
  padding-top: 10px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.card .btn {
  padding: 11px 18px;
  font-size: .95rem;
}

.card .soon {
  font-family: var(--display);
  font-size: .85rem;
  color: var(--muted);
}

/* Süreç */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  counter-reset: s;
}

.steps li {
  counter-increment: s;
  background: var(--paper);
  padding: 26px 24px 28px;
  border-radius: 10px;
}

.steps li::before {
  content: counter(s);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--mint);
  margin-bottom: 16px;
}

.steps h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.steps p {
  color: var(--muted);
  font-size: 1.05rem;
}

.note {
  margin-top: 28px;
  padding: 18px 22px;
  border-left: 4px solid var(--rose);
  background: var(--paper);
  max-width: 46em;
}

/* Blog */

.posts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 48px;
  border-top: 2px solid var(--ink);
}

.post {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 6px;
}

.tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pine);
}

.post h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.post .soon {
  font-family: var(--display);
  font-size: .85rem;
  color: var(--muted);
}

/* Biz kimiz */

.about {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
  gap: 28px 56px;
  align-items: start;
}

.about h2 {
  font-size: clamp(2rem,4.4vw,3.2rem);
  font-weight: 800;
  color: var(--pine);
}

.eyebrow.dk {
  color: var(--rose);
}

.about-ph {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: 70% 50%;
  border-radius: 10px;
  margin-top: 28px;
}

.about-text {
  display: grid;
  gap: 16px;
  max-width: 38em;
}

.values {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.values li {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--deep);
  color: var(--mint);
}

section.ruled {
  border-top: 1px solid var(--line);
}

/* SSS */

details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  max-width: 46em;
}

details:first-of-type {
  border-top: 2px solid var(--ink);
}

summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
}

details p {
  margin-top: 10px;
  color: var(--muted);
}

/* İletişim */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: 28px;
}

form.pre {
  background: var(--paper);
  border-radius: 10px;
  padding: 28px 26px;
  display: grid;
  gap: 16px;
}

form.pre h3 {
  font-size: 1.4rem;
  font-weight: 700;
}

form.pre label {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  display: grid;
  gap: 6px;
}

form.pre input,
form.pre select,
form.pre textarea {
  font: inherit;
  font-size: 1.05rem;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}

form.pre textarea {
  min-height: 88px;
  resize: vertical;
}

form.pre .btn {
  justify-self: start;
}

form.pre small {
  color: var(--muted);
  font-size: .92rem;
}

.lines {
  display: grid;
  gap: 16px;
  align-content: start;
}

.linecard {
  background: var(--paper);
  padding: 20px 24px;
  border-radius: 10px;
  display: grid;
  gap: 4px;
}

.linecard .tag {
  color: var(--rose);
}

.linecard .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.linecard p {
  font-size: .98rem;
  color: var(--muted);
}

.linecard a.wa {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--pine);
}

footer {
  padding: 0 0 52px;
  font-size: .98rem;
}

footer::before {
  content: "";
  display: block;
  height: 5px;
  margin-bottom: 40px;
  background: linear-gradient(90deg,#ffffff 0 33.33%,#00966e 33.33% 66.66%,#d62612 66.66% 100%);
}

footer .wrap {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: 24px 48px;
}

footer p {
  opacity: .8;
}

footer strong {
  font-family: var(--display);
  font-size: 1.15rem;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: var(--display);
  align-content: start;
}

@media (max-width:900px) {

  .hero .wrap,
  .sec-head,
  footer .wrap,
  .contact-grid,
  .about {
    grid-template-columns: 1fr;
  }

  .cards,
  .steps,
  .posts {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 32px 0 52px;
  }

  .hero .wrap {
    gap: 36px;
  }

  section {
    padding: 52px 0;
  }
}

.more {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--pine);
  text-decoration: none;
  border-bottom: 2px solid var(--pine);
  padding-bottom: 1px;
}

.more:hover {
  color: var(--rose);
  border-color: var(--rose);
}

/* Hizmet sayfaları */

.page-head {
  padding: 36px 0 56px;
}

.crumb {
  font-family: var(--display);
  font-size: .9rem;
  opacity: .8;
  margin-bottom: 22px;
}

.crumb a {
  text-decoration: none;
  border-bottom: 1px solid rgba(238,244,238,.4);
}

.page-head h1 {
  font-size: clamp(2.1rem,5vw,3.5rem);
  font-weight: 800;
  max-width: 16em;
}

.page-head .lede {
  max-width: 36em;
}

.doc {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  gap: 56px;
  align-items: start;
}

.toc {
  position: sticky;
  top: 24px;
  font-family: var(--display);
  font-size: .95rem;
  display: grid;
  gap: 10px;
  border-left: 2px solid var(--line);
  padding-left: 18px;
}

.toc strong {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
}

.toc a {
  text-decoration: none;
  color: var(--muted);
}

.toc a:hover {
  color: var(--pine);
}

.prose {
  max-width: 44em;
  display: grid;
  gap: 56px;
}

.prose section {
  padding: 0;
  display: grid;
  gap: 16px;
}

.prose h2 {
  font-size: clamp(1.6rem,3.2vw,2.2rem);
  font-weight: 800;
}

.prose h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 8px;
}

.prose ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 8px;
}

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: f;
  display: grid;
  gap: 0;
}

.flow li {
  counter-increment: f;
  position: relative;
  padding: 0 0 26px 58px;
}

.flow li::before {
  content: counter(f);
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--mint);
  font-family: var(--display);
  font-weight: 800;
  display: grid;
  place-items: center;
}

.flow li::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 42px;
  bottom: 4px;
  width: 2px;
  background: var(--line);
}

.flow li:last-child {
  padding-bottom: 0;
}

.flow li:last-child::after {
  display: none;
}

.flow b {
  display: block;
  font-family: var(--head);
  font-size: 1.2rem;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  padding-top: 5px;
}

.flow span {
  color: var(--muted);
}

.callout {
  padding: 18px 22px;
  border-left: 4px solid var(--rose);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
}

.cta-band {
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 12px;
  padding: 32px 30px;
  display: grid;
  gap: 14px;
}

.cta-band h2 {
  color: var(--on-deep);
}

.cta-band p {
  opacity: .88;
}

.src {
  font-size: .9rem;
  color: var(--muted);
}

@media (max-width:900px) {

  .doc {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .toc {
    position: static;
  }
}

.page-bg {
  background-color: var(--deep);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-e {
  background-image: linear-gradient(90deg,rgba(17,54,40,.95) 0%,rgba(17,54,40,.84) 50%,rgba(17,54,40,.62) 100%),url(../images/bg-emeklilik.jpg);
}

.bg-g {
  background-image: linear-gradient(90deg,rgba(17,54,40,.95) 0%,rgba(17,54,40,.84) 50%,rgba(17,54,40,.62) 100%),url(../images/bg-gayrimenkul.jpg);
}

.bg-u {
  background-image: linear-gradient(90deg,rgba(17,54,40,.95) 0%,rgba(17,54,40,.84) 50%,rgba(17,54,40,.62) 100%),url(../images/bg-universite.jpg);
  background-position: center 30%;
}

.prose a:not(.btn) {
  color: var(--pine);
  font-weight: 500;
}

.srclist {
  font-size: 1rem;
}

.srclist li {
  overflow-wrap: anywhere;
}