/* ============ Barivo — temel ============ */

:root {
  /* tipografi — Poppins */
  --font: "Poppins", system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(1.95rem, 3.6vw, 44px);  /* iki kolonlu hero */
  --lh-h1: 1.14;
  --fs-body: clamp(1rem, 1.35vw, 20px);  /* 20px  */
  --lh-body: 1.5;                        /* 30px  */

  /* renkler */
  --accent: #455eff;          /* ana vurgu — mavi */
  --accent-hi: #6076ff;       /* hover */
  --ink: #1b1b1b;             /* koyu gri — zeminler ve metin */
  --ink-soft: #5c5c5c;        /* açık zeminde ikincil metin */
  --on-dark: #ffffff;
  --on-dark-soft: #a2a2a2;    /* koyu zeminde ikincil metin */
  --panel: #f2f2f2;
  --surface: #ffffff;
  --line: #e4e4e4;
  --radius-panel: 26px;
  --radius-card: 20px;
  --gap: 14px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--ink);
  background: var(--panel);
}

/* ============ sahne + panel ============ */

.stage { padding: 28px 28px 34px; }

.panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* ============ nav ============ */

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 999px;
  padding: 7px 7px 7px 22px;
}

.nav__logo {
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  margin-right: 22px;
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: 22px; }

.nav__links a {
  font-size: 13px;
  font-weight: 500;
  color: #cfcfcf;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav__links a:hover { color: #fff; }

.nav__cta { margin-left: 22px; }

.nav .nav__cta-mobile { display: none; }

.nav__burger {
  display: none;
  width: 38px; height: 38px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 15px; height: 1.8px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.4px) rotate(-45deg); }

/* ============ butonlar ============ */

.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

.btn--pill {
  background: var(--accent);
  color: var(--on-dark);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .18s ease;
}
.btn--pill:hover { background: var(--accent-hi); }

.btn--cta {
  gap: 12px;
  background: var(--accent);
  color: var(--on-dark);
  font-size: 16px;
  padding: 9px 9px 9px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 26px -12px rgba(69, 94, 255, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn--cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(69, 94, 255, .55);
}

.btn__badge {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.btn__badge svg { width: 15px; height: 15px; }

/* ============ hero ============ */

.hero {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  align-items: center;
  gap: 56px;
  padding: 74px 0 86px;
}

.hero__title {
  font-weight: 400;                /* Poppins Regular */
  font-size: var(--fs-h1);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;              /* satırları dengeli böl */
}

.hero__strong { font-weight: 700; }

.hero__arrow {
  width: clamp(34px, 3.8vw, 50px);
  height: auto;
  display: inline-block;
  vertical-align: baseline;
  margin-left: .12em;
  transform: translateY(-.08em);
}

.hero__lead,
.hero__sub { max-width: 52ch; }

.hero__lead { color: var(--ink);      margin: 22px 0 0; font-size: 18px;   line-height: 1.55; }
.hero__sub  { color: var(--ink-soft); margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; }

.hero .btn--cta { margin-top: 28px; font-size: 15px; padding: 8px 8px 8px 22px; }
.hero .btn__badge { width: 30px; height: 30px; }

/* --- sağdaki görsel + yüzen rozet --- */

.hero__visual { position: relative; }

.hero__photo {
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(120% 90% at 20% 0%, #e6e9ff 0%, rgba(230,233,255,0) 60%),
    linear-gradient(150deg, #dfe4ff 0%, #e9e9e9 100%);
}
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero__rozet {
  position: absolute;
  background: var(--surface);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 18px 40px -18px rgba(27, 27, 27, .34);
}

.hero__rozet--ust { top: 30px; right: -22px; }

.rozet__ust {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.rozet__deger {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 4px 0 0;
}


/* ============ showcase ============ */

.showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.showcase__mid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
}

.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 26px;
}

.card--dark { background: var(--ink); color: #fff; }

.card__label {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}

.card__note {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.card--dark .card__note { color: var(--on-dark-soft); }

.stat {
  font-size: clamp(2.4rem, 3.6vw, 3.1rem);
  font-weight: 500;
  margin: 0;
  line-height: 1;
}

/* --- hizmet etiketleri --- */

.card--services { display: flex; flex-direction: column; }

.tags {
  position: relative;
  flex: 1;
  min-height: 234px;
  margin-top: 26px;
  overflow: hidden;          /* etiketler kutunun üstünden içeri düşer */
}

.tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;

  opacity: 0;                /* konumu JS'teki fizik döngüsü veriyor */
  will-change: transform;
  transition: opacity .18s ease, box-shadow .2s ease;
}

.tags.is-live .tag { opacity: 1; }

.tags.is-live .tag:hover { box-shadow: 0 6px 18px -6px rgba(27, 27, 27, .45); }

/* animasyon kapalıysa: statik, dağınık yerleşim */
.tags.is-static .tag {
  opacity: 1;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}

.tag--dark  { background: var(--ink); color: #fff; }
.tag--light { background: #fff; color: var(--ink); border: 1px solid var(--line); }

.tag--spark {
  width: 36px; height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-dark);
  border: 3px solid #fff;
}
.tag--spark svg { width: 17px; height: 17px; }

/* --- alıntı kartı --- */

.card--quote { display: flex; flex-direction: column; }

.quote__mark {
  font-size: 46px;
  line-height: .6;
  color: var(--ink);
}

.card--quote blockquote { margin: 26px 0 0; }

.card--quote p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  margin: 0 0 16px;
}

.avatars { display: flex; margin-top: auto; padding-top: 24px; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 2px solid #fff;
  margin-left: -10px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.avatar:first-child { margin-left: 0; }
.avatar--1 { background: linear-gradient(140deg, #4d4d4d, #242424); }
.avatar--2 { background: linear-gradient(140deg, #6e6e6e, #3c3c3c); }
.avatar--3 { background: linear-gradient(140deg, #909090, #575757); }

/* ============ neden ben ============ */

.why {
  /* açılma oranı: 0 = daralmış, 1 = yerine oturmuş. script.js kaydırmayla sürer */
  --p: 0;

  /* bu bölüme özel gece paleti */
  --gece: #0d1420;
  --gece-kart: rgba(255, 255, 255, .035);
  --gece-cizgi: rgba(125, 155, 255, .16);
  --gece-metin: #9aabc7;
  --mavi: #3b6bff;
  --mavi-soft: #8fa8ff;

  /* açılınca kenar boşluğu tamamen kalkar: 28px → 0 */
  padding: 28px calc(28px * (1 - var(--p)));
}

.why__panel {
  position: relative;
  overflow: hidden;
  /* panel yalnızca ARKA PLAN kutusu: kapsayıcı (1180 - 2*28) ↔ tam genişlik.
     İçerik .why__ic'te sabit durduğu için açılırken hiçbir şey yeniden akmaz,
     dolayısıyla altındaki bölümler de kaymaz. */
  width: 100%;
  max-width: calc(1124px * (1 - var(--p)) + 100vw * var(--p));
  margin: 0 auto;
  padding: 0;
  border-radius: calc(34px * (1 - var(--p)));
  color: #fff;
  background:
    radial-gradient(62% 52% at 90% 2%, rgba(59, 107, 255, .55) 0%, rgba(59, 107, 255, .12) 42%, rgba(59, 107, 255, 0) 68%),
    radial-gradient(90% 70% at 8% 100%, rgba(59, 107, 255, .10) 0%, rgba(59, 107, 255, 0) 60%),
    var(--gece);
}

/* İçerik: genişliği yalnız ekrana bağlı, --p'den bağımsız.
   Panel açılıp kapanırken metin milimetre oynamaz, yükseklik sabit kalır. */
.why__ic {
  position: relative;
  z-index: 1;
  width: min(1012px, 100vw - 176px);
  margin: 0 auto;
  padding: 64px 0 40px;
}

/* köşeden geçen ince yay */
.why__panel::after {
  content: "";
  position: absolute;
  right: -16%;
  top: -46%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 1px solid rgba(140, 170, 255, .14);
  pointer-events: none;
}

/* --- başlık --- */

.why__head { position: relative; z-index: 1; max-width: 44ch; }

.why__ust {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mavi-soft);
  margin: 0;
}
.why__ust::after {
  content: "";
  display: block;
  width: 46px; height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--mavi);
}

.why__title {
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 26px 0 0;
}

.why__pirilti {
  width: .5em; height: .5em;
  color: var(--mavi);
  vertical-align: .55em;
  margin-left: .12em;
}

.why__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gece-metin);
  margin: 18px 0 0;
  max-width: 52ch;
}

/* --- kartlar --- */

.why__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 44px;
}

.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid var(--gece-cizgi);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.feature__ikon {
  position: relative;
  width: 100px; height: 100px;
  flex: none;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: linear-gradient(165deg, #16203a 0%, #0a1120 100%);
  border: 1px solid rgba(125, 155, 255, .18);
  box-shadow:
    0 18px 34px -22px rgba(59, 107, 255, .9),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* ikonun arkasındaki yumuşak parlama */
.feature__ikon::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 107, 255, .45), rgba(59, 107, 255, 0) 70%);
  filter: blur(7px);
}
.feature__ikon svg { position: relative; width: 56px; height: 56px; }

.feature__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 4px 11px;
  border: 1px solid rgba(90, 130, 255, .5);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #7d9bff;
}

.feature h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  margin: 12px 0 0;
}

.feature p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gece-metin);
  margin: 8px 0 0;
  max-width: 46ch;
}

/* --- alt ayraç --- */

.why__ayrac {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  color: var(--mavi);
}
.why__ayrac::before,
.why__ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 155, 255, .38), transparent);
}
.why__ayrac svg { width: 16px; height: 16px; flex: none; }

/* --- hover --- */

.feature:hover {
  transform: translateY(-3px);
  border-color: rgba(125, 155, 255, .34);
  background: linear-gradient(180deg, rgba(90, 130, 255, .12), rgba(255, 255, 255, .02));
}

@media (hover: none) {
  .feature:hover { transform: none; }
}

/* ============ hizmet kartları ============ */

.svcs { padding: 96px 0 70px; }

.svcs__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.svcs__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
  margin-bottom: 34px;
}

.overline {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.svcs__title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.14;
  margin: 0;
}

.svcs__nav { display: flex; gap: 10px; }

.rnd {
  width: 46px; height: 46px;
  border: 0; border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.rnd svg { width: 19px; height: 19px; }
.rnd:hover:not(:disabled) { transform: translateY(-2px); }
.rnd:disabled { opacity: .28; cursor: default; }

/* --- kaydırma rayı --- */

.svcs__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* kartlar kenardan taşıp "devamı var" hissi versin */
  margin: 0 -28px;
  padding: 14px 28px 34px;   /* hover'da kalkan kartın gölgesine yer */
}
.svcs__track::-webkit-scrollbar { display: none; }

/* --- kart --- */

.svc {
  flex: 0 0 clamp(252px, 24vw, 286px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--kart);
  color: var(--kart-fg);
  border-radius: 20px;
  padding: 16px;
  min-height: 268px;
}

/* koyu kartta beyaz buton, açık kartta koyu buton */
.svc--a { --kart: var(--accent); --kart-fg: #fff;       --kart-cip: rgba(255,255,255,.20); --btn: #fff;       --btn-fg: var(--ink); }
.svc--b { --kart: #e6e9ff;       --kart-fg: var(--ink); --kart-cip: rgba(27,27,27,.07);   --btn: var(--ink); --btn-fg: #fff; }
.svc--c { --kart: var(--ink);    --kart-fg: #fff;       --kart-cip: rgba(255,255,255,.13); --btn: #fff;       --btn-fg: var(--ink); }
.svc--d { --kart: #ececec;       --kart-fg: var(--ink); --kart-cip: rgba(27,27,27,.07);   --btn: var(--ink); --btn-fg: #fff; }

.svc__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.chip {
  background: var(--kart-cip);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.svc__go {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  flex: none;
  opacity: .55;
}
.svc__go svg { width: 13px; height: 13px; }

.svc__title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}

.svc__desc {
  font-size: 14px;
  line-height: 1.5;
  opacity: .72;
  margin: 10px 0 22px;
}

.svc__more {
  align-self: flex-start;
  margin-top: auto;          /* kart ne kadar uzarsa uzasın en altta kalır */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--btn);
  color: var(--btn-fg);
  border-radius: 999px;
  padding: 9px 9px 9px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap .2s ease;
}
.svc__more svg {
  width: 13px; height: 13px;
  padding: 4px;
  box-sizing: content-box;
  border-radius: 999px;
  background: var(--btn-fg);
  color: var(--btn);
}
.svc__more:hover { gap: 12px; }

/* --- kart hover --- */

.svc {
  transition: transform .28s cubic-bezier(.22, .8, .28, 1),
              box-shadow .28s ease;
}

.svc:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 40px -18px rgba(27, 27, 27, .38);
}

/* köşedeki ok kartla birlikte canlansın */
.svc__go { transition: opacity .25s ease, background .25s ease; }
.svc__go svg { transition: transform .25s ease; }
.svc:hover .svc__go { opacity: 1; background: var(--kart-cip); }
.svc:hover .svc__go svg { transform: translate(2px, -2px); }

/* etiketler biraz belirginleşsin */
.chip { transition: background .25s ease; }
.svc--a:hover .chip { background: rgba(255, 255, 255, .32); }
.svc--c:hover .chip { background: rgba(255, 255, 255, .22); }
.svc--b:hover .chip,
.svc--d:hover .chip { background: rgba(27, 27, 27, .12); }

.svc__more { transition: gap .2s ease, transform .25s ease; }
.svc:hover .svc__more { transform: translateX(3px); }

@media (hover: none) {
  .svc:hover { transform: none; box-shadow: none; }
  .svc:hover .svc__go svg { transform: none; }
}

/* ============ öne çıkan çalışmalar ============ */

.works { padding: 34px 0 110px; }

.works__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.works__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 30px;
  margin-bottom: 26px;
}

.overline--nokta { display: flex; align-items: center; gap: 10px; }
.overline--nokta::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}

.works__title {
  grid-column: 1;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}

.works__desc {
  grid-column: 1;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 0;
  max-width: 46ch;
}

/* koyu hap buton — başlığın sağında, alta hizalı */
.works__cta {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 999px;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.works__cta svg { width: 15px; height: 15px; transition: transform .25s ease; }
.works__cta:hover { background: #2c2c2c; transform: translateY(-2px); }
.works__cta:hover svg { transform: translate(2px, -2px); }

/* --- filtre çubuğu --- */

.works__filtre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.filtre {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtre::-webkit-scrollbar { display: none; }

.filtre__pil {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
  padding: 12px 22px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.filtre__pil:hover { color: var(--ink); background: #f4f4f8; }
.filtre__pil.is-aktif {
  background: linear-gradient(135deg, #7b6bff, var(--accent));
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(69, 94, 255, .95);
}

.filtre__ikon {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filtre__ikon svg { width: 20px; height: 20px; }
.filtre__ikon:hover { border-color: #cfcfd6; }
.filtre__ikon[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

/* --- liste --- */

.works__list { display: grid; gap: 18px; }

.works__bos {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

.proje {
  position: relative;
  border-radius: 26px;
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.proje[hidden] { display: none; }

/* tüm kart tıklanabilir olsun diye ok bağlantısı kartı kaplar */
.proje__go::after { content: ""; position: absolute; inset: 0; }

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: start;
  background: #e7f7ee;
  color: #1c7a45;
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.rozet i { width: 7px; height: 7px; border-radius: 999px; background: #22c55e; }

.proje__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}

.proje__meta {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 7px 0 0;
}
.proje__meta b { color: var(--accent); font-weight: 700; margin: 0 5px; }

.proje__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 46ch;
}

.proje__go {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.proje__go svg { width: 16px; height: 16px; transition: transform .25s ease; }

.proje__go--dolu {
  width: 58px; height: 58px;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
.proje__go--dolu svg { width: 19px; height: 19px; }

/* --- öne çıkan proje --- */

.proje--one {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  min-height: 430px;
  background: linear-gradient(118deg, #f7f7fa 0%, #eeecff 52%, #c6c9f7 100%);
}

.proje--one .proje__govde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 52px 24px 52px 52px;
}
.proje--one .proje__title {
  font-size: clamp(1.65rem, 2.3vw, 2.1rem);
  margin-top: 18px;
}
.proje--one .proje__desc { margin-bottom: 34px; max-width: 34ch; }
.proje--one .proje__go { margin-top: auto; }

/* --- cihaz maketleri --- */

.proje__sahne { position: relative; align-self: stretch; min-height: 360px; }

.mock {
  position: absolute;
  margin: 0;
  background: #131313;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 34px 60px -34px rgba(20, 20, 40, .55);
}

.mock--web { top: 8%; left: 17%; right: -12%; bottom: -7%; }
.mock--web .mock__bar { display: flex; gap: 5px; padding: 2px 4px 9px; }
.mock--web .mock__bar i { width: 7px; height: 7px; border-radius: 999px; background: #3d3d3d; }

.mock--tel {
  left: 1%;
  bottom: -14%;
  width: 29%;
  aspect-ratio: 9 / 18.5;
  border-radius: 26px;
  padding: 7px;
}
.mock__centik {
  width: 38%;
  height: 5px;
  border-radius: 999px;
  background: #2c2c2c;
  margin: 1px auto 6px;
}

.mock__ekran {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(158deg, #f5f2ed, #e6e0d7);
  display: grid;
  place-items: center;
}
.mock--tel .mock__ekran { border-radius: 18px; }
.mock__ekran img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.mock__ekran:has(img) .mock__yer { display: none; }

.mock__yer {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  color: #a89f92;
  text-align: center;
  padding: 0 8px;
}

/* --- sıra kartları --- */

.proje--sira {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-height: 236px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px;
}

.proje__kapak {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  align-self: stretch;
  background: linear-gradient(150deg, #f0e7e0, #dbcdc2);
  display: grid;
  place-items: center;
}
.proje__kapak--koyu { background: linear-gradient(150deg, #3a4148, #1d2226); }
.proje__kapak--koyu .mock__yer { color: #98a1a8; }
.proje__kapak--mavi { background: linear-gradient(150deg, #e3e6ff, #c7cdf5); }
.proje__kapak--mavi .mock__yer { color: #7b83c4; }
.proje__kapak img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .8, .28, 1);
}
.proje__kapak:has(img) .mock__yer { display: none; }

.proje--sira .proje__govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  column-gap: 24px;
  padding: 12px 14px 12px 26px;
}
.proje--sira .rozet { grid-column: 2; grid-row: 1; justify-self: end; }
.proje--sira .proje__title { grid-column: 1; grid-row: 1; }
.proje--sira .proje__meta { grid-column: 1; grid-row: 2; }
.proje--sira .proje__desc { grid-column: 1; grid-row: 3; }
.proje--sira .proje__go {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  justify-self: end;
}

/* --- alt şerit --- */

.birlikte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: linear-gradient(115deg, #f2f1ff, #e7e6ff);
  border: 1px solid #dedcfb;
  border-radius: 24px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.birlikte__ikon {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 22px -16px rgba(69, 94, 255, .9);
}
.birlikte__ikon svg { width: 24px; height: 24px; }
.birlikte__yazi strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
.birlikte__yazi span { font-size: 14.5px; color: var(--ink-soft); }
.birlikte__go {
  width: 54px; height: 54px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7b6bff, var(--accent));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 26px -14px rgba(69, 94, 255, .95);
}
.birlikte__go svg { width: 19px; height: 19px; transition: transform .25s ease; }

/* --- hover --- */

.proje--sira:hover { box-shadow: 0 22px 44px -30px rgba(27, 27, 27, .5); }
.proje--sira:hover .proje__kapak img { transform: scale(1.06); }
.proje:hover .proje__go {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
.proje:hover .proje__go--dolu { background: #2c2c2c; }
.proje:hover .proje__go svg { transform: translate(2px, -2px); }

.birlikte:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -30px rgba(69, 94, 255, .6); }
.birlikte:hover .birlikte__go svg { transform: translate(2px, -2px); }

@media (hover: none) {
  .proje--sira:hover { box-shadow: none; }
  .proje--sira:hover .proje__kapak img { transform: none; }
  .birlikte:hover { transform: none; box-shadow: none; }
}

/* ============ içerik & video ============ */

.vids {
  background: var(--ink);
  color: var(--on-dark);
  padding: 96px 0 104px;
}

.vids__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.vids__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px 24px;
  margin-bottom: 36px;
}

.vids .overline { color: var(--on-dark-soft); }

.vids__title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.14;
  margin: 0;
}

.vids__desc {
  grid-column: 1;
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark-soft);
  max-width: 46ch;
  margin: 14px 0 0;
}

.vids__nav {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  gap: 10px;
  align-self: end;
}

/* koyu zeminde ok butonları ters çalışır */
.rnd--ters {
  background: rgba(255, 255, 255, .12);
  color: var(--on-dark);
}
.rnd--ters:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }

/* --- ray --- */

.vids__rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0 -28px;
  padding: 4px 28px 10px;
}
.vids__rail::-webkit-scrollbar { display: none; }

/* --- video kartı --- */

.vid {
  flex: 0 0 clamp(206px, 18.5vw, 244px);
  scroll-snap-align: start;
}

.vid__frame {
  position: relative;
  aspect-ratio: 9 / 16;      /* dikey kısa video formatı */
  border-radius: 18px;
  overflow: hidden;
  background: #2a2a2a;
  display: grid;
  place-items: center;
  transition: box-shadow .3s ease;
}

.vid__el {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: transparent;   /* kaynak yoksa yer tutucu zemin görünür */
}

.vid__play {
  position: relative;
  z-index: 1;
  width: 54px; height: 54px;
  border: 0; border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .22s ease, opacity .22s ease, background .22s ease;
}
.vid__play svg { width: 20px; height: 20px; }
.vid__play .ikon-oynat  { margin-left: 2px; }   /* üçgeni optik olarak ortala */
.vid__play .ikon-durdur { display: none; }
.vid__frame:hover .vid__play { transform: scale(1.08); background: var(--accent-hi); }

/* oynarken düğme kaybolur, kartın üstüne gelince geri gelir (duraklat) */
.vid.is-oynuyor .vid__play { opacity: 0; }
.vid.is-oynuyor .vid__frame:hover .vid__play { opacity: 1; transform: none; }
.vid.is-oynuyor .vid__play .ikon-oynat  { display: none; }
.vid.is-oynuyor .vid__play .ikon-durdur { display: block; }

.vid:hover .vid__frame { box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); }

.vid__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 14px 0 0;
}

.vid__meta {
  font-size: 13px;
  color: var(--on-dark-soft);
  margin: 5px 0 0;
}

/* ============ sık sorulan sorular ============ */

.sss { padding: 100px 0 96px; }

.sss__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.9fr;
  gap: 40px 72px;
  align-items: start;
}

.sss__title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 500;
  line-height: 1.14;
  margin: 0;
}

.sss__not {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 22px;
  max-width: 30ch;
}

/* --- akordeon --- */

.sss__item { border-top: 1px solid #dcdcdc; }
.sss__item:last-child { border-bottom: 1px solid #dcdcdc; }

.sss__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 24px 0;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color .2s ease;
}
.sss__q:hover { color: var(--accent); }

/* artı → eksi */
.sss__ikon {
  position: relative;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 999px;
  background: rgba(27, 27, 27, .06);
  transition: background .25s ease;
}
.sss__ikon i {
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.8px;
  margin: -.9px 0 0 -6.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.22, .8, .28, 1);
}
.sss__ikon i:last-child { transform: rotate(90deg); }

.sss__item.is-acik .sss__ikon { background: var(--accent); color: #fff; }
.sss__item.is-acik .sss__ikon i:last-child { transform: rotate(0deg); }
.sss__item.is-acik .sss__q { color: var(--ink); }

/* grid-template-rows ile yüksekliği bilmeden yumuşak açılış */
.sss__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.22, .8, .28, 1);
}
.sss__a > div { overflow: hidden; }
.sss__item.is-acik .sss__a { grid-template-rows: 1fr; }

.sss__a p {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 60px 26px 0;
}

/* ============ blog ============ */

.blog { padding: 20px 0 110px; }

.blog__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.blog__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 30px;
  margin-bottom: 26px;
}
.blog__head .overline { grid-column: 1; }

.blog__title {
  grid-column: 1;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}

.blog__desc {
  grid-column: 1;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 0;
  max-width: 46ch;
}

.blog__all { grid-column: 1; justify-self: start; margin-top: 22px; }

/* çerçeveli "tümünü gör" bağlantısı */
.works__all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 11px 20px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.works__all svg { width: 14px; height: 14px; }
.works__all:hover { background: var(--ink); color: var(--on-dark); }

/* --- köşedeki damga --- */

.damga {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  justify-self: end;
  position: relative;
  width: 208px; height: 208px;
  border-radius: 999px;
  background: #fbeee4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.damga__isin {
  position: absolute;
  left: 14px; top: 16px;
  width: 30px; height: 30px;
  color: #f97316;
}

.damga__yazi {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  transform: rotate(-9deg);
}

/* --- etiket filtresi --- */

.blog__filtre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog__filtre::-webkit-scrollbar { display: none; }

.etiket {
  border: 0;
  background: #ebebeb;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.etiket:hover { background: #e2e2e2; color: var(--ink); }
.etiket.is-aktif { background: var(--ink); color: var(--on-dark); }

/* --- liste --- */

.blog__list { display: grid; gap: 18px; }

.blog__bos {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

.yazi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.yazi[hidden] { display: none; }

/* başlık bağlantısı tüm kartı kaplar */
.yazi__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.yazi__title a::after { content: ""; position: absolute; inset: 0; }

.yazi__kapak {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, #a2907c 0%, #6b5f52 48%, #332e28 100%);
}
.yazi__kapak--b { background: linear-gradient(140deg, #e7e3dc, #cbc4b8); }
.yazi__kapak--c { background: linear-gradient(140deg, #dfe4ff, #c3caf3); }
.yazi__kapak img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, .8, .28, 1);
}

.chip--sabit {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 2;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 999px;
}

.yazi__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
}

.yazi__ozet {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 62ch;
}

.yazi__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.yazi__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.yazi__meta svg { width: 16px; height: 16px; flex: none; }
.yazi__nokta { margin: 0 3px; }

.yazi__kaydet {
  position: relative;
  z-index: 2;
  width: 38px; height: 38px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.yazi__kaydet svg { width: 20px; height: 20px; }
.yazi__kaydet:hover { background: #f2f2f4; }
.yazi__kaydet[aria-pressed="true"] { color: var(--accent); }
.yazi__kaydet[aria-pressed="true"] svg { fill: currentColor; }

.yazi__go {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 999px;
  background: #f2f2f4;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background .25s ease, color .25s ease;
}
.yazi__go svg { width: 18px; height: 18px; transition: transform .25s ease; }
.yazi__go--beyaz { background: var(--surface); }

/* --- öne çıkan yazı --- */

.yazi--one {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
}

.yazi--one .yazi__kapak {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
}
/* fotoğrafın üstünde yazı okunsun */
.yazi--one .yazi__kapak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(75deg, rgba(22, 19, 16, .88) 0%, rgba(22, 19, 16, .55) 48%, rgba(22, 19, 16, .12) 100%);
}

.yazi__ustyazi { position: relative; z-index: 1; }

.yazi__vurgu {
  font-size: clamp(1.5rem, 2.1vw, 1.95rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}

.yazi__slogan {
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  margin: 12px 0 0;
  max-width: 30ch;
}

.yazi--one .yazi__go { margin-top: 26px; }

.yazi--one .yazi__govde {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 34px 34px 32px;
}
.yazi--one .yazi__title { font-size: 23px; }

/* --- sıra kartları --- */

.yazi--sira {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: stretch;
  min-height: 232px;
  border-radius: 24px;
  padding: 14px;
}

.yazi--sira .yazi__kapak {
  border-radius: 16px;
  align-self: stretch;
}

.yazi--sira .yazi__govde {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px 14px 28px;
}

/* --- hover --- */

.yazi:hover { box-shadow: 0 22px 46px -32px rgba(27, 27, 27, .55); }
.yazi:hover .yazi__kapak img { transform: scale(1.05); }
.yazi:hover .yazi__title a { color: var(--accent); }
.yazi:hover .yazi__go { background: var(--ink); color: var(--on-dark); }
.yazi:hover .yazi__go svg { transform: translateX(2px); }
.yazi--one:hover .yazi__title a { color: var(--accent); }

@media (hover: none) {
  .yazi:hover { box-shadow: none; }
  .yazi:hover .yazi__kapak img { transform: none; }
  .yazi:hover .yazi__title a { color: inherit; }
  .yazi:hover .yazi__go { background: #f2f2f4; color: var(--ink); }
}

/* ============ footer ============ */

.ftr {
  background: var(--ink);
  color: var(--on-dark);
  padding: 88px 0 34px;
}

.ftr__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.ftr__ust {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 44px 40px;
  padding-bottom: 56px;
}

.ftr__logo {
  display: inline-block;
  font-size: 26px;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
}

.ftr__slogan {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  max-width: 34ch;
  margin: 14px 0 26px;
}

/* --- link kolonları --- */

.ftr__kol { display: flex; flex-direction: column; align-items: flex-start; }

.ftr__kol h3 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin: 0 0 18px;
}

.ftr__kol a {
  font-size: 15px;
  color: #dcdcdc;
  text-decoration: none;
  padding: 6px 0;
  transition: color .18s ease, transform .18s ease;
}
.ftr__kol a:hover { color: var(--on-dark); transform: translateX(3px); }

/* --- alt şerit --- */

.ftr__alt {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ftr__alt p {
  font-size: 14px;
  color: var(--on-dark-soft);
  margin: 0;
}

.ftr__yukari {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #dcdcdc;
  text-decoration: none;
  transition: color .18s ease;
}
.ftr__yukari svg { width: 15px; height: 15px; transition: transform .22s ease; }
.ftr__yukari:hover { color: var(--on-dark); }
.ftr__yukari:hover svg { transform: translateY(-3px); }

/* ============ whatsapp ============ */

.wa {
  position: fixed;
  z-index: 60;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 999px;

  background: var(--ink);
  color: var(--on-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;

  box-shadow: 0 10px 30px -8px rgba(27, 27, 27, .45);
  transition: transform .25s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s ease;
}

/* ~4 saniyede bir kısa bir sallanma (dikkat çekmek için) */
@keyframes wa-salla {
  0%, 86%, 100% { transform: rotate(0deg); }
  88%  { transform: rotate(-10deg); }
  90%  { transform: rotate(8deg); }
  92%  { transform: rotate(-7deg); }
  94%  { transform: rotate(5deg); }
  96%  { transform: rotate(-3deg); }
  98%  { transform: rotate(1deg); }
}

.wa { animation: wa-salla 4s ease-in-out infinite; }

/* footer ekrana girince butonu gizle (sınıfı script.js ekler) */
.wa.is-gizli {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.92);
  pointer-events: none;
}

.wa:hover {
  animation: none;              /* sallanma dursun, hover hareketi devralsın */
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -8px rgba(27, 27, 27, .55);
}

.wa:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.wa__icon { width: 26px; height: 26px; flex: none; }

/* ============ responsive ============ */

@media (max-width: 980px) {
  .showcase { grid-template-columns: 1fr 1fr; }
  .card--quote { grid-column: 1 / -1; }

  .why__panel { border-radius: calc(30px * (1 - var(--p))); }
  .why__ic { width: min(1012px, 100vw - 120px); padding: 48px 0 34px; }
  .why__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .feature__ikon { width: 88px; height: 88px; border-radius: 24px; }
  .feature__ikon svg { width: 46px; height: 46px; }

  .proje--one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; }
  .proje--one .proje__govde { padding: 40px 20px 40px 36px; }
  .proje--sira { grid-template-columns: 260px minmax(0, 1fr); }
  .proje--sira .proje__govde { padding-left: 20px; column-gap: 16px; }

  .yazi--one .yazi__kapak { min-height: 340px; padding: 24px; }
  .yazi--one .yazi__govde { padding: 26px; }
  .yazi--sira { grid-template-columns: 240px minmax(0, 1fr); min-height: 200px; }
  .yazi--sira .yazi__govde { padding-left: 22px; }
  .damga { width: 172px; height: 172px; }
  .damga__yazi { font-size: 15px; }
}

@media (max-width: 720px) {
  .stage { padding: 12px; }
  .panel { padding: 14px 14px 18px; border-radius: 22px; }

  .nav {
    width: 100%;
    justify-content: space-between;
    padding: 7px 7px 7px 18px;
  }
  .nav__logo { margin-right: 0; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .nav__links {
    position: absolute;
    left: 0; right: 0;
    top: 62px;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-radius: 20px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a {
    padding: 13px 12px;
    font-size: 15px;
    border-radius: 12px;
  }
  .nav__links a:hover { background: rgba(255, 255, 255, .09); }
  .nav .nav__cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    font-size: 14px;
    padding: 13px 18px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 52px 0 60px;
  }
  .hero__lead, .hero__sub { max-width: none; }
  .hero .btn--cta { margin-top: 26px; }

  /* rozet dar ekranda dışarı taşmasın */
  .hero__photo { aspect-ratio: 4 / 3; }
  .hero__rozet--ust { top: 16px; right: 16px; }

  .showcase { grid-template-columns: 1fr; }
  .card--quote { grid-column: auto; }
  .tags { min-height: 234px; }

  /* mobilde yazı düşer, sade yuvarlak buton kalır */
  .wa {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .wa__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ftr { padding: 60px 0 28px; }
  .ftr__inner { padding: 0 20px; }
  .ftr__ust { grid-template-columns: 1fr 1fr; gap: 34px 24px; padding-bottom: 40px; }
  .ftr__marka { grid-column: 1 / -1; }
  .ftr__slogan { max-width: none; }

  .sss { padding: 68px 0 60px; }
  .sss__inner { padding: 0 20px; grid-template-columns: 1fr; gap: 30px; }
  .sss__not { max-width: none; }
  .sss__q { font-size: 17px; padding: 20px 0; gap: 16px; }
  .sss__a p { padding-right: 0; padding-bottom: 22px; }

  .blog { padding: 12px 0 80px; }
  .blog__inner { padding: 0 20px; }
  .blog__head { grid-template-columns: 1fr; }
  .blog__desc { font-size: 15px; max-width: 30ch; }
  .blog__all { margin-top: 18px; }
  .blog__list { gap: 14px; }

  /* damga başlığın sağ üstünde, metnin arkasında durur */
  .damga {
    position: absolute;
    right: -18px; top: -6px;
    grid-column: auto; grid-row: auto;
    width: 138px; height: 138px;
    z-index: -1;
  }
  .damga__yazi { font-size: 12.5px; line-height: 1.5; }
  .damga__isin { left: 8px; top: 10px; width: 22px; height: 22px; }

  .blog__filtre { gap: 6px; margin: 0 -20px 16px; padding: 0 20px; }
  .etiket { padding: 11px 16px; font-size: 13px; }

  .yazi { border-radius: 22px; }
  .yazi--one { grid-template-columns: 1fr; }
  .yazi--one .yazi__kapak { min-height: 0; aspect-ratio: 4 / 3.4; padding: 20px; }
  .yazi--one .yazi__go { margin-top: 18px; }
  .yazi--one .yazi__govde { padding: 20px; }
  .yazi--one .yazi__title { font-size: 19px; }

  .yazi--sira { grid-template-columns: 34% minmax(0, 1fr); min-height: 0; padding: 10px; border-radius: 20px; }
  .yazi--sira .yazi__govde { padding: 8px 2px 8px 14px; }
  .yazi__title { font-size: 17px; }
  .yazi__ozet { font-size: 13.5px; margin-top: 8px; }
  /* uzun özet kartı şişirmesin */
  .yazi--sira .yazi__ozet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .yazi__alt { margin-top: 14px; gap: 8px; flex-wrap: wrap; }
  .yazi__meta { font-size: 11.5px; gap: 4px; white-space: nowrap; }
  .yazi__meta svg { width: 13px; height: 13px; }
  .yazi__nokta { margin: 0 2px; }
  .yazi__go { width: 36px; height: 36px; margin-left: auto; }
  .yazi__go svg { width: 15px; height: 15px; }
  .yazi__kaydet { width: 34px; height: 34px; margin-left: auto; }
  .chip--sabit { font-size: 12px; padding: 6px 12px; left: 10px; top: 10px; }

  .vids { padding: 68px 0 76px; }
  .vids__inner { padding: 0 20px; }
  .vids__head { grid-template-columns: 1fr; }
  .vids__nav { grid-column: 1; grid-row: auto; }
  .vids__rail { margin: 0 -20px; padding: 4px 20px 10px; }
  .vid { flex-basis: calc(100vw - 56px); max-width: 380px; }
  .vid__frame { aspect-ratio: 4 / 5; }
  .vid__title { font-size: 16px; }

  .works { padding: 20px 0 76px; }
  .works__inner { padding: 0 20px; }
  .works__head { grid-template-columns: 1fr; }
  .works__cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 22px; }
  .works__desc { font-size: 15px; }
  .works__list { gap: 14px; }

  .works__filtre { gap: 10px; margin: 0 -20px 16px; padding: 0 20px; }
  .filtre { gap: 2px; padding: 5px; }
  .filtre__pil { padding: 10px 15px; font-size: 13px; }
  .filtre__ikon { width: 44px; height: 44px; }

  .proje--one {
    grid-template-columns: 1fr;
    min-height: 0;
    background: linear-gradient(150deg, #f7f7fa 0%, #eceaff 45%, #c9ccf8 100%);
  }
  .proje--one .proje__govde { padding: 26px 24px 24px; }
  .proje--one .proje__title { margin-top: 14px; }
  .proje--one .proje__desc { margin-bottom: 26px; }
  .proje--one .proje__go--dolu { width: 52px; height: 52px; }
  .proje__sahne { min-height: 0; height: 260px; margin-top: 4px; }
  .mock--web { top: 4%; left: 34%; right: -18%; bottom: 0; }
  .mock--tel { left: 12%; bottom: -10%; width: 38%; }

  .proje--sira { grid-template-columns: 38% minmax(0, 1fr); min-height: 0; padding: 10px; border-radius: 20px; }
  .proje--sira .proje__govde { grid-template-columns: minmax(0, 1fr); padding: 8px 6px 8px 14px; }
  .proje--sira .rozet { grid-column: 1; grid-row: 1; }
  .proje--sira .proje__title { grid-column: 1; grid-row: 2; font-size: 17px; margin-top: 7px; }
  .proje--sira .proje__meta { grid-column: 1; grid-row: 3; font-size: 12.5px; }
  .proje--sira .proje__desc { grid-column: 1; grid-row: 4; font-size: 13px; margin-top: 8px; }
  .proje--sira .proje__go {
    grid-column: 1; grid-row: 5;
    width: 40px; height: 40px;
    justify-self: end; align-self: end;
    margin-top: 10px;
  }
  .rozet { font-size: 11.5px; padding: 5px 10px; }

  .birlikte { gap: 14px; padding: 14px 16px; border-radius: 20px; }
  .birlikte__ikon { width: 46px; height: 46px; border-radius: 14px; }
  .birlikte__go { width: 46px; height: 46px; }
  .birlikte__yazi strong { font-size: 15px; }
  .birlikte__yazi span { font-size: 13px; }

  .svcs { padding: 68px 0 42px; }
  .svcs__inner { padding: 0 20px; }
  .svcs__track { margin: 0 -20px; padding: 14px 20px 34px; }
  .svcs__head { grid-template-columns: 1fr; }
  .svcs__nav { justify-content: flex-start; }
  .svc { flex-basis: 78vw; max-width: 300px; }

  /* mobilde kapsayıcıdan (20px kenar boşluğu) tam genişliğe açılır */
  .why { padding: 0 calc(20px * (1 - var(--p))); }
  .why__panel {
    max-width: none;
    border-radius: calc(28px * (1 - var(--p)));
  }
  .why__ic { width: calc(100vw - 80px); padding: 36px 0 28px; }
  .why__head { max-width: none; }
  .why__title { font-size: clamp(1.75rem, 7.6vw, 2.1rem); margin-top: 20px; }
  .why__desc { font-size: 14.5px; margin-top: 14px; }
  .why__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }

  .feature { gap: 14px; padding: 16px; border-radius: 20px; }
  .feature__ikon { width: 72px; height: 72px; border-radius: 20px; }
  .feature__ikon svg { width: 40px; height: 40px; }
  .feature__no { min-width: 34px; padding: 3px 9px; font-size: 11.5px; }
  .feature h3 { font-size: 16.5px; margin-top: 9px; }
  .feature p { font-size: 13.5px; margin-top: 6px; max-width: none; }
  .why__ayrac { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============ mobil: bölüm sabitken ray yatay kayar ============ */
/* .is-pinli sınıfını script.js ekler (yalnız küçük ekran + hareket kısıtı yoksa) */

@media (max-width: 720px) {
  .svcs.is-pinli,
  .vids.is-pinli { padding: 0; }

  .svcs.is-pinli .svcs__inner,
  .vids.is-pinli .vids__inner {
    position: sticky;
    /* yapışma noktası script.js'te ölçülür (kutu ekranda ortalanır) */
    top: var(--yapis, 0px);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* hizmetler kutusuna zoraki ekran yüksekliği verilmez: içerik kadar yer
     kaplar, üstünde/altında ölü alan kalmaz. (videolarda 100svh kalmalı —
     video karesinin yüksekliği o kutudan besleniyor.) */
  .svcs.is-pinli .svcs__inner {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 0;
  }

  .svcs.is-pinli .svcs__head { margin-bottom: 18px; }
  .vids.is-pinli .vids__head { margin-bottom: 22px; }

  .svcs.is-pinli .svcs__track,
  .vids.is-pinli .vids__rail {
    overflow-x: hidden;
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  /* sabitken kartlar İÇERİK kadar yer kaplar — kalan boşluğu doldurup
     uzamazlar, yoksa metinle buton arasında koca boşluk kalıyor.
     stretch ile hepsi en uzun kartın hizasına gelir. */
  .svcs.is-pinli .svcs__track {
    flex: 0 1 auto;
    min-height: 0;
    align-items: stretch;
    padding-top: 4px;
    padding-bottom: 8px;
  }
  .svcs.is-pinli .svc {
    height: auto;
  }

  /* videolar sabitken: her video rayın TAM genişliğini kaplar, böylece
     aynı anda ikisi görünmez; geçiş script.js'te adım adım sürülür */
  .vids.is-pinli .vids__rail {
    margin: 0;
    padding: 0;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .vids.is-pinli .vid {
    flex: 0 0 100%;
    max-width: none;
    min-height: 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* kare kalan boşluğu doldurur, 9/16 oranı genişliği belirler;
     başlık ve süre her zaman ekranda kalsın diye kare esner */
  .vids.is-pinli .vid__frame {
    flex: 0 1 auto;
    height: 100%;
    min-height: 0;
    width: auto;
    max-width: 100%;
    max-height: none;
    aspect-ratio: 9 / 16;
  }
  .vids.is-pinli .vid__title,
  .vids.is-pinli .vid__meta { align-self: stretch; text-align: center; flex: none; }
}

/* ============ mobil: "neden ben" kartları sırayla belirir ============ */

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .feature {
    transition: opacity .65s ease, transform .65s cubic-bezier(.22, .8, .28, 1);
    transition-delay: var(--gecikme, 0ms);
  }
  .feature:not(.is-gorundu) {
    opacity: 0;
    transform: translateY(28px);
  }
}


/* ============ alt sayfalar: blog listesi & yazı detayı ============ */

.nav__links a[aria-current="page"] { color: #fff; }

/* --- sayfa başlığı (panel içinde, nav'ın altında) --- */

.sayfa-bas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 40px;
  padding: 64px 0 32px;
}
.sayfa-bas .overline { grid-column: 1; }

.sayfa-bas__title {
  grid-column: 1;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
}

.sayfa-bas__desc {
  grid-column: 1;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 54ch;
}

.blog--sayfa { padding: 10px 0 100px; }

/* --- yazı başlığı --- */

.makale-bas {
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 0 0;
}

.kirinti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.kirinti a { color: inherit; text-decoration: none; transition: color .2s ease; }
.kirinti a:hover { color: var(--ink); }
.kirinti span:last-child { color: var(--ink); font-weight: 500; }

.makale-bas__etiket {
  display: inline-flex;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 7px 14px;
  border-radius: 999px;
}

.makale-bas__title {
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 18px 0 0;
}

.makale-bas__ozet {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 18px 0 0;
  max-width: 62ch;
}

.makale-bas__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.yazar { display: flex; align-items: center; gap: 12px; }
.yazar__avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
}
.yazar b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.yazar small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; }

.makale-bas__kapak {
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: 26px;
  overflow: hidden;
  margin-top: 34px;
  background: linear-gradient(140deg, #a2907c 0%, #6b5f52 48%, #332e28 100%);
  display: grid;
  place-items: center;
}
.makale-bas__kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.makale-bas__kapak .mock__yer { color: rgba(255, 255, 255, .55); }
.makale-bas__kapak:has(img) .mock__yer { display: none; }


.icindekiler h2,
.paylas__baslik {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.icindekiler ol { list-style: none; margin: 0; padding: 0; counter-reset: madde; }
.icindekiler li + li { margin-top: 2px; }
.icindekiler a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}
.icindekiler a::before {
  counter-increment: madde;
  content: counter(madde, decimal-leading-zero);
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.icindekiler a:hover { background: #f2f2f7; }
.icindekiler a.is-aktif { background: var(--ink); color: var(--on-dark); }
.icindekiler a.is-aktif::before { color: #9fb0ff; }

.paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paylas__baslik { width: 100%; margin-bottom: 4px; }

.paylas__btn {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.paylas__btn svg { width: 17px; height: 17px; }
.paylas__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.paylas__btn .ikon-onay { display: none; }
.paylas__btn.is-kopyalandi { background: var(--accent); border-color: var(--accent); color: #fff; }
.paylas__btn.is-kopyalandi .ikon-kopya { display: none; }
.paylas__btn.is-kopyalandi .ikon-onay { display: block; }
.paylas .yazi__kaydet { border-radius: 999px; }
.paylas .yazi__kaydet[aria-pressed="true"] { border-color: var(--accent); }

.makale__govde a { color: var(--accent); text-underline-offset: 3px; }

.makale__govde blockquote {
  margin: 1.6em 0;
  padding: 22px 26px;
  border-left: 3px solid var(--accent);
  background: #eef0ff;
  border-radius: 0 18px 18px 0;
  font-size: 1.06em;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.makale__govde blockquote p { margin: 0; }

.makale__govde figure { margin: 1.8em 0; }
.makale__gorsel {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, #e7e3dc, #cbc4b8);
  display: grid;
  place-items: center;
}
.makale__gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.makale__gorsel:has(img) .mock__yer { display: none; }
.makale__govde figcaption {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 10px;
}

.not {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  font-size: 15.5px;
  line-height: 1.6;
}
.not__ikon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #eef0ff;
  color: var(--accent);
  display: grid;
  place-items: center;
}
.not__ikon svg { width: 18px; height: 18px; }
.not p { margin: 0; }
.not strong { display: block; margin-bottom: 2px; }

.makale__etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2.4em;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.makale__etiketler a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: #ebebeb;
  border-radius: 999px;
  padding: 8px 14px;
  transition: background .2s ease, color .2s ease;
}
.makale__etiketler a:hover { background: var(--ink); color: var(--on-dark); }

.yazar-karti {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
}
.yazar-karti .yazar__avatar { width: 60px; height: 60px; font-size: 22px; }
.yazar-karti b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
.yazar-karti p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 6px 0 0; }
.yazar-karti .works__all { margin-top: 14px; padding: 9px 16px; font-size: 13px; }

/* --- öneriler --- */

.oneri { padding: 44px 0 30px; }

.oneri__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.oneri__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 20px;
  margin-bottom: 26px;
}
.oneri__head .overline { grid-column: 1; }
.oneri__title {
  grid-column: 1;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0;
}
.oneri__head .works__all { grid-column: 2; grid-row: 1 / 3; align-self: end; }

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

.onerik {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px 12px 18px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .3s ease, transform .3s ease;
}

.onerik__kapak {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, #f0e7e0, #dbcdc2);
}
.onerik__kapak--b { background: linear-gradient(150deg, #3a4148, #1d2226); }
.onerik__kapak--c { background: linear-gradient(150deg, #dfe4ff, #c3caf3); }
.onerik__kapak--d { background: linear-gradient(140deg, #a2907c, #6b5f52 60%, #332e28); }
.onerik__kapak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22, .8, .28, 1); }
.onerik__kapak:has(img) .mock__yer { display: none; }

.onerik__govde { display: block; padding: 16px 8px 0; }
.onerik__title {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s ease;
}
.onerik .yazi__meta { margin-top: 10px; font-size: 13.5px; }

.onerik:hover { box-shadow: 0 22px 46px -32px rgba(27, 27, 27, .5); transform: translateY(-3px); }
.onerik:hover .onerik__kapak img { transform: scale(1.05); }
.onerik:hover .onerik__title { color: var(--accent); }

/* --- alt CTA + okuma çubuğu --- */

.alt-cta { padding: 26px 0 96px; }
.alt-cta__inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.okuma-cubugu {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
}
.okuma-cubugu i { display: block; height: 100%; width: 0; background: var(--accent); }

@media (hover: none) {
  .onerik:hover { box-shadow: none; transform: none; }
  .onerik:hover .onerik__kapak img { transform: none; }
}

@media (max-width: 980px) {
  .oneri__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .sayfa-bas { grid-template-columns: 1fr; padding: 34px 0 10px; }
  .sayfa-bas__desc { font-size: 15px; max-width: 32ch; }
  .blog--sayfa { padding-top: 14px; }

  .makale-bas { padding-top: 22px; }
  .kirinti { font-size: 12.5px; margin-bottom: 18px; }
  .makale-bas__ozet { font-size: 16px; }
  .makale-bas__meta { margin-top: 20px; padding-top: 18px; }
  .makale-bas__kapak { aspect-ratio: 4 / 3; border-radius: 18px; margin-top: 24px; }

  .makale { padding: 30px 0 16px; }
  .makale__inner { padding: 0 20px; gap: 22px; }
  .makale__yan { grid-template-columns: 1fr; gap: 12px; }
  .makale__govde { font-size: 16px; line-height: 1.7; }
  .makale__govde blockquote { padding: 16px 18px; }
  .not { padding: 14px 16px; font-size: 14.5px; }
  .yazar-karti { grid-template-columns: 1fr; padding: 18px; }

  .oneri { padding: 30px 0 20px; }
  .oneri__inner { padding: 0 20px; }
  .oneri__head { grid-template-columns: 1fr; margin-bottom: 18px; }
  .oneri__head .works__all { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  .oneri__grid { grid-template-columns: 1fr; gap: 12px; }

  .alt-cta { padding: 16px 0 70px; }
  .alt-cta__inner { padding: 0 20px; }
}


/* ============ menü: kaydırınca tepeye yapışır (hep görünür) ============ */

.nav__yer { position: relative; z-index: 30; }

.nav--yuzen {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 80;
  box-shadow: 0 16px 36px -18px rgba(27, 27, 27, .55);
  transition: transform .34s cubic-bezier(.22, .8, .28, 1), box-shadow .3s ease;
}
.nav--sessiz { transition: none !important; }

/* ============ görüşme formu (tam ekran) ============ */

body.form-acik { overflow: hidden; }
body.form-acik .wa { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }

.gorusme {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 20, 26, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .32s ease;
}
.gorusme.is-acik { opacity: 1; }

.gorusme__panel {
  position: absolute;
  inset: 18px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: var(--surface);
  border-radius: 30px;
  overflow: hidden;
  transform: translateY(28px) scale(.975);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22, .8, .28, 1), opacity .4s ease;
}
.gorusme.is-acik .gorusme__panel { transform: none; opacity: 1; }

.gorusme__kapat {
  position: absolute;
  right: 18px; top: 18px;
  z-index: 2;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.gorusme__kapat svg { width: 20px; height: 20px; }
.gorusme__kapat:hover { transform: rotate(90deg); background: #2c2c2c; }

/* sol: koyu tanıtım kolonu */
.gorusme__sol {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 90% 0%, rgba(69, 94, 255, .55) 0%, rgba(69, 94, 255, 0) 60%),
    var(--ink);
  color: var(--on-dark);
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gorusme__sol .overline { color: var(--on-dark-soft); grid-column: auto; }
.gorusme__sol .overline--nokta::before { background: var(--accent-hi); }

.gorusme__title {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 10px 0 0;
}
.gorusme__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  margin: 18px 0 0;
  max-width: 40ch;
}

.gorusme__liste { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.gorusme__liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.gorusme__liste li::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.gorusme__iletisim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.gorusme__iletisim a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: none;
  background: rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 9px 15px;
  transition: background .2s ease;
}
.gorusme__iletisim a:hover { background: rgba(255, 255, 255, .2); }

/* sağ: form */
.gorusme__sag {
  position: relative;
  overflow-y: auto;
  padding: 64px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gorusme__form { display: grid; gap: 18px; max-width: 560px; width: 100%; margin: 0 auto; }
.alan-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.alan { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.alan label,
.alan legend {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
}
.alan label small { font-weight: 400; color: var(--ink-soft); }

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #f5f5f8;
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 13px 16px;
  outline: 0;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.alan textarea { resize: vertical; min-height: 110px; }
.alan input::placeholder,
.alan textarea::placeholder { color: #9a9a9a; }
.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(69, 94, 255, .14);
}
.alan input:user-invalid,
.alan select:user-invalid,
.alan textarea:user-invalid { border-color: #e5484d; }

.secim { position: relative; }
.secim select { appearance: none; padding-right: 44px; cursor: pointer; }
.secim select:invalid { color: #9a9a9a; }
.secim::after {
  content: "";
  position: absolute;
  right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.hap-grup { display: flex; flex-wrap: wrap; gap: 8px; }
.hap { position: relative; }
.hap input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hap span {
  display: inline-flex;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: #f5f5f8;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 9px 15px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hap input:checked + span { background: var(--ink); color: var(--on-dark); }
.hap input:focus-visible + span { border-color: var(--accent); }

.alan--gonder { gap: 12px; margin-top: 6px; justify-items: start; }
.gorusme__gonder { font-size: 15px; padding: 9px 9px 9px 24px; border: 0; cursor: pointer; font-family: inherit; }
.gorusme__not { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

/* alanlar sırayla belirir */
@media (prefers-reduced-motion: no-preference) {
  .gorusme.is-acik .alan {
    animation: alanGel .55s cubic-bezier(.22, .8, .28, 1) both;
    animation-delay: calc(140ms + var(--i, 0) * 60ms);
  }
  .gorusme.is-acik .gorusme__sol > * {
    animation: alanGel .6s cubic-bezier(.22, .8, .28, 1) both;
  }
  .gorusme.is-acik .gorusme__sol > :nth-child(2) { animation-delay: 80ms; }
  .gorusme.is-acik .gorusme__sol > :nth-child(3) { animation-delay: 160ms; }
  .gorusme.is-acik .gorusme__sol > :nth-child(4) { animation-delay: 240ms; }
  .gorusme.is-acik .gorusme__sol > :nth-child(5) { animation-delay: 320ms; }
}
@keyframes alanGel {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* bot tuzağı — ekranda ve okuyucuda görünmez */
.tuzak {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* form gizlenince gerçekten kaybolsun (display:grid, [hidden]'ı ezer) */
.gorusme__form[hidden] { display: none; }

/* gönderim hatası */
.gorusme__hata {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 12px;
  padding: 10px 14px;
}
.gorusme__hata[hidden] { display: none; }

/* gönder butonundaki bekleme halkası */
.gorusme__spin {
  width: 15px; height: 15px;
  margin-right: 9px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  vertical-align: -2px;
  animation: spinDon .7s linear infinite;
}
@keyframes spinDon { to { transform: rotate(360deg); } }

/* reCAPTCHA: rozet yerine yasal atıf metni (WhatsApp butonuyla çakışmasın) */
.grecaptcha-badge { visibility: hidden; }

.gorusme__captcha-not {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: .8;
}
.gorusme__captcha-not[hidden] { display: none; }
.gorusme__captcha-not a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gorusme__captcha-not a:hover { color: var(--ink); }

/* ============ teşekkür durumu ============ */

.gorusme__tesekkur {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.gorusme__tesekkur[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .gorusme__tesekkur > * {
    animation: alanGel .5s cubic-bezier(.22, .8, .28, 1) both;
  }
  .gorusme__tesekkur > :nth-child(2) { animation-delay: 70ms; }
  .gorusme__tesekkur > :nth-child(3) { animation-delay: 130ms; }
  .gorusme__tesekkur > :nth-child(4) { animation-delay: 190ms; }
  .gorusme__tesekkur > :nth-child(5) { animation-delay: 250ms; }
}

.gorusme__tik {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 26px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #157a45;
  display: grid;
  place-items: center;
}
/* dışa açılan ince halka */
.gorusme__tik::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 1.5px solid rgba(21, 122, 69, .18);
}
.gorusme__tik svg { width: 28px; height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .gorusme__tik svg path {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: tikCiz .45s cubic-bezier(.65, 0, .35, 1) .28s forwards;
  }
  .gorusme__tik::before { animation: halkaAc .6s cubic-bezier(.22, .8, .28, 1) .18s both; }
}
@keyframes tikCiz { to { stroke-dashoffset: 0; } }
@keyframes halkaAc {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}

.gorusme__tesekkur h3 {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  margin: 0;
}
.gorusme__tesekkur > p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 12px 0 0;
}

.gorusme__mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: #f5f5f8;
  font-size: 13.5px;
  max-width: 100%;
}
.gorusme__mail span { color: var(--ink-soft); flex: none; }
.gorusme__mail b {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gorusme__mail:has(b:empty) { display: none; }

.gorusme__tesekkur-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 30px;
}
.gorusme__tesekkur-alt .btn--cta {
  font-size: 15px;
  padding: 9px 9px 9px 24px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.gorusme__tesekkur-wa {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.gorusme__tesekkur-wa:hover { color: var(--ink); border-color: var(--ink); }

/* teşekkür ekranındayken sol sütun sade kalsın */
.gorusme.is-gonderildi .gorusme__sag { justify-content: center; }

/* ============ yazı gövdesi: kod ve ayıraç ============ */

.makale__govde code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: #f2f2f5;
  border-radius: 5px;
  padding: .15em .4em;
}
.makale__govde pre {
  background: #14141a;
  color: #e8e8ef;
  border-radius: 14px;
  padding: 18px 20px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.makale__govde pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.makale__govde hr {
  border: 0;
  border-top: 1px solid var(--hat, rgba(0, 0, 0, .1));
  margin: 2.4em 0;
}

/* ============ proje detay sayfası ============ */

/* Yan sütun yok: gövde ortalanır */
.makale__inner--tek { grid-template-columns: minmax(0, 760px); }

/* künye şeridi — müşteri / hizmet / yıl */
.kunye {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.kunye__oge { display: grid; gap: 3px; }
.kunye__oge span { font-size: 12.5px; color: var(--ink-soft); }
.kunye__oge b { font-size: 15px; font-weight: 600; }
.kunye__link { margin-left: auto; }

/* sonuç rakamları */
.proje-sayilar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 2.4em;
}
.proje-sayi {
  background: #f5f5f8;
  border-radius: 16px;
  padding: 20px 22px;
  display: grid;
  gap: 4px;
}
.proje-sayi b {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.proje-sayi span { font-size: 13.5px; color: var(--ink-soft); }

/* galeri */
.proje-galeri { margin-top: 2.4em; display: grid; gap: 22px; }
.proje-galeri .makale__gorsel { margin: 0; }

@media (max-width: 720px) {
  .kunye { gap: 12px 24px; }
  .kunye__link { margin-left: 0; }
  .proje-sayi { padding: 16px 18px; }
  .proje-sayi b { font-size: 26px; }
}

/* ============ blog keşif ızgarası ============ */

.kesif__ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.kesif__ust .blog__filtre { margin-bottom: 0; }
.kesif__sayac { font-size: 13.5px; color: var(--ink-soft); margin: 0; white-space: nowrap; }
.kesif__sayac b { color: var(--ink); font-weight: 600; }

.kesif {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px;
}
.kesif > * { grid-column: span 4; min-width: 0; }
.kesif .blog__bos { grid-column: 1 / -1; }

/* kart ortak ölçüleri */
.kesif .yazi { padding: 12px; border-radius: 24px; }
.kesif .yazi__kapak { border-radius: 16px; }
.kesif .yazi__title { font-size: 18px; }
.kesif .yazi__ozet { font-size: 14.5px; line-height: 1.55; margin-top: 8px; }
.kesif .yazi__alt { margin-top: auto; padding-top: 16px; }
.kesif .yazi__meta { font-size: 13px; }
.kesif .yazi__go { width: 40px; height: 40px; }
.kesif .yazi__go svg { width: 16px; height: 16px; }

/* dikey kart */
.yazi--dikey { display: flex; flex-direction: column; }
.yazi--dikey .yazi__kapak { aspect-ratio: 16 / 10; flex: none; }
.yazi--dikey .yazi__govde { display: flex; flex-direction: column; flex: 1; padding: 16px 8px 6px; }

/* yatay kart */
.yazi--yatay {
  grid-column: span 6;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 6px;
  align-items: stretch;
}
.yazi--yatay .yazi__kapak { align-self: stretch; min-height: 190px; }
.yazi--yatay .yazi__govde { display: flex; flex-direction: column; padding: 12px 10px 8px 18px; }
.yazi--genis { grid-column: 1 / -1; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); }
.yazi--genis .yazi__govde { padding: 18px 16px 12px 28px; justify-content: center; }
.yazi--genis .yazi__title { font-size: 22px; }
.yazi--genis .yazi__ozet { max-width: 60ch; }

/* büyük kart: görsel + üstüne yazı */
.yazi--buyuk {
  grid-column: span 8;
  grid-row: span 2;
  min-height: 540px;
  padding: 0;
  border: 0;
}
.yazi--buyuk .yazi__kapak {
  position: absolute;
  inset: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
}
.yazi--buyuk .yazi__kapak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 16, .05) 30%, rgba(20, 18, 16, .78) 100%);
}
.yazi--buyuk .yazi__ustyazi { position: relative; z-index: 1; max-width: 62ch; }
.yazi--buyuk .yazi__title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.15; }
.yazi--buyuk .yazi__title a { color: #fff; }
.yazi--buyuk .yazi__ozet { color: rgba(255, 255, 255, .82); font-size: 15.5px; max-width: 54ch; }
.yazi--buyuk .yazi__meta { color: rgba(255, 255, 255, .78); }
.yazi--buyuk .yazi__kaydet { color: #fff; }
.yazi--buyuk .yazi__kaydet:hover { background: rgba(255, 255, 255, .14); }
.yazi--buyuk:hover .yazi__title a { color: #fff; }

.yazi__rozet {
  position: absolute;
  right: 16px; top: 16px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 8px 13px;
}

/* vurgu kutusu */
.kesif__vurgu {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  padding: 26px 26px 24px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(69, 94, 255, .55) 0%, rgba(69, 94, 255, 0) 60%),
    var(--ink);
  color: var(--on-dark);
  min-height: 300px;
}
.kesif__tirnak {
  font-size: 64px;
  line-height: .8;
  font-weight: 600;
  color: var(--accent-hi);
}
.kesif__soz {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 14px 0 0;
}
.kesif__kaynak { font-size: 13px; color: var(--on-dark-soft); margin: 12px 0 0; }
.kesif__oner {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.kesif__oner svg { width: 15px; height: 15px; transition: transform .25s ease; }
.kesif__oner:hover svg { transform: translate(2px, -2px); }

@media (max-width: 980px) {
  .kesif > * { grid-column: span 6; }
  .yazi--buyuk { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
  .yazi--yatay { grid-column: span 6; grid-template-columns: 1fr; }
  .yazi--yatay .yazi__kapak { aspect-ratio: 16 / 10; min-height: 0; }
  .yazi--yatay .yazi__govde { padding: 16px 8px 6px; }
  .yazi--genis { grid-column: 1 / -1; }
  .yazi--genis .yazi__title { font-size: 18px; }
}

@media (max-width: 720px) {
  .kesif__ust { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px; }
  .kesif__ust .blog__filtre { margin: 0 -20px; padding: 0 20px; }
  .kesif__sayac { font-size: 12.5px; }

  .kesif { gap: 12px; }
  .kesif > * { grid-column: 1 / -1; }
  .kesif .yazi { padding: 10px; border-radius: 20px; }
  .kesif .yazi__title { font-size: 17px; }
  .kesif .yazi__ozet { font-size: 13.5px; }
  .kesif .yazi__alt { padding-top: 12px; }

  .yazi--buyuk { min-height: 0; aspect-ratio: 4 / 5; }
  .yazi--buyuk .yazi__kapak { padding: 18px; }
  .yazi--buyuk .yazi__title { font-size: 1.45rem; }
  .yazi--buyuk .yazi__ozet { font-size: 14px; }

  /* mobilde yatay kartlar kompakt: sol kapak, sağ metin */
  .yazi--yatay,
  .yazi--genis { grid-template-columns: 36% minmax(0, 1fr); gap: 0; }
  .yazi--yatay .yazi__kapak { aspect-ratio: auto; align-self: stretch; }
  .yazi--yatay .yazi__govde,
  .yazi--genis .yazi__govde { padding: 6px 4px 6px 14px; }
  .yazi--yatay .yazi__ozet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .yazi--yatay .yazi__alt { flex-wrap: wrap; gap: 8px; }
  .yazi--yatay .yazi__go { width: 36px; height: 36px; margin-left: auto; }

  .kesif__vurgu { min-height: 0; padding: 22px 20px 20px; }
  .kesif__soz { font-size: 18px; }

  /* nav: küçük CTA burger'in yanında */
  .nav { gap: 8px; }
  .nav .nav__cta {
    display: inline-flex;
    margin-left: auto;
    font-size: 12px;
    padding: 9px 13px;
  }
  .nav .nav__cta-mobile { display: none; }
  .nav--yuzen { left: 12px; right: 12px; width: auto; transform: none; }

  /* form: tam ekran, alttan kayarak gelir */
  .gorusme { background: var(--surface); }
  .gorusme__panel {
    inset: 0;
    border-radius: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    transform: translateY(6%);
  }
  .gorusme__kapat { right: 14px; top: 14px; width: 42px; height: 42px; }
  .gorusme__sol { padding: 64px 22px 26px; justify-content: flex-start; }
  .gorusme__title { font-size: 1.7rem; }
  .gorusme__desc { font-size: 14.5px; margin-top: 12px; }
  .gorusme__liste { display: none; }
  .gorusme__iletisim { margin-top: 20px; padding-top: 18px; }
  .gorusme__sag { padding: 26px 20px 40px; justify-content: flex-start; }
  .gorusme__form { gap: 14px; }
  .alan-satir { grid-template-columns: 1fr; gap: 14px; }
  .alan input, .alan select, .alan textarea { font-size: 16px; padding: 12px 14px; }
}


/* ============ kâr hesaplayıcı ============ */

.damga--arac { background: #e6ecff; }
.damga--arac .damga__isin { color: var(--accent); }

.hesap { padding: 10px 0 30px; }

.hesap__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 22px;
  align-items: start;
}
.hesap__inner--dar { display: block; margin-top: 22px; }

/* --- form --- */

.hesap__form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 28px;
  display: grid;
  gap: 26px;
}

.hesap__grup { display: grid; gap: 14px; }
.hesap__baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.hesap__baslik span {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 12px;
  display: grid;
  place-items: center;
}

/* birim rozetli giriş */
.giris { position: relative; }
.giris input { padding-right: 48px; }
.giris::after {
  content: attr(data-birim);
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  pointer-events: none;
}
.giris input[type="number"] { -moz-appearance: textfield; }
.giris input::-webkit-outer-spin-button,
.giris input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hedef-giris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 14px;
  align-items: center;
}
.hedef-giris__kaydirak {
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--dolu, 30%), #e6e6ea var(--dolu, 30%));
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
  cursor: pointer;
}
.hedef-giris__kaydirak::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: 0 4px 12px -4px rgba(69, 94, 255, .6);
  cursor: grab;
}
.hedef-giris__kaydirak::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 3px solid var(--accent);
}
.hedef-giris__kaydirak:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(69, 94, 255, .2); }

.hesap__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.hesap__ipucu { width: 100%; font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; }
.hesap__alt { justify-content: flex-start; gap: 12px; }
.hesap__hesapla { font-size: 15px; padding: 9px 9px 9px 24px; border: 0; cursor: pointer; font-family: inherit; }
.hesap__alt .works__all { padding: 11px 18px; font-size: 13.5px; cursor: pointer; background: transparent; font-family: inherit; }

/* --- sonuç --- */

.sonuc {
  position: sticky;
  top: 24px;
  scroll-margin-top: 20px;
  min-height: 420px;
  border-radius: 26px;
  background:
    radial-gradient(70% 55% at 100% 0%, rgba(69, 94, 255, .5) 0%, rgba(69, 94, 255, 0) 60%),
    var(--ink);
  color: var(--on-dark);
  padding: 30px 30px 26px;
  overflow: hidden;
}

.sonuc[hidden] { display: none; }

.sonuc__yukleniyor {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  text-align: center;
  padding: 30px;
  background: inherit;
  color: var(--on-dark-soft);
  font-size: 15px;
}
.sonuc__yukleniyor[hidden] { display: none; }
.sonuc__yukleniyor p { margin: 0; }

.sonuc__halka {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--accent-hi);
  animation: halkaDon .8s linear infinite;
}
@keyframes halkaDon { to { transform: rotate(360deg); } }

.sonuc__icerik { transition: opacity .3s ease, transform .3s ease; }
.sonuc.is-yukleniyor .sonuc__icerik { opacity: .15; transform: translateY(6px); }
.sonuc__icerik.is-yeni { animation: alanGel .5s cubic-bezier(.22, .8, .28, 1) both; }

.sonuc__ust { font-size: 13.5px; color: var(--on-dark-soft); margin: 0; }
.sonuc__buyuk {
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.sonuc__buyuk.is-eksi { color: #ff8a8a; }

.sonuc__marj { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.sonuc .rozet { background: rgba(34, 197, 94, .16); color: #7fe0a4; }
.sonuc .rozet.is-orta { background: rgba(250, 204, 21, .16); color: #f5d76e; }
.sonuc .rozet.is-orta i { background: #facc15; }
.sonuc .rozet.is-kotu { background: rgba(239, 68, 68, .18); color: #ff9a9a; }
.sonuc .rozet.is-kotu i { background: #ef4444; }
.sonuc__uyari { font-size: 12.5px; color: var(--on-dark-soft); }

.dokum {
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.dokum > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dokum dt { color: var(--on-dark-soft); }
.dokum dt small { font-size: 11.5px; opacity: .8; margin-left: 4px; }
.dokum dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dokum__kesinti dd { color: #ffb4b4; }
.dokum__kesinti dd::before { content: "− "; }
.dokum__toplam { border-bottom: 0 !important; margin-top: 4px; }
.dokum__toplam dt { color: var(--on-dark); font-weight: 600; }
.dokum__toplam dd { font-weight: 600; font-size: 16px; }

.hedef {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
}
.hedef__ust { font-size: 13.5px; color: var(--on-dark-soft); margin: 0; }
.hedef__ust b { color: var(--on-dark); }
.hedef__fiyat {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 6px 0 0;
  color: #9fb0ff;
  font-variant-numeric: tabular-nums;
}
.hedef__not { font-size: 13px; color: var(--on-dark-soft); margin: 8px 0 0; }
.hedef__not b { color: var(--on-dark); }

.paylas--sonuc {
  margin-top: 22px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  padding: 18px 0 0;
}
.paylas--sonuc .paylas__baslik { color: var(--on-dark-soft); }
.paylas--sonuc .paylas__btn { border-color: rgba(255, 255, 255, .2); color: var(--on-dark); }
.paylas--sonuc .paylas__btn:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.paylas__not { width: 100%; font-size: 12px; color: var(--on-dark-soft); margin: 6px 0 0; }

/* form hatası */
.hesap__hata {
  width: 100%;
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #c0392b;
}
.hesap__hata[hidden] { display: none; }

/* değerler değişince çıkan "yeniden hesapla" notu */
.hesap__hata--bilgi {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a6100;
  background: #fff6d8;
  border-radius: 12px;
  padding: 10px 14px;
}
.hesap__hata--bilgi::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: #f2b705 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.hesap__hata--bilgi b { color: #6b4b00; }

/* --- hesaplamadan önce: masaüstünde tanıtım paneli --- */

.onizleme {
  position: sticky;
  top: 24px;
  border-radius: 26px;
  padding: 30px;
  background: linear-gradient(150deg, #f7f7fa 0%, #eeecff 55%, #dfe0fb 100%);
  border: 1px solid #e2e2ee;
}
.onizleme[hidden] { display: none; }

.onizleme__ust {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.onizleme__title {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 12px 0 0;
}

.onizleme__liste {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.onizleme__liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(27, 27, 40, .06);
  border-radius: 16px;
  padding: 14px 16px;
}
.onizleme__no {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  background: #e6e9ff;
  border-radius: 999px;
  padding: 5px 9px;
}
.onizleme__liste b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
}
.onizleme__liste span span,
.onizleme__liste li > span:last-child {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.onizleme__alt {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.onizleme__alt svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.onizleme__alt b { color: var(--ink); font-weight: 600; }

/* sonuç bölümleri */
.sonuc__bolum + .sonuc__bolum {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.sonuc__baslik {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
}
.sonuc__baslik span {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.sonuc__baslik b { color: #9fb0ff; font-weight: 600; }

.hedef__dokum {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.hedef__aciklama { font-size: 13px; color: var(--on-dark-soft); margin: 0 0 6px; }
.dokum--kucuk { margin-top: 0; gap: 4px; font-size: 13.5px; }
.dokum--kucuk > div { padding: 6px 0; }
.dokum--kucuk .dokum__toplam dd { font-size: 15px; }
.hedef__kalan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(34, 197, 94, .14);
  font-size: 13.5px;
  color: #c8f0d6;
}
.hedef__kalan b { font-size: 20px; color: #7fe0a4; font-variant-numeric: tabular-nums; }
.hedef__kalan small { font-size: 12.5px; color: #9fd9b4; }
.hedef__kiyas { font-size: 12.5px; color: var(--on-dark-soft); margin: 10px 0 0; }
.hedef__kiyas:empty { display: none; }
.sonuc__bolum--hedef.is-imkansiz .hedef__fiyat { color: #ff9a9a; font-size: 20px; }

/* --- indirim / kampanya senaryoları --- */

.senaryo {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.senaryo__satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: 14px;
}
.senaryo__ikon {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.senaryo__ikon svg { width: 12px; height: 12px; }
.senaryo__satir.is-iyi .senaryo__ikon { background: rgba(34, 197, 94, .2); color: #7fe0a4; }
.senaryo__satir.is-orta .senaryo__ikon { background: rgba(250, 204, 21, .2); color: #f5d76e; }
.senaryo__satir.is-kotu .senaryo__ikon { background: rgba(239, 68, 68, .22); color: #ff9a9a; }
.senaryo__metin { line-height: 1.35; }
.senaryo__deger {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.senaryo__satir.is-kotu .senaryo__deger { color: #ff9a9a; }
.senaryo__marj { display: block; font-size: 11.5px; font-weight: 400; color: var(--on-dark-soft); }

.senaryo__ara {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  margin: 22px 0 0;
}

/* --- kampanya önerisi --- */

.kampanya__btn {
  position: relative;
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--on-dark);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 22px;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.kampanya__btn:hover { transform: translateY(-2px); }
.kampanya__btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.kampanya__btn:hover svg { transform: translateX(3px); }
.kampanya__halka {
  display: none;
  width: 17px; height: 17px;
  border-radius: 999px;
  border: 2.5px solid rgba(27, 27, 27, .22);
  border-top-color: var(--ink);
  animation: halkaDon .8s linear infinite;
}
.kampanya__btn.is-calisiyor { pointer-events: none; opacity: .85; }
.kampanya__btn.is-calisiyor .kampanya__halka { display: block; }
.kampanya__btn.is-calisiyor .kampanya__ok { display: none; }

.kampanya {
  margin-top: 14px;
  border-radius: 20px;
  padding: 22px;
  background: linear-gradient(140deg, rgba(69, 94, 255, .38) 0%, rgba(69, 94, 255, .14) 60%, rgba(255, 255, 255, .06) 100%);
  border: 1px solid rgba(159, 176, 255, .35);
  animation: alanGel .5s cubic-bezier(.22, .8, .28, 1) both;
}
.kampanya[hidden] { display: none; }
.kampanya__ust {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b9c4ff;
  margin: 0;
}
.kampanya__baslik {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 8px 0 0;
}
.kampanya__not { font-size: 13.5px; line-height: 1.5; color: var(--on-dark-soft); margin: 10px 0 0; }

.kampanya__metrikler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.kampanya__metrikler div {
  background: rgba(0, 0, 0, .22);
  border-radius: 14px;
  padding: 13px 14px;
}
.kampanya__metrikler span {
  display: block;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--on-dark-soft);
  margin-bottom: 6px;
}
.kampanya__metrikler b {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.kampanya--yok .kampanya__metrikler,
.kampanya--yok .kampanya__taban { display: none; }

.kampanya__taban { font-size: 12px; color: var(--on-dark-soft); margin: 14px 0 0; }
.kampanya__taban b { color: var(--on-dark); }

/* açıklama */
.nasil {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 6px 22px;
}
.nasil summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nasil summary::-webkit-details-marker { display: none; }
.nasil summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.nasil[open] summary::after { transform: rotate(-135deg); }
.nasil ul { margin: 0 0 16px; padding-left: 1.2em; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.nasil li + li { margin-top: 6px; }
.nasil b { color: var(--ink); font-weight: 600; }

/* --- ana sayfa: araç tanıtım bileşeni --- */

/* Arka plan "neden ben" bölümü gibi kenardan kenara; içerik yine 1180px'te.
   İç boşluk: 28px kenar payı + (ekran - 1180) / 2 */
.arac { padding: 20px 0 30px; }
.arac__kart {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 30px;
  border-radius: 0;
  padding: 56px max(28px, calc((100% - 1124px) / 2));
  background: linear-gradient(118deg, #f7f7fa 0%, #eeecff 52%, #c6c9f7 100%);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .3s ease, transform .3s ease;
}
.arac__kart:hover { box-shadow: 0 30px 60px -36px rgba(69, 94, 255, .6); }
.arac__title {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 14px 0 0;
}
.arac__desc { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; max-width: 48ch; }
.arac__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s ease;
}
.arac__btn svg { width: 15px; height: 15px; transition: transform .25s ease; }
.arac__kart:hover .arac__btn { background: #2c2c2c; }
.arac__kart:hover .arac__btn svg { transform: translate(2px, -2px); }

.arac__onizleme { display: flex; justify-content: flex-end; }
.arac__kutu {
  width: min(100%, 360px);
  background: var(--surface);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: 0 30px 60px -34px rgba(27, 27, 40, .5);
  display: grid;
  gap: 8px;
  transform: rotate(-2deg);
  transition: transform .35s cubic-bezier(.22, .8, .28, 1);
}
.arac__kart:hover .arac__kutu { transform: rotate(0deg) translateY(-4px); }
.arac__etiket { font-size: 12.5px; color: var(--ink-soft); }
.arac__deger { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.arac__cizgi { height: 1px; background: var(--line); margin: 8px 0 4px; }
.arac__satir,
.arac__net { display: flex; justify-content: space-between; font-size: 13.5px; }
.arac__satir i { font-style: normal; color: var(--ink-soft); }
.arac__satir b { font-weight: 500; color: #c0392b; }
.arac__net { margin-top: 8px; padding-top: 10px; border-top: 1.5px solid var(--ink); font-weight: 600; }
.arac__net i { font-style: normal; }
.arac__net b { color: #1c7a45; }

@media (max-width: 980px) {
  .hesap__inner { grid-template-columns: 1fr; }
  .sonuc { position: relative; top: auto; min-height: 0; }
  .onizleme { position: relative; top: auto; }
  .arac__kart { grid-template-columns: 1fr; padding: 34px 30px; }
  .arac__onizleme { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .hesap__inner { padding: 0 20px; gap: 14px; }
  /* mobilde hesaplamadan önce hiçbir şey görünmesin */
  .onizleme { display: none; }

  /* sonuç kartı ekrana girerken tam genişliğe açılır (--p script.js'ten) */
  .sonuc {
    --p: 1;
    margin: 0 -20px;
    border-radius: calc(22px * (1 - var(--p)));
    transform: scale(calc(.9 + .1 * var(--p)));
    transform-origin: 50% 0;
    will-change: transform;
  }
  .hesap__form { padding: 20px 16px; gap: 20px; border-radius: 22px; }
  .alan-satir { grid-template-columns: 1fr; gap: 14px; }
  .hedef-giris { grid-template-columns: minmax(0, 1fr) 104px; }
  .sonuc { padding: 24px 18px 20px; }  /* köşe yarıçapı --p ile yukarıda ayarlanıyor */
  .sonuc__buyuk { font-size: 2.3rem; }
  .senaryo__satir { padding: 10px 12px; font-size: 13.5px; gap: 10px; }
  .kampanya { padding: 18px; }
  .kampanya__metrikler { grid-template-columns: 1fr; gap: 8px; }
  .kampanya__metrikler div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 13px; }
  .kampanya__metrikler span { margin: 0; }
  .kampanya__metrikler b { font-size: 17px; }
  .dokum { font-size: 13.5px; }
  .hedef__fiyat { font-size: 26px; }
  .sonuc { scroll-margin-top: 12px; }
  .hesap__alt .btn--cta { width: 100%; justify-content: space-between; }
  .hesap__inner--dar { margin-top: 14px; }

  .arac { padding: 10px 0 20px; }
  .arac__kart { padding: 30px 20px 34px; border-radius: 0; gap: 22px; }
  .arac__desc { font-size: 14.5px; }
  .arac__btn { margin-top: 20px; padding: 12px 18px; font-size: 14px; }
  .arac__kutu { transform: none; padding: 18px 18px; }
  .arac__deger { font-size: 26px; }
}

/* ============ önizleme şeridi ============
   Panelden "Önizle" ile açılan, henüz yayında olmayan yazı/proje sayfalarında
   görünür. Ziyaretçi bu şeridi hiçbir zaman görmez. */

.onizleme-serit {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 120;
  max-width: min(560px, calc(100vw - 32px));
  background: #1a1a1a;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  text-align: center;
}

@media (max-width: 640px) {
  .onizleme-serit { border-radius: 14px; bottom: 12px; padding: 10px 14px; font-size: 13px; }
}

/* ==========================================================
   İÇERİK BİLEŞENLERİ
   Yazının arasına panelden eklenen video / galeri / buton / vurgu.
   ========================================================== */

.icerik-video { margin: 2.2em 0; }

/* Shorts / dikey video: ekrani kaplamasin, ortada dursun */
.icerik-video--dikey .icerik-video__cerceve {
  aspect-ratio: 9 / 16;
  max-width: 340px;
  margin: 0 auto;
}

.icerik-video__cerceve {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #101010;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
}

.icerik-video__cerceve iframe,
.icerik-video__cerceve video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.icerik-galeri {
  display: grid;
  gap: 12px;
  margin: 2.2em 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.icerik-galeri[data-sutun="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icerik-galeri[data-sutun="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icerik-galeri figure { margin: 0; }
.icerik-galeri img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: var(--surface-2, #f4f4f4);
}
.icerik-galeri figcaption {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 7px;
  text-align: center;
}

.icerik-buton { margin: 2em 0; }
.icerik-buton .dugme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform .16s, background .16s;
}
.icerik-buton .dugme:hover { background: var(--accent); transform: translateY(-1px); }
.icerik-buton .dugme--ikincil {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.icerik-buton .dugme--ikincil:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

.icerik-vurgu {
  margin: 2.2em 0;
  padding: 22px 26px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(69, 94, 255, .07), rgba(69, 94, 255, .03));
  border: 1px solid rgba(69, 94, 255, .18);
}
.icerik-vurgu h4 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--ink);
}
.icerik-vurgu p { margin: 0; }
.icerik-vurgu p + p { margin-top: .7em; }

@media (max-width: 620px) {
  .icerik-galeri,
  .icerik-galeri[data-sutun="3"],
  .icerik-galeri[data-sutun="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .icerik-video__cerceve { border-radius: 14px; }
  .icerik-vurgu { padding: 18px 18px; border-radius: 16px; }
}

/* ==========================================================
   YAZI SAYFASI — kategori, yazar kartı, alt paylaşım
   ========================================================== */

/* Kategori rozeti artık bağlantı: tıklayınca o kategorinin listesine gider */
a.makale-bas__etiket { text-decoration: none; transition: background .15s, color .15s; }
a.makale-bas__etiket:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

/* --- yazı sonu: yazar kartı --- */
.yazar-kart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 48px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.yazar-kart__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
}
.yazar-kart__ad { margin: 0 0 2px; font-size: 1rem; font-weight: 650; color: var(--ink); }
.yazar-kart__rol { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.yazar-kart__yazi { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* --- yazı sonu: paylaşım şeridi --- */
.alt-paylas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
}
.alt-paylas__yazi {
  flex: 1;
  min-width: 180px;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
}
/* Govde icindeki baglanti rengini devralmasin: ikonlar notr kalsin */
.alt-paylas .paylas__btn { color: var(--ink); }
.alt-paylas .paylas__btn:hover { color: var(--on-dark); }

/* --- kategori şeridi (yazı altı) --- */
.makale-kategori {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.makale-kategori .etiket { color: var(--ink); text-decoration: none; }
.makale-kategori .etiket:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

@media (max-width: 620px) {
  .yazar-kart { padding: 20px; gap: 14px; border-radius: 18px; }
  .yazar-kart__avatar { width: 44px; height: 44px; font-size: 17px; }
  .alt-paylas { padding: 15px 16px; border-radius: 16px; }
}


/* ==========================================================
   İÇERİK BÖLÜMLERİ — her sayfada kullanılabilir
   (Hakkımda için tasarlandı, ana sayfada da çalışır)
   ========================================================== */

/* --- metin + görsel --- */
.mg { padding: 84px 0; }
.mg__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.mg--sol .mg__yazi { order: 2; }
.mg__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 650; line-height: 1.12; letter-spacing: -.02em; margin: 14px 0 0; color: var(--ink); }
.mg__govde { margin-top: 18px; font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); }
.mg__govde p + p { margin-top: 1em; }
.mg__liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.mg__liste li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--ink); }
.mg__liste li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.mg__btn { margin-top: 28px; }
.mg__gorsel { margin: 0; }
.mg__gorsel img { width: 100%; border-radius: 26px; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.mg__gorsel figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* --- zaman çizelgesi --- */
.zc { padding: 84px 0; }
.zc__inner { max-width: 900px; margin: 0 auto; padding: 0 28px; }
.zc__bas { margin-bottom: 40px; }
.zc__title { font-size: clamp(26px, 3vw, 36px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 0; color: var(--ink); }
.zc__desc { margin: 14px 0 0; font-size: 16.5px; color: var(--ink-soft); max-width: 60ch; }
.zc__liste { list-style: none; margin: 0; padding: 0; position: relative; }
.zc__liste::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.zc__oge { position: relative; padding: 0 0 34px 40px; }
.zc__oge:last-child { padding-bottom: 0; }
.zc__oge::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg, #f4f4f2);
}
.zc__yil { display: block; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.zc__ic h3 { margin: 6px 0 0; font-size: 19px; font-weight: 650; color: var(--ink); }
.zc__ic p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); }

/* --- değerler --- */
.dgr { padding: 84px 0; }
.dgr__inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.dgr__bas { max-width: 62ch; margin-bottom: 40px; }
.dgr__title { font-size: clamp(26px, 3vw, 36px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; margin: 14px 0 0; color: var(--ink); }
.dgr__desc { margin: 14px 0 0; font-size: 16.5px; color: var(--ink-soft); }
.dgr__grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dgr__grid[data-sutun="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dgr__grid[data-sutun="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dgr__kart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 24px;
}
.dgr__ikon { display: block; width: 44px; height: 44px; margin-bottom: 16px; }
.dgr__ikon svg { width: 100%; height: 100%; }
.dgr__kart h3 { margin: 0; font-size: 18px; font-weight: 650; color: var(--ink); }
.dgr__kart p { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

/* --- sayılar --- */
.syl { padding: 64px 0; }
.syl__inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.syl__title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 650; margin: 0 0 30px; color: var(--ink); }
.syl__grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.syl__oge {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
}
.syl__oge dt { font-size: clamp(30px, 3.6vw, 44px); font-weight: 650; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.syl__oge dd { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); }

/* --- alıntı --- */
.alt { padding: 72px 0; }
.alt__inner { max-width: 840px; margin: 0 auto; padding: 0 28px; text-align: center; }
.alt__yazi {
  margin: 0;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.4;
  font-weight: 550;
  letter-spacing: -.015em;
  color: var(--ink);
}
.alt__yazi::before { content: '“'; }
.alt__yazi::after { content: '”'; }
.alt__kim { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; text-align: left; }
.alt__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.alt__avatar--harf { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 600; font-size: 17px; }
.alt__kim b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.alt__kim small { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }

/* --- logo şeridi --- */
.lgo { padding: 56px 0; }
.lgo__inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; text-align: center; }
.lgo__title { margin: 0 0 26px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lgo__sira { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px 46px; }
.lgo__oge { display: block; }
.lgo__oge img { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.lgo--gri .lgo__oge img { filter: grayscale(1); opacity: .62; transition: filter .2s, opacity .2s; }
.lgo--gri .lgo__oge:hover img { filter: none; opacity: 1; }

/* --- çağrı bandı --- */
.cgr { padding: 24px 0 84px; }
.cgr__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 48px;
  border-radius: 30px;
  background: var(--ink);
  color: var(--on-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}
.cgr__yazi { flex: 1; min-width: 260px; }
.cgr__title { margin: 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
.cgr__desc { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 52ch; }
.cgr__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cgr__ikinci { display: inline-flex; align-items: center; gap: 7px; color: var(--on-dark); font-weight: 550; font-size: 15px; text-decoration: none; opacity: .85; }
.cgr__ikinci:hover { opacity: 1; }
.cgr__ikinci svg { width: 15px; height: 15px; }

/* --- dar ekran --- */
@media (max-width: 900px) {
  .mg { padding: 56px 0; }
  .mg__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mg--sol .mg__yazi { order: 0; }
  .mg__gorsel img { aspect-ratio: 4 / 3; border-radius: 20px; }
  .dgr__grid,
  .dgr__grid[data-sutun="2"],
  .dgr__grid[data-sutun="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zc, .dgr { padding: 56px 0; }
  .cgr__inner { padding: 32px 26px; border-radius: 24px; }
}

@media (max-width: 620px) {
  .mg__inner, .zc__inner, .dgr__inner, .syl__inner, .alt__inner, .lgo__inner { padding: 0 18px; }
  .cgr { padding: 12px 0 56px; }
  .cgr__inner { margin: 0 18px; padding: 26px 22px; }
  .dgr__grid,
  .dgr__grid[data-sutun="2"],
  .dgr__grid[data-sutun="4"] { grid-template-columns: minmax(0, 1fr); }
  .dgr__kart { padding: 22px 20px; border-radius: 18px; }
  .syl__oge { padding: 20px 18px; }
  .lgo__sira { gap: 24px 30px; }
  .lgo__oge img { height: 26px; }
}

/* ==========================================================
   KAYAN ŞERİT

   Tam genişlikte, kesintisiz akan bant. İki özdeş grup yan yana
   durur; ray %50 kaydırılınca ikinci grup birincinin yerine geçer
   ve döngü dikişsiz görünür.

   Renk, punto, yükseklik, hız gibi her şey panelden gelen CSS
   değişkenleriyle ayarlanır.
   ========================================================== */

.serit {
  --serit-zemin: #2ec5c5;
  --serit-renk: #ffffff;
  --serit-punto: 34px;
  --serit-bosluk: 26px;
  --serit-aralik: 34px;
  --serit-ikon: 46px;
  --serit-kalinlik: 800;
  --serit-harf: 0em;
  --serit-sure: 30s;
  --serit-egim: 0deg;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--serit-zemin);
  color: var(--serit-renk);
  padding: var(--serit-bosluk) 0;
  /* Kendi yığma bağlamı: eğimli şerit komşularının üstüne binmesin */
  isolation: isolate;
}

/* Eğik şerit: taşan köşeleri kapsayıcı keser, dikey boşluk komşusuyla
   çakışmasını önler. Eğim büyüdükçe gereken boşluk da büyür. */
.serit-kap {
  overflow: hidden;
  padding: 28px 0;
}
.serit--egik {
  transform: rotate(var(--serit-egim));
  /* Eğilince kenarlarda boşluk kalmasın diye biraz taşır */
  width: 108%;
  margin-left: -4%;
}

.serit__ray {
  display: flex;
  width: max-content;
  animation: serit-kay var(--serit-sure) linear infinite;
  will-change: transform;
}

.serit--sag .serit__ray { animation-direction: reverse; }

/* Üzerine gelince dursun */
.serit--dur:hover .serit__ray,
.serit--dur:focus-within .serit__ray { animation-play-state: paused; }

@keyframes serit-kay {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.serit__grup {
  display: flex;
  align-items: center;
  flex: none;
}

.serit__oge {
  display: inline-flex;
  align-items: center;
  gap: var(--serit-aralik);
  padding-right: var(--serit-aralik);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.serit__yazi {
  font-size: var(--serit-punto);
  font-weight: var(--serit-kalinlik);
  letter-spacing: var(--serit-harf);
  line-height: 1.1;
}

.serit--buyuk .serit__yazi { text-transform: uppercase; }

.serit__ikon {
  height: var(--serit-ikon);
  width: auto;
  max-width: calc(var(--serit-ikon) * 2.5);
  object-fit: contain;
  flex: none;
}

.serit__ayrac {
  font-size: calc(var(--serit-punto) * .7);
  font-weight: var(--serit-kalinlik);
  opacity: .55;
}

/* Bağlantılı öğeler tıklanabilir olduğunu belli etsin */
.serit__oge--bag { transition: opacity .18s; }
.serit--dur:hover .serit__oge--bag { opacity: .55; }
.serit--dur:hover .serit__oge--bag:hover { opacity: 1; }
.serit__oge--bag:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

/* Hareket azaltma tercihine saygı: akış durur, içerik okunur kalır */
@media (prefers-reduced-motion: reduce) {
  .serit__ray { animation: none; }
  .serit__grup:nth-child(2) { display: none; }
  .serit__ray { width: 100%; overflow-x: auto; }
}

@media (max-width: 700px) {
  .serit { --serit-punto: clamp(20px, 7vw, var(--serit-punto)); }
  .serit__ikon { height: calc(var(--serit-ikon) * .72); }
}

/* ==========================================================
   YAZI SAYFASI

   Masaüstü: solda yazı (720px), sağda sabit duran yardımcı sütun
   (okuma ilerlemesi, içindekiler, paylaş, tanıtım, benzer yazılar).
   Mobil: tek sütun; yardımcı sütunun parçaları içeriğin altına,
   okumayı bölmeyen bir sıraya iner.
   ========================================================== */

.makale { padding: 40px 0 8px; }

.makale__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

.makale__yan {
  position: sticky;
  top: 22px;
  align-self: start;
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Ortak kart görünümü */
.ilerleme,
.icindekiler,
.paylas,
.benzer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 18px 16px;
}

/* --- okuma ilerlemesi --- */
.ilerleme__bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink);
  margin-bottom: 10px;
}
.ilerleme__bas b { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ilerleme__ray {
  height: 6px;
  border-radius: 999px;
  background: #eceaf6;
  overflow: hidden;
}
.ilerleme__ray i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #6f86ff);
  transition: width .12s linear;
}

/* --- içindekiler --- */
.icindekiler h2,
.paylas__baslik,
.benzer__bas h2 {
  display: block;
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: none;
}
.icindekiler > summary { display: none; }
.icindekiler > summary::-webkit-details-marker { display: none; }
.icindekiler > ol { display: block; list-style: none; margin: 0; padding: 0; counter-reset: madde; }
.icindekiler li + li { margin-top: 2px; }
.icindekiler a {
  display: block;
  padding: 7px 10px 7px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
.icindekiler a:hover { background: #f5f5f8; color: var(--ink); }
.icindekiler a.is-aktif {
  border-left-color: var(--accent);
  background: #f2f4ff;
  color: var(--accent);
  font-weight: 600;
}

.paylas__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.paylas__btn:hover { border-color: var(--accent); background: #f7f8ff; color: var(--accent); transform: translateY(-1px); }
.paylas__ikon { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.paylas__ikon svg { width: 20px; height: 20px; }
.paylas__ad { font-size: 11.5px; font-weight: 550; line-height: 1.2; text-align: center; }

/* kopyalandı geri bildirimi */
.paylas__onay { position: absolute; inset: 0; display: none; place-items: center; }
.paylas__btn.is-kopyalandi { border-color: #29845a; background: #eefaf3; color: #29845a; }
.paylas__btn.is-kopyalandi .paylas__ikon > svg:first-child { display: none; }
.paylas__btn.is-kopyalandi .paylas__onay { display: grid; }


/* --- yan tanıtım kutusu --- */
.yan-cta {
  border-radius: 20px;
  padding: 22px 20px;
  background: linear-gradient(160deg, #eef1ff 0%, #f6f4ff 55%, #fdf3ff 100%);
  border: 1px solid rgba(69, 94, 255, .16);
}
.yan-cta__rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 12px;
}
.yan-cta__rozet svg { width: 16px; height: 16px; }
.yan-cta__title { margin: 0; font-size: 19px; font-weight: 650; line-height: 1.28; letter-spacing: -.015em; color: var(--ink); }
.yan-cta__desc { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.yan-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 18px;
  border-radius: 12px;
  background: #131a3a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.yan-cta__btn:hover { background: var(--accent); transform: translateY(-1px); }
.yan-cta__btn svg { width: 16px; height: 16px; }

/* --- benzer içerikler --- */
.benzer__bas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.benzer__bas h2 { margin: 0; }
.benzer__bas a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 550; color: var(--accent); text-decoration: none;
}
.benzer__bas a svg { width: 14px; height: 14px; }
.benzer__liste { display: grid; gap: 4px; margin-top: 12px; }
.benzer__oge {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  margin: 0 -10px;
  border-radius: 14px;
  text-decoration: none;
  transition: background .15s;
}
.benzer__oge:hover { background: #f6f6f9; }
.benzer__kapak {
  width: 64px; height: 58px;
  border-radius: 11px;
  overflow: hidden;
  background: #eceaf6;
  display: block;
}
.benzer__kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benzer__govde { min-width: 0; display: block; }
.benzer__govde .chip { margin-bottom: 5px; }
.benzer__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
}
.benzer__sure {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 12.5px; color: var(--ink-soft);
}
.benzer__sure svg { width: 14px; height: 14px; }
.benzer__ok { color: var(--ink-soft); opacity: .5; }
.benzer__ok svg { width: 16px; height: 16px; }
.benzer__oge:hover .benzer__ok { opacity: 1; color: var(--accent); }

/* --- yazı sonu: ağ ikonları doğrudan açık, ortada tek satır --- */
.yazi-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 42px;
}
.yazi-eylem__etiket {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.yazi-eylem__menu {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.yazi-eylem__menu .paylas__btn {
  flex-direction: row;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 999px;
  border-color: transparent;
}
.yazi-eylem__menu .paylas__btn:hover { transform: none; border-color: transparent; }
.yazi-eylem__menu .paylas__ikon svg { width: 18px; height: 18px; }

/* --- yazar kartı --- */
.yazar-kart {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px;
  margin-top: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.yazar-kart__kim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.yazar-kart__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.yazar-kart__avatar--harf {
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-style: normal; font-weight: 600; font-size: 21px;
}
.yazar-kart__ad { margin: 0; font-size: 16px; font-weight: 650; color: var(--ink); }
.yazar-kart__rol { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.yazar-kart__yazi {
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.yazar-kart__yazi p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
.yazar-kart__btn {
  display: inline-flex;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.yazar-kart__btn:hover { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }

/* --- kırıntı (breadcrumb) --- */
.kirinti { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 22px; }
.kirinti a { color: var(--ink-soft); text-decoration: none; }
.kirinti a:hover { color: var(--accent); }
.kirinti svg { width: 14px; height: 14px; opacity: .55; }
.kirinti__ev svg { width: 16px; height: 16px; opacity: .8; }
.kirinti__son { color: var(--accent); font-weight: 550; }

/* --- başlık alanı --- */
.makale-bas__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}
.makale-bas__ayirac { width: 1px; align-self: stretch; min-height: 34px; background: var(--line); }
.yazar__avatar--harf { display: grid; place-items: center; }

/* ==========================================================
   GÖVDE TİPOGRAFİSİ
   ========================================================== */

.makale__govde {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  min-width: 0;
}
.makale__govde > * + * { margin-top: 1.1em; }
.makale__govde h2 {
  font-size: 1.42rem;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 1.9em;
  scroll-margin-top: 90px;
}
.makale__govde h3 {
  font-size: 1.14rem;
  font-weight: 650;
  color: var(--ink);
  margin-top: 1.7em;
  scroll-margin-top: 90px;
}
.makale__govde h2 + p,
.makale__govde h3 + p { margin-top: .6em; }
.makale__govde ul,
.makale__govde ol { padding-left: 1.3em; }
.makale__govde li + li { margin-top: .4em; }
.makale__govde li::marker { color: var(--accent); }
.makale__govde strong { color: var(--ink); font-weight: 600; }
.makale__govde a { color: var(--accent); text-underline-offset: 3px; }

.makale__govde pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #16161a;
  color: #e8e8ec;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.6;
}
.makale__govde pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.makale__govde code {
  background: rgba(69, 94, 255, .08);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: break-word;
}
.makale__govde img { max-width: 100%; height: auto; }

/* ==========================================================
   DAR EKRAN
   ========================================================== */

@media (max-width: 1080px) {
  .makale__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .yan-cta__title { font-size: 17.5px; }
}

@media (max-width: 940px) {
  .makale { padding: 26px 0 8px; }
  .makale__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    gap: 0;
  }

  /* Sıra: içindekiler yazının üstünde, gerisi altında */
  .makale__yan { position: static; display: contents; }
  .makale__govde { order: 2; }
  .ilerleme { order: 1; display: none; }        /* mobilde üstte sabit çubuk var */
  .icindekiler { order: 1; margin-bottom: 22px; padding: 0; }
  .yan-cta { order: 5; margin-top: 14px; }
  .benzer { order: 4; margin-top: 20px; }

  /* Benzer içerikler: makale biter bitmez, 2'li kart ızgarası */
  .benzer__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .benzer__oge:nth-child(n + 3) { display: none; }   /* 2'li ızgara: tek kart yalnız kalmasın */
  .benzer__oge {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    padding: 0;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
  }
  .benzer__oge:hover { background: var(--surface); border-color: var(--accent); }
  .benzer__kapak { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
  .benzer__govde { padding: 10px 12px 12px; }
  .benzer__title { font-size: 13.5px; }
  .benzer__ok { display: none; }

  /* İçindekiler katlanabilir olsun */
  .icindekiler h2 { display: none; }
  .icindekiler:not([open]) > ol { display: none; }
  .icindekiler > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
  }
  .icindekiler__sim {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: #f2f4ff;
    color: var(--accent);
  }
  .icindekiler__sim svg { width: 17px; height: 17px; }
  .icindekiler > summary::after {
    content: '';
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s;
  }
  .icindekiler[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .icindekiler > ol { padding: 0 16px 14px 42px; }

  .yazar-kart { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .yazar-kart__yazi { border-left: 0; padding-left: 0; }
}

@media (max-width: 700px) {
  .makale__inner { padding: 0 18px; }
  .makale__govde { font-size: 16px; }
  .makale__govde h2 { font-size: 1.3rem; }
  .makale-bas__kapak { border-radius: 18px; aspect-ratio: 4 / 3; margin-top: 22px; }
  .makale-bas__ozet { font-size: 16px; margin-top: 14px; }
  .makale-bas__meta { margin-top: 20px; gap: 10px 14px; }
  .makale-bas__ayirac { display: none; }
  .makale-bas__meta .yazi__meta { width: 100%; }
  .kirinti { font-size: 12.5px; gap: 5px; margin-bottom: 16px; }
  .kirinti__son { display: none; }
  .kirinti__son + span,
  .kirinti span[aria-hidden]:last-of-type { display: none; }


  .yazar-kart { padding: 18px; }
}

/* --- mobilde üstte sabit okuma çubuğu --- */
.okuma-cubugu {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  z-index: 60;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.okuma-cubugu i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #6f86ff);
  transition: width .1s linear;
}
/* Eski üç sütunlu düzenden kalan boş hücre yeni düzende yer kaplamasın */
.makale__inner::after { content: none; }

/* --- yazı içi ipucu kutusu --- */
.icerik-ipucu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 2em 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: #f2f4ff;
  border: 1px solid rgba(69, 94, 255, .14);
}
.icerik-ipucu__ikon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--accent);
}
.icerik-ipucu__ikon svg { width: 19px; height: 19px; }
.icerik-ipucu__govde b {
  display: block;
  margin-bottom: 5px;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--accent);
}
.icerik-ipucu__govde p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }
.icerik-ipucu__govde p + p { margin-top: .6em; }

.icerik-ipucu--uyari { background: #fff6ec; border-color: rgba(178, 92, 0, .18); }
.icerik-ipucu--uyari .icerik-ipucu__ikon,
.icerik-ipucu--uyari .icerik-ipucu__govde b { color: #b25c00; }

.icerik-ipucu--olumlu { background: #eefaf3; border-color: rgba(41, 132, 90, .18); }
.icerik-ipucu--olumlu .icerik-ipucu__ikon,
.icerik-ipucu--olumlu .icerik-ipucu__govde b { color: #29845a; }

/* --- yazı içi tanıtım kartı --- */
.icerik-kart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 2em 0;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
a.icerik-kart:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(69, 94, 255, .12);
  transform: translateY(-1px);
}
.icerik-kart__ikon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  overflow: hidden;
}
.icerik-kart__ikon svg { width: 23px; height: 23px; }
.icerik-kart__ikon img { width: 100%; height: 100%; object-fit: cover; }
.icerik-kart__govde b {
  display: block;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}
.icerik-kart__govde small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.icerik-kart__bag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.icerik-kart__bag svg { width: 16px; height: 16px; transition: transform .16s; }
a.icerik-kart:hover .icerik-kart__bag svg { transform: translateX(3px); }

@media (max-width: 620px) {
  .icerik-ipucu { padding: 15px 16px; gap: 11px; border-radius: 13px; }
  .icerik-ipucu__ikon { width: 30px; height: 30px; }
  .icerik-kart { grid-template-columns: auto minmax(0, 1fr); padding: 15px 16px; border-radius: 13px; }
  .icerik-kart__bag { grid-column: 1 / -1; margin-top: 2px; }
}

/* Başlık bloğu, aşağıdaki iki sütunlu düzenin sol sütunuyla aynı
   hizada ve genişlikte dursun; sağ sütunun yeri boş kalsın. */
.makale-bas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 28px 0;
}
.makale-bas > * { max-width: calc(100% - 388px); }
.makale-bas__kapak { margin-top: 28px; }

@media (max-width: 1080px) {
  .makale-bas > * { max-width: calc(100% - 332px); }
}
@media (max-width: 940px) {
  .makale-bas { max-width: 720px; padding: 22px 28px 0; }
  .makale-bas > * { max-width: 100%; }
}
@media (max-width: 700px) {
  .makale-bas { padding: 16px 18px 0; }
}

/* --- eski kurallarla çakışmaları kapat --- */

/* Başlıklar zaten numaralı yazılıyor; içindekilerde ikinci numara olmasın */
.icindekiler a::before { content: none; }

/* Benzer içerikler listesindeki etiket akışta dursun (chip--sabit mutlak konumlu) */
.benzer__etiket {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f2f2f7;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 550;
  white-space: nowrap;
}


/* Kapak artık gövdenin ilk öğesi: başlıkla arasında uygun boşluk kalsın */
.makale__govde > .makale-bas__kapak { margin: 0 0 8px; }
.makale__govde > .makale-bas__kapak + * { margin-top: 1.6em; }
.makale { padding-top: 26px; }

/* --- çağrı bandı: açık (varsayılan) ve koyu görünüm --- */
.cgr__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: center;
  gap: 32px 48px;
  background: linear-gradient(120deg, #eef1ff 0%, #f4f2ff 50%, #fdf2ff 100%);
  color: var(--ink);
  border: 1px solid rgba(69, 94, 255, .14);
}
.cgr__inner:not(:has(.cgr__gorsel)) { grid-template-columns: minmax(0, 1fr); }
.cgr__rozet {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.cgr__title { color: inherit; }
.cgr__desc { color: var(--ink-soft); }
.cgr__dugmeler { margin-top: 24px; }
.cgr__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 12px;
  background: #131a3a;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .16s, transform .16s;
}
.cgr__btn:hover { background: var(--accent); transform: translateY(-1px); }
.cgr__btn svg { width: 17px; height: 17px; }
.cgr__gorsel img { width: 100%; border-radius: 20px; display: block; }
.cgr__ikinci { color: var(--ink); }

.cgr--koyu .cgr__inner {
  background: var(--ink);
  color: var(--on-dark);
  border-color: transparent;
}
.cgr--koyu .cgr__desc { color: rgba(255, 255, 255, .72); }
.cgr--koyu .cgr__rozet { background: rgba(255, 255, 255, .14); color: #fff; }
.cgr--koyu .cgr__btn { background: var(--accent); }
.cgr--koyu .cgr__btn:hover { background: #fff; color: var(--ink); }
.cgr--koyu .cgr__ikinci { color: var(--on-dark); }

@media (max-width: 900px) {
  .cgr__inner { grid-template-columns: minmax(0, 1fr); }
  .cgr__gorsel { order: -1; }
}

/* --- kapak artık ızgaranın kendi hücresinde --- */
.makale__inner > .makale-bas__kapak { grid-column: 1; margin: 0 0 4px; }
.makale__inner > .makale__govde { grid-column: 1; }
.makale__inner > .makale__yan { grid-column: 2; grid-row: 1 / span 2; }
.makale__govde > :first-child { margin-top: 0; }

@media (max-width: 940px) {
  /* Mobil sıra: kapak → içindekiler → yazı (paylaş dahil) → benzer → tanıtım */
  .makale__inner > .makale-bas__kapak,
  .makale__inner > .makale__govde,
  .makale__inner > .makale__yan { grid-column: auto; grid-row: auto; }

  .makale-bas__kapak { order: 1; margin-bottom: 22px; }
  .icindekiler { order: 2; }
  .makale__govde { order: 3; }
  .benzer { order: 4; }
  .yan-cta { order: 5; }

  /* Okuma ilerlemesi yalnızca masaüstünde; mobilde ne yüzde ne çubuk var */
  .ilerleme { display: none; }
  .okuma-cubugu { display: none; }
}


/* ==========================================================
   YAPTIĞIM PROJELER (portfolio) — sade proje kartları
   Ana sayfada ve /ozel-yazilim-gelistirme'de aynı bileşen.
   ========================================================== */

.pf { padding: 34px 0 96px; }

.pf__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.pf__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 30px;
  margin-bottom: 30px;
}
.pf__head .overline { grid-column: 1; }
.pf__baslik {
  grid-column: 1;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
}
.pf__aciklama {
  grid-column: 1;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 14px 0 0;
  max-width: 46ch;
}
.pf__head .works__cta { grid-column: 2; grid-row: 2 / 4; }

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

.pf__kart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pf__kart:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(27, 27, 27, .35);
}

.pf__kapak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(150deg, #eef0ff, #dfe3fb);
}
.pf__kapak img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .6s cubic-bezier(.22, .8, .28, 1);
}
.pf__kart:hover .pf__kapak img { transform: scale(1.04); }
.pf__yer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  font-weight: 600;
  color: #6b73b8;
}

.pf__govde {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 12px 10px;
}

.pf__tur {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pf__canli {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eaf7ee;
  color: #1f7a3f;
  font-size: 11px;
  letter-spacing: .04em;
}
.pf__canli i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #2ea150;
}

.pf__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.pf__title a { color: inherit; text-decoration: none; }
.pf__title a:hover { color: var(--accent); }

.pf__desc {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pf__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}
.pf__detay,
.pf__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.pf__detay svg,
.pf__site svg { width: 14px; height: 14px; transition: transform .2s ease; }
.pf__detay:hover svg { transform: translateX(3px); }
.pf__site { color: var(--accent); }
.pf__site:hover svg { transform: translate(2px, -2px); }

.pf__bos {
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 24px;
}

@media (max-width: 980px) {
  .pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .pf { padding: 24px 0 64px; }
  .pf__inner { padding: 0 16px; }
  .pf__head { grid-template-columns: 1fr; row-gap: 14px; margin-bottom: 20px; }
  .pf__head .works__cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .pf__grid { grid-template-columns: 1fr; gap: 14px; }
  .pf__kart { padding: 10px; border-radius: 20px; }
  .pf__kapak { border-radius: 14px; }
  .pf__govde { padding: 16px 8px 8px; }
  .pf__title { font-size: 18px; }
}

/* ==========================================================
   DİL DEĞİŞTİRİCİ (menüde) + SUNUCU ÖN-ÇİZİMİ
   ========================================================== */

.nav__dil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  color: #e6e6e6 !important;
}
.nav__dil:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }

@media (max-width: 720px) {
  .nav__dil {
    margin-top: 6px;
    justify-content: center;
    border-radius: 12px !important;
  }
}

/* JS yüklenmeden önce sunucunun bastığı düz içerik: main.js gövdeyi
   yeniden çizince kaybolur. Görünür ama sade dursun. */
.oncizim {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.oncizim h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 0 0 18px; }
.oncizim h2 { font-size: 1.35rem; margin: 1.6em 0 .4em; }
.oncizim h3 { font-size: 1.1rem; margin: 1.2em 0 .3em; }
.oncizim p, .oncizim li { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
body.hazir .oncizim { display: none; }


/* ==========================================================
   PROJE DETAYI — üst bilgi sol sütunda, talep formu en üstten
   footer'a kadar yapışık (masaüstü)
   ========================================================== */

.makale--proje { padding-top: 6px; }
.makale-bas--proje { max-width: none; margin: 0 0 30px; padding: 0; }
.makale-bas--proje > * { max-width: none; }
.makale-bas--proje .makale-bas__ozet { max-width: 60ch; }
.makale-bas--proje .makale-bas__kapak { margin-top: 30px; }
.makale__govde--proje { min-width: 0; }

/* Yapışık sütun: kısa çağrı kartı, footer'a kadar izler */
.makale__yan--proje { top: 20px; }
.yan-cta--proje { padding: 24px 22px 22px; }
.yan-cta--proje .yan-cta__title { font-size: 21px; }
.yan-cta--proje .yan-cta__btn { width: 100%; justify-content: center; }
.yan-cta__alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.yan-cta__alt svg { width: 14px; height: 14px; transition: transform .2s ease; }
.yan-cta__alt:hover { color: var(--accent); }
.yan-cta__alt:hover svg { transform: translate(2px, -2px); }

/* Sütun içindeki öneri kartları (proje altı "Başka projeler", yazı altı "Önerilen yazılar") */
.oneri--ic { padding: 54px 0 0; }
.oneri--ic .oneri__inner { max-width: none; padding: 0; }
.oneri--ic .oneri__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oneri--ic .oneri__grid > :nth-child(3) { display: none; }
.oneri--ic .oneri__title { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.onerik__etiket {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent, #3b6bff);
  margin-bottom: 8px;
}

/* Yazı detayı: önerilen yazılar makalenin altında, tam genişlik */
.oneri--yazi { padding: 24px 0 40px; }

@media (max-width: 940px) {
  .makale-bas--proje { margin-bottom: 22px; }
  .yan-cta--proje { margin-top: 0; }
  .oneri--ic { padding-top: 40px; }
  .oneri--ic .oneri__grid { grid-template-columns: 1fr; }
  .oneri--ic .oneri__grid > :nth-child(3) { display: flex; }
}

/* ==========================================================
   PROJE LİSTESİ (/projeler) ve portfolio bileşeni kategori filtresi
   ========================================================== */

.pf__filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}
.pf__head + .pf__filtre { margin-top: -6px; }
.pf__kart[hidden] { display: none; }

.pf--sayfa { padding: 10px 0 100px; }
.pf--sayfa .pf__filtre { margin-bottom: 26px; }

@media (max-width: 720px) {
  .pf__filtre {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -20px 18px;
    padding: 0 20px;
  }
  .pf__filtre::-webkit-scrollbar { display: none; }
  .pf__filtre .filtre__pil { flex: 0 0 auto; }
}

/* ==========================================================
   DİL DEĞİŞTİRİCİ — küre ikonu + dil kodu
   ========================================================== */

.nav__dil {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 11px 0 9px !important;
}
.nav__dil svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 720px) {
  .nav__dil { min-height: 40px; }
  .nav__dil svg { width: 17px; height: 17px; }
}