/*
Theme Name: Xhedon Studio
Theme URI: https://xhedonstudio.com
Author: Xhedon Studio
Author URI: https://xhedonstudio.com
Description: Custom WordPress theme for Xhedon Studio.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: xhedonstudio
*/

/*
 * Sitenin temel zemini. Her sayfa siyahtan başlar — ana sayfadaki kara
 * delik de, sakin tutulan alt sayfalar da. Ana sayfaya özel yerleşim
 * assets/css/ana-sayfa.css içinde ve bu dosyadan sonra yüklenir.
 */

:root {
  --xhedon-bg: #000000;
  --xhedon-text: #ffffff;
  --xhedon-muted: rgba(255, 255, 255, 0.62);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--xhedon-text);
  background: var(--xhedon-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * Bülten şeridi ve sayfa altı. Her sayfada göründükleri için stilleri
 * burada, ana-sayfa.css'te değil. Sayfa siyahla açılıyor (kara delik),
 * siyahla kapanıyor.
 */

.bulten {
  position: relative;
  background: #000;
  color: #fff;
  padding: clamp(110px, 15vw, 210px) clamp(20px, 6vw, 60px);
  background: none;
}

.bulten {
  overflow: hidden;
}

/* Siyah zemin. Önce üstte yumuşak bir geçişle (maske) bitiyordu;
   kaldırıldı — üst kenar artık düz ve net, gölge de onu takip ediyor. */
.bulten::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #000;
  box-shadow: 0 -10px 26px rgba(16, 24, 40, 0.14), 0 -26px 60px rgba(16, 24, 40, 0.10);
}

.bulten-ic {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/*
 * Bülten konusu kartları: perspektifle yatırılmış iki sıra, yavaşça
 * kayıyor. Form ve başlık ÖNDE (z-index 2) durur; kartlar arkada ve
 * karartılmış, yoksa "Kaydol" düğmesi okunmuyor.
 *
 * Kenarlarda maske var: sıralar kadrajın içinde başlayıp bitmiyor,
 * karanlıktan çıkıp karanlığa giriyorlar.
 */
.bulten-kartlar {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 880px;
  perspective-origin: 30% 42%;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0, #000 54%, transparent 80%),
    /* Sönme sınırı soldan sağa doğru ALÇALIYOR: sağ tarafta kartlar
       footer'a biraz daha taşıyor.
       Açı bilerek küçük (5°). Kutu çok geniş olduğu için (1440x640) eğik
       gradyanda eksen uzuyor: 5°'de %19, ama 14°'de dikey sönme pratikte
       yok oluyordu — ilk denemede kartlar o yüzden bıçakla kesilmişti.
       Duraklar o %19'a göre kısaltıldı, sönme yine kesimden ÖNCE bitiyor.
       Sağ kenardaki düşme yaklaşık 126px. 175deg aşağı-SOLA bakıyor
       ve sağda erken söndürüyordu; 185deg aşağı-SAĞA bakar. */
    linear-gradient(185deg, transparent 0, #000 13%, #000 49%, transparent 74%);
  mask-image:
    linear-gradient(90deg, #000 0, #000 54%, transparent 80%),
    /* Sönme sınırı soldan sağa doğru ALÇALIYOR: sağ tarafta kartlar
       footer'a biraz daha taşıyor.
       Açı bilerek küçük (5°). Kutu çok geniş olduğu için (1440x640) eğik
       gradyanda eksen uzuyor: 5°'de %19, ama 14°'de dikey sönme pratikte
       yok oluyordu — ilk denemede kartlar o yüzden bıçakla kesilmişti.
       Duraklar o %19'a göre kısaltıldı, sönme yine kesimden ÖNCE bitiyor.
       Sağ kenardaki düşme yaklaşık 126px. 175deg aşağı-SOLA bakıyor
       ve sağda erken söndürüyordu; 185deg aşağı-SAĞA bakar. */
    linear-gradient(185deg, transparent 0, #000 13%, #000 49%, transparent 74%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .82;
}

.bk-sahne {
  position: absolute;
  /* Sola yaslı: sütunlar sol kenardan başlıyor, sağ taraf forma kalıyor. */
  inset: -36% auto -36% -12%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(14px, 1.6vw, 26px);
  transform: rotateX(18deg) rotateY(-9deg) rotateZ(-9deg);
  transform-style: preserve-3d;
}

/* Sütunlar DİKEY kayıyor. Komşular ters yönde ve farklı hızda:
   hepsi aynı yöne aksa duvar tek parça bir levha gibi kayıyordu. */
.bk-kolon { flex: none; }

.bk-sutun {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 26px);
  height: max-content;
  animation: bk-kay 52s linear infinite;
}

.bk-sutun--1 { animation-duration: 71s; animation-direction: reverse; }
.bk-sutun--2 { animation-duration: 44s; }
.bk-sutun--3 { animation-duration: 63s; animation-direction: reverse; }

@keyframes bk-kay {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.bk-kart {
  flex: none;
  width: clamp(160px, 16vw, 230px);
  padding: clamp(14px, 1.5vw, 20px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(2px);
}

/* Kart görseli: kartın üstünde ince bir şerit. Siyah zeminde fazla
   parlamasın diye karartılıp doygunluğu düşürülüyor; kart bir kapak
   değil, konunun işareti. */
.bk-gorsel {
  display: block;
  overflow: hidden;
  border-radius: 9px;
  margin-bottom: clamp(10px, 1vw, 14px);
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.05);
}

.bk-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15) brightness(0.95) contrast(1.05);
}

.bk-etiket {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.bk-konu {
  margin: 0.7em 0 0;
  font-weight: 300;
  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  .bk-sira { animation: none; }
}

@media (max-width: 820px) {
  .bulten-kartlar { opacity: .3; }
}

.bulten-baslik {
  margin: 0;
  font-weight: 200;
  font-size: clamp(22px, 2.8vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  /* Hero'daki hizmet başlığının (.svc-name) aynı parıltısı: üç katmanlı
     text-shadow, yakından uzağa. Siyah zeminde yazı kendi ışığını
     veriyormuş gibi duruyor. */
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 26px rgba(255, 255, 255, 0.6),
    0 0 58px rgba(255, 255, 255, 0.34),
    0 0 110px rgba(255, 255, 255, 0.18);
}

.bulten-alt {
  margin: 0.85em 0 0;
  max-width: 30em;
  font-weight: 300;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  /* Alt metin başlıktan sönük ama okunur: hiyerarşi korunuyor. */
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.55),
    0 0 28px rgba(255, 255, 255, 0.3);
}

.bulten-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bulten-form input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 1.05em 1.4em;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: inherit;
  font-size: clamp(13px, 1.3vw, 15px);
  /* Kart duvarının önünde durduğu için kendi halesi var: yoksa
     arkadaki kartlara karışıyor. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 26px rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.bulten-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.bulten-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0 34px rgba(255, 255, 255, 0.2);
}

.bulten-form button {
  padding: 1.05em 2.2em;
  border: 0;
  border-radius: 100px;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3), 0 0 70px rgba(255, 255, 255, 0.14);
  transition: transform 0.3s ease, letter-spacing 0.3s ease, box-shadow 0.3s ease;
}

.bulten-form button:hover {
  transform: scale(1.04);
  letter-spacing: 0.18em;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.45), 0 0 90px rgba(255, 255, 255, 0.2);
}

.bulten-sonuc {
  margin: 1.1em 0 0;
  font-weight: 300;
  font-size: clamp(12px, 1.2vw, 14px);
  color: rgba(255, 255, 255, 0.5);
}

.bulten-sonuc--ok {
  color: #2fbfb4;
}

/* Bal küpü ve ekran okuyucu etiketi: gözden gizli, okuyucuya açık. */
.bulten-tuzak {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/*
 * Sayfa altı. Zemin siyah ama arkasında hero'nun yıldızları varmış da footer
 * saydammış gibi görünsün isteniyor.
 *
 * Yıldızlar hero'da WebGL shader'ından geliyor (karadelik.js/starField).
 * Burada aynısını çizmek sayfanın en altında ikinci bir WebGL bağlamı açmak
 * demekti; onun yerine aynı dilde hazır bir SVG yıldız alanı kullanılıyor —
 * sıcak-beyazdan mavi-beyaza çekirdekler, her birinin yumuşak halesi ve
 * aralarında çok seyrek kırmızı/kehribar/mavi olanlar. Statik, tek bir
 * dosya, JS yok.
 *
 * Üstüne iki yumuşak ışıma bindi: yıldızların ardından sızan derinlik hissi
 * buradan geliyor.
 */
.site-alt {
  position: relative;
  overflow: hidden;
  /* Zemin saf siyah. Daha önce iki yumuşak ışıma vardı (sol üstte mavi,
     sağ altta mor) ama sol taraf laciverde kaçıyordu; derinlik artık
     yalnız yıldız katmanlarından geliyor. */
  background: #000;
  color: #fff;
  padding: clamp(48px, 6vw, 84px) clamp(20px, 6vw, 60px) clamp(22px, 3vw, 34px);
}

/*
 * İki yıldız katmanı. Aynı SVG farklı ölçek ve hızda: üstteki yakın ve hızlı,
 * alttaki uzak ve yavaş — aradaki hız farkı derinlik veriyor. Biri de yavaşça
 * parlayıp sönüyor, yıldızlar böyle titriyor.
 *
 * Katmanlar footer'dan geniş (inset negatif): kayarken kenarlarda boşluk
 * açılmasın diye. Hareket yalnızca transform ve opacity üzerinden, yani
 * compositor işi — daha önce ısınmaya yol açan cinsten (her karede yeniden
 * çizim) bir animasyon değil.
 */
.site-alt::before,
.site-alt::after {
  content: "";
  position: absolute;
  inset: -14% -18%;
  pointer-events: none;
  background-image: url("assets/gorsel/yildizlar.svg");
  background-size: cover;
  background-position: center;
  /* Üstte söner: sayfanın son bölümüyle arasında sert bir çizgi kalmasın. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
}

/* Yakın katman: büyük yıldızlar, belirgin, hızlıca sayılabilecek kadar yavaş. */
.site-alt::before {
  transform: scale(1.15);
  animation: alt-yildiz-kay 120s linear infinite, alt-yildiz-parla 7.5s ease-in-out infinite alternate;
}

/* Uzak katman: küçültülmüş, soluk, ters yöne ve daha yavaş. */
.site-alt::after {
  transform: scale(0.62);
  opacity: 0.5;
  animation: alt-yildiz-kay-ters 190s linear infinite, alt-yildiz-parla 11s 2s ease-in-out infinite alternate;
}

@keyframes alt-yildiz-kay {
  from { transform: scale(1.15) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(6%, -2%, 0); }
}

@keyframes alt-yildiz-kay-ters {
  from { transform: scale(0.62) translate3d(0, 0, 0); }
  to   { transform: scale(0.62) translate3d(-9%, 3%, 0); }
}

@keyframes alt-yildiz-parla {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-alt::before,
  .site-alt::after {
    animation: none;
  }
}

/* Yazılar yıldızların önünde. */
.alt-ic,
.alt-satir {
  position: relative;
  z-index: 1;
}

.alt-ic {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
}

.alt-marka {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* Sayfa altindaki logo bilerek buyuk: ustteki menude kucucuk duruyor,
   sayfanin kapanisinda markanin kendisi olacak kadar yer kapliyor.
   Yildiz bu boyda adin yanina degil ustune oturur. */
.alt-logo-satir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75em;
}

.alt-logo {
  width: clamp(64px, 7vw, 104px);
  height: auto;
  flex: none;
  /* Sabit bir hale: dolgunun içinden geçen ışık zaten hareket ediyor, halenin
     de yanıp sönmesi gereksiz — ve filtre animasyonu her karede yeniden çizim
     demek. */
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 26px rgba(180, 210, 255, 0.4));
}

.alt-ad {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.alt-ad em {
  font-style: normal;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.6);
}

.alt-soz {
  margin: 0;
  max-width: 24em;
  font-weight: 300;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.48);
}

.alt-baslik {
  display: block;
  margin: 0 0 1.2em;
  font: 400 clamp(10px, 1vw, 12px) / 1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.34);
}

.alt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.alt-liste li,
.alt-liste a {
  font-weight: 300;
  font-size: clamp(12px, 1.25vw, 15px);
  color: rgba(255, 255, 255, 0.72);
}

.alt-liste a {
  text-decoration: none;
  transition: color 0.25s ease;
}

.alt-liste a:hover {
  color: #fff;
}

.alt-adres,
.alt-mesai {
  color: rgba(255, 255, 255, 0.45);
}

/* Adres uzun: tek satıra sıkışmasın, sütun genişliğinde aksın. */
.alt-adres {
  max-width: 22em;
  line-height: 1.55;
}

.alt-satir {
  max-width: 1120px;
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 300;
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 820px) {
  .bulten-ic {
    grid-template-columns: 1fr;
  }

  .alt-ic {
    grid-template-columns: 1fr;
    gap: clamp(26px, 7vw, 40px);
  }
}

/*
 * İletişim bölümü. Düzen Büşra'nın verdiği referanstan: solda başlık ve üç
 * iletişim kartı, sağda panel içinde form. Referans koyu zeminliydi ve yeşil
 * parıltısı vardı; ikisi de alınmadı — bölüm sitenin kendi beyaz diline
 * çevrildi: ince ızgara zemin, hairline çerçeveli kartlar, siyah buton.
 * Turkuaz yalnızca rozetin noktasında tek vurgu olarak kaldı (dördüncü
 * bölümdeki adım numaralarıyla aynı renk).
 *
 * Bölüm bültenin hemen üstünde: beyaz burada bitiyor, altındaki bülten ve
 * sayfa altı siyahla kapanıyor.
 */

.iletisim {
  --ilt-vurgu: #2fbfb4;
  --ilt-cizgi: rgba(10, 10, 10, 0.12);
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #0a0a0a;
  /* Alt boşluk bilerek geniş: altındaki siyah bölüm sola doğru yukarı
     taşıyor, iletişim kartlarıyla arasında nefes kalsın. */
  padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 60px) clamp(130px, 17vw, 240px);
}

/* Dördüncü bölümdeki ızgaranın aynısı: sayfa boyunca aynı dil sürsün diye. */
.iletisim::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(14, 46, 77, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14, 46, 77, 0.055) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 82%, transparent 100%);
}

/* Arkadaki dev soluk yazı. Referansta "CONTACT" tam ortada duruyor. */
.ilt-fon {
  position: absolute;
  left: 50%;
  top: clamp(18px, 3vw, 54px);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(64px, 13vw, 210px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(10, 10, 10, 0.035);
}

.ilt-ic {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.ilt-rozet {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1.15em 0.55em 0.6em;
  border-radius: 100px;
  border: 1px solid var(--ilt-cizgi);
  background: #fff;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.66);
}

/* Referanstaki dolu daire; icinde markanin kendi yildizi duruyor. */
.ilt-rozet-nokta {
  display: grid;
  place-items: center;
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  background: #0a0a0a;
}

.ilt-rozet-nokta svg {
  width: 62%;
  height: 62%;
  display: block;
}

/* Referanstaki gibi kalin. Sayfanin geri kalani ince yaziyla yazili ama
   burasi sayfanin son sozu: cagri buradan yapiliyor, agirligi hak ediyor. */
.ilt-baslik {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-weight: 700;
  font-size: clamp(29px, 3.8vw, 50px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: #0a0a0a;
}

.ilt-alt {
  margin: 0.9em 0 0;
  max-width: 26em;
  font-weight: 300;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.55);
}

.ilt-kartlar {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  margin: clamp(30px, 4vw, 52px) 0 0;
}

/* Kart gölgesi dördüncü bölümdeki şema kartlarıyla aynı katmanlı dil. */
.ilt-kart {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(14px, 1.6vw, 20px);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(20, 40, 66, 0.09),
    0 4px 10px rgba(20, 32, 48, 0.04),
    0 16px 32px rgba(16, 36, 62, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.ilt-kart:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(20, 40, 66, 0.16),
    0 6px 14px rgba(20, 32, 48, 0.05),
    0 22px 44px rgba(16, 36, 62, 0.1);
}

.ilt-kart-ikon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(40px, 4.2vw, 52px);
  aspect-ratio: 1;
  border-radius: 13px;
  background: #0a0a0a;
  color: #fff;
}

.ilt-ikon {
  width: 45%;
  height: 45%;
}

.ilt-kart-yazi {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
}

.ilt-kart-baslik {
  font-size: clamp(12.5px, 1.25vw, 15px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0a0a0a;
}

.ilt-kart-deger {
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.5);
  overflow-wrap: anywhere;
}

.ilt-kart-ok {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: clamp(30px, 3vw, 36px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--ilt-cizgi);
  color: rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.ilt-kart-ok svg {
  width: 46%;
  height: 46%;
}

a.ilt-kart:hover .ilt-kart-ok {
  transform: translate(2px, -2px);
  background: #0a0a0a;
  color: #fff;
}

/* Sağdaki form paneli. */
.ilt-form {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.1vw, 14px);
  padding: clamp(16px, 1.8vw, 24px);
  border-radius: 22px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(20, 40, 66, 0.09),
    0 6px 14px rgba(20, 32, 48, 0.04),
    0 26px 60px rgba(16, 36, 62, 0.08);
}

.ilt-alan {
  width: 100%;
  padding: clamp(14px, 1.5vw, 19px) clamp(15px, 1.6vw, 21px);
  border-radius: 13px;
  border: 1px solid var(--ilt-cizgi);
  background: rgba(20, 40, 66, 0.022);
  color: #0a0a0a;
  font: inherit;
  font-weight: 300;
  font-size: clamp(13px, 1.25vw, 15px);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.ilt-alan::placeholder {
  color: rgba(0, 0, 0, 0.38);
}

.ilt-alan:focus {
  outline: none;
  border-color: rgba(10, 10, 10, 0.42);
  background: #fff;
}

.ilt-mesaj {
  resize: vertical;
  min-height: clamp(150px, 19vw, 250px);
  line-height: 1.55;
}

.ilt-buton {
  padding: clamp(14px, 1.5vw, 19px);
  border: 0;
  border-radius: 13px;
  background: #0a0a0a;
  color: #fff;
  font: inherit;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.3s ease, letter-spacing 0.3s ease, box-shadow 0.3s ease;
}

.ilt-buton:hover {
  transform: scale(1.015);
  letter-spacing: 0.17em;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

.ilt-sonuc {
  margin: 0.2em 0 0;
  font-weight: 300;
  font-size: clamp(12px, 1.2vw, 14px);
  color: rgba(0, 0, 0, 0.55);
}

.ilt-sonuc--ok {
  color: #1a8f87;
}

@media (max-width: 880px) {
  .ilt-ic {
    grid-template-columns: 1fr;
  }

  .ilt-fon {
    font-size: clamp(52px, 17vw, 110px);
  }
}

/*
 * İletişimin üstündeki görsel şerit. Sayfa buraya kadar yazı ve şema; forma
 * girmeden önce göze nefes veriyor.
 *
 * Görsel sağ kenardan taşar: kollar sağdan giriyor ve laptop çerçeveyi
 * aşıyor, yani kadraj bitmiyor, devam ediyormuş gibi duruyor. Sol taraf
 * bilerek boş — o boşluk görselin nefesi.
 */

.gorsel-serit {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: clamp(40px, 6vw, 90px) 0 0;
}

.gorsel-serit-resim {
  display: block;
  width: clamp(320px, 52vw, 760px);
  height: auto;
}

/* Yaslandığı kenardan taşar: kolların ucu ekranın dışında kalır. */
.gorsel-serit--sag .gorsel-serit-resim {
  margin-left: auto;
  margin-right: clamp(-140px, -9vw, -50px);
}

/* Sol şeritteki tablet iki elle simetrik tutuluyor: laptop gibi tek yana
   akmadığı için bol taşırınca cihazın kendisi kesiliyor. Taşma payı küçük. */
.gorsel-serit--sol .gorsel-serit-resim {
  margin-right: auto;
  margin-left: clamp(-46px, -3vw, -12px);
}

@media (max-width: 880px) {
  .gorsel-serit {
    padding-top: clamp(24px, 7vw, 50px);
  }

  .gorsel-serit-resim {
    width: min(96vw, 520px);
  }

  .gorsel-serit--sag .gorsel-serit-resim {
    margin-right: -16vw;
  }

  .gorsel-serit--sol .gorsel-serit-resim {
    margin-left: -5vw;
  }
}

/*
 * Arka plan derinligi. Sayfa duz kagit gibi duruyordu: ne dokusu ne isigi
 * vardi. Sekil cizilmedi — yuvarlak leke, yatay bant ve dikey serit denendi,
 * ucu de dekorasyon gibi durdu. Gercek siteler derinligi DOKU ve ISIK ile
 * kurar; burada da o iki katman var.
 *
 * 1) Tanecik: sayfanin tamamina serilen cok ince gurultu. Tek basina
 *    neredeyse gorunmez ama duzlugu oldurur, ekrandaki her sey "basilmis"
 *    gibi durur. SVG feTurbulence ile uretilir, ek dosya istegi yok.
 *
 * 2) Isik havuzlari: acik bolumlerde ekrandan buyuk, kenari olmayan cok
 *    dusuk kontrastli parlaklik gecisleri. Kenarlari belli olmadigi icin
 *    sekil olarak okunmaz; yalnizca yuzey "aydinlanmis" gibi durur.
 *    Deger %3 civarinda — daha fazlasi kirli goruntu veriyor.
 */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23g%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: 180px 180px;
}

/* Isik havuzlari: kenarlara dogru cok hafif koyulasma, ortaya dogru acilma.
 *
 * background-attachment:fixed sart. Ilk denemede her bolum kendi isigini
 * kendi kutusuna gore ciziyordu; sinirlarda gradyanlar denk gelmeyince
 * yatay bant olusuyor, sayfa dilimlenmis gibi duruyordu. Sabitlenince
 * hepsi ayni ekran isigini paylasir, gecisler goze gorunmez.
 */
.section3,
.section4,
.yolculuk,
.cagri,
.gorsel-serit,
.iletisim {
  background-color: #fff;
  background-image:
    radial-gradient(ellipse 85% 55% at 12% 0%, rgba(14, 28, 52, 0.036), transparent 62%),
    radial-gradient(ellipse 65% 48% at 88% 38%, rgba(14, 28, 52, 0.030), transparent 66%),
    radial-gradient(ellipse 100% 65% at 50% 104%, rgba(14, 28, 52, 0.032), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

/*
 * Müşteri yorumları. Düzen Büşra'nın referansından: dev bir başlık ve onun
 * ÜSTÜNE binen, sayfaya serbestçe dağılmış cam paneller.
 *
 * Bölüm sayfanın üstünde duran bağımsız bir levha gibi: kenarlardan içeri
 * çekilmiş, köşeleri yuvarlak, arkasında derin bir gölge. Çevresi açık gri,
 * levha beyaz — ve gri, alttaki (beyaz) iletişim bölümüne doğru sönüyor ki
 * iki bölüm arasında dikiş görünmesin.
 *
 * Kartlar mutlak konumlu; yerleri (--x/--y/--g) referanstaki kartların
 * yerlerinden ölçüldü. Eğim yok — referansta da yok. "Havada" hissi dört
 * şeyden geliyor: dağınık yerleşim, buzlu cam, kaydırmayla oluşan derinlik
 * farkı (parallax) ve çok yavaş salınım.
 *
 * Katman sırası önemli: konum + parallax `li.yrm-kart`'ta, giriş animasyonu
 * ve salınım içteki `.yrm-cam`'da. Üçü aynı elemanda olsaydı transform'lar
 * birbirini ezerdi.
 */

.yorumlar {
  /* Dönüş yönü. Fare hareket ettikçe yorumlar.js bu üçünü güncelliyor; ok da
     kartlar da aynı kaynağı okuduğu için hep aynı yöne bakıyorlar. Buradaki
     değerler fare hiç oynamadan önceki duruş. */
  --don-x: 9deg;
  --don-y: 15deg;
  --ok-aci: 0deg;
  /* Levhanın derinliği ve köşe yarıçapı. Yan yüzler .yrm-cam'in kardeşi
     olduğu ve ikisini de kullandığı için değişkenler bölümde duruyor. */
  --et: 30px;
  --kose: 12px;
  position: relative;
  /* Bir üstteki bölüm (.cagri) z-index:2 ile duruyordu ve levhanın yukarı
     taşan gölgesinin üstünü örtüyordu. Bölüm 3'e çıkarılınca gölge iki
     komşunun da üstüne düşüyor. */
  z-index: 3;
  /* Hiçbir yönde boşluk yok: levha ekranın dört kenarına da dayanıyor.
     Yükseklik hissi tamamen gölgeden geliyor. */
  padding: 0;
  background: linear-gradient(180deg, #eceef2 0%, #eceef2 62%, #fff 100%);
}

/* Havada duran levha. Gölge iki katmanlı: geniş ve çok yumuşak olanı yüksekliği,
   dar olanı da kenarın keskinliğini veriyor. */
.yrm-levha {
  position: relative;
  overflow: hidden;
  /* Köşeler sivri. */
  border-radius: 0;
  background: #fff;
  color: #0a0a0a;
  /* Üstteki 50px levhanın nerede başladığını belli eden pay: bölümün sınırı
     (ve gölgesi) "Ne diyorlar" rozetinin hemen üstünde başlıyor. Daha büyük
     bir değer levhayı bir önceki bölümün alanına doğru uzatıyordu. */
  padding: 50px clamp(18px, 4vw, 52px) clamp(44px, 5vw, 76px);
  /* Levha bir tık yukarıda duruyor gibi. Dört kenarı da ekrana dayandığı için
     gölgenin gidecek tek yeri komşu bölümler: hem yukarı hem aşağı taşıyor.
     Yayılım bilerek geniş ve yumuşak: gölge ne kadar dağınıksa cisim zeminden
     o kadar yüksekte okunuyor. Dar ve koyu gölge levhayı zemine yapıştırırdı. */
  box-shadow:
    0 -34px 96px rgba(14, 24, 44, 0.26),
    0 -10px 30px rgba(14, 24, 44, 0.13),
    0 34px 96px rgba(14, 24, 44, 0.26),
    0 10px 30px rgba(14, 24, 44, 0.13);
}

/*
 * Siyah-beyaz desen: ince çapraz tarama + nokta ızgarası.
 *
 * Desen bilerek belirgin: cam ancak ARKASINDA bir şey varsa cam gibi durur.
 * Daha soluk hâlinde kartların altında kıracak bir şey kalmıyordu ve camlar
 * beyaz karton gibi görünüyordu; şimdi desen camın altında bulanıklaşıyor,
 * kenarındaysa keskin kalıyor — kırılma buradan okunuyor.
 */
.yrm-desen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(135deg, rgba(10, 10, 10, 0.062) 0 1px, transparent 1px 9px),
    radial-gradient(rgba(10, 10, 10, 0.16) 1.1px, transparent 1.5px);
  background-size: auto, 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
}

/*
 * Desenin üzerinde akan ışık — hero düğmesindeki huzmenin (.svc-cta) aynı
 * fikri, düz çizgiye uyarlanmış hâli. Orada konik gradyan bir halka boyunca
 * dönüyor; burada bant tarama çizgilerinin BOYUNCA kayıyor.
 *
 * Çizgiler 45 derecede uzanıyor (gradyan ekseni 135 olduğu için), bu yüzden
 * maske bandının ekseni de 45 derece: ışık çizgiyi kesmiyor, üstünde akıyor.
 *
 * Aynı desen daha parlak bir kopya hâlinde üstte duruyor ve yalnız bandın
 * altında kalan kısmı görünüyor; bant geçerken o çizgiler bir an için
 * aydınlanıp sönüyor.
 */
/*
 * Çizgiler üzerinde koşan kısa huzmeler.
 *
 * Önce bütün çizgileri birden kesen geniş bir bant denendi; istenen o
 * değildi. Burada her huzme TEK BİR çizginin üstünde duruyor ve o çizgi
 * boyunca ilerliyor. Arka plandaki tarama çizgileri 45 derecede uzandığı
 * için (gradyan ekseni 135, çizgiler ona dik), huzme öğeleri de -45
 * derece döndürülüyor; böylece var olan bir çizginin üstüne oturuyorlar.
 * (İlk denemede -45 verilmişti: huzme çizgiyi takip etmek yerine dik
 * kesiyordu.)
 *
 * Fikir hero düğmesindeki huzmenin (.svc-cta) aynısı: kısa bir ışık
 * parçası kenar boyunca koşuyor. Orada yol bir halka, burada bir doğru.
 */
.yrm-desen i {
  position: absolute;
  top: -50%;
  height: 200%;
  width: 0.6px;
  pointer-events: none;
  transform-origin: center;
  transform: rotate(45deg);
  background-repeat: no-repeat;
  /* Kısa huzme: çizginin yalnız %7'si kadar bir parça. */
  background-size: 100% 7%;
  /* Gökkuşağı: sıcaktan soğuğa, ortası beyaz. Bir ara tek tona (marka
     mavisi) indirilmişti, gökkuşağına geri döndü. Renkler hero'daki
     düğme stroke'uyla aynı aileden, sayfa boyunca tek dil sürsün diye. */
  background-image: linear-gradient(to bottom,
    rgba(255, 110,  70, 0)    0%,
    rgba(255, 110,  70, .70) 14%,
    rgba(255, 205,  85, .85) 31%,
    rgba(255, 255, 255, .95) 50%,
    rgba(120, 225, 200, .85) 68%,
    rgba( 90, 130, 255, .60) 88%,
    rgba( 90, 130, 255, 0)  100%);
  animation-iteration-count: infinite;
}

/* Her huzme bagimsiz: ayri cizgi, ayri uzunluk, ayri hiz, ayri an.
   Sureler birbirine bolunmeyen ondalikli degerler -- donguler asla
   ayni anda basa sarmiyor, bu yuzden desen tekrar ediyor gibi durmuyor. */
.yrm-desen i:nth-child(1) { left: 7%; top: -62%; animation-duration: 8.3s; animation-delay: -1.1s; background-size: 100% 5%; }
.yrm-desen i:nth-child(2) { left: 17%; top: -44%; animation-duration: 13.9s; animation-delay: -7.4s; background-size: 100% 9%; }
.yrm-desen i:nth-child(3) { left: 24%; top: -71%; animation-duration: 11.1s; animation-delay: -3.2s; background-size: 100% 6%; }
.yrm-desen i:nth-child(4) { left: 35%; top: -38%; animation-duration: 17.3s; animation-delay: -12.6s; background-size: 100% 4%; }
.yrm-desen i:nth-child(5) { left: 41%; top: -55%; animation-duration: 9.7s; animation-delay: -5.9s; background-size: 100% 11%; }
.yrm-desen i:nth-child(6) { left: 52%; top: -67%; animation-duration: 15.1s; animation-delay: -9.8s; background-size: 100% 7%; }
.yrm-desen i:nth-child(7) { left: 59%; top: -41%; animation-duration: 12.3s; animation-delay: -2.4s; background-size: 100% 5%; }
.yrm-desen i:nth-child(8) { left: 68%; top: -59%; animation-duration: 19.7s; animation-delay: -14.3s; background-size: 100% 8%; }
.yrm-desen i:nth-child(9) { left: 76%; top: -48%; animation-duration: 10.9s; animation-delay: -6.7s; background-size: 100% 6%; }
.yrm-desen i:nth-child(10) { left: 85%; top: -64%; animation-duration: 14.3s; animation-delay: -11.2s; background-size: 100% 10%; }
.yrm-desen i:nth-child(11) { left: 94%; top: -52%; animation-duration: 16.9s; animation-delay: -4.5s; background-size: 100% 5%; }

/* Üç ayrı görünme biçimi: biri uzun kalıyor, biri kısa parlayıp
   sönüyor, biri yolun erken kısmında beliriyor. Hepsi tek bir
   keyframe'i paylaşsaydı aynı ritimde yanıp sönerlerdi. */

/* Rastgelelik iki eksende: hangi keyframe ve hangi hız eğrisi. Önce bir de
   ton kaydırması vardı; site tek renge inince kaldırıldı, çünkü hue-rotate
   marka mavisini başka renklere çeviriyordu. Yön bilerek TEK. */
.yrm-desen i:nth-child(1)  { animation-name: yrm-huzme-a; animation-timing-function: linear; }
.yrm-desen i:nth-child(2)  { animation-name: yrm-huzme-b; animation-timing-function: ease-in-out;  }
.yrm-desen i:nth-child(3)  { animation-name: yrm-huzme-c; animation-timing-function: linear; }
.yrm-desen i:nth-child(4)  { animation-name: yrm-huzme-a; animation-timing-function: ease-out;  }
.yrm-desen i:nth-child(5)  { animation-name: yrm-huzme-b; animation-timing-function: linear; }
.yrm-desen i:nth-child(6)  { animation-name: yrm-huzme-c; animation-timing-function: ease-in; }
.yrm-desen i:nth-child(7)  { animation-name: yrm-huzme-a; animation-timing-function: linear; }
.yrm-desen i:nth-child(8)  { animation-name: yrm-huzme-b; animation-timing-function: ease-out; }
.yrm-desen i:nth-child(9)  { animation-name: yrm-huzme-c; animation-timing-function: linear; }
.yrm-desen i:nth-child(10) { animation-name: yrm-huzme-a; animation-timing-function: ease-in-out;  }
.yrm-desen i:nth-child(11) { animation-name: yrm-huzme-b; animation-timing-function: linear; }

@keyframes yrm-huzme-a {
  0%   { background-position: 0 -30%; opacity: 0; }
  10%  { opacity: 1; }
  62%  { opacity: 1; }
  74%  { opacity: 0; }
  100% { background-position: 0 130%; opacity: 0; }
}
@keyframes yrm-huzme-b {
  0%   { background-position: 0 -30%; opacity: 0; }
  31%  { opacity: 0; }
  38%  { opacity: 1; }
  49%  { opacity: 1; }
  56%  { opacity: 0; }
  100% { background-position: 0 130%; opacity: 0; }
}
@keyframes yrm-huzme-c {
  0%   { background-position: 0 -30%; opacity: 0; }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  44%  { opacity: 0; }
  100% { background-position: 0 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .yrm-desen i { animation: none; opacity: 0; }
}
}
}

.yrm-ic {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.yrm-rozet {
  display: inline-block;
  padding: 0.55em 1.15em;
  border-radius: 100px;
  border: 1px solid rgba(10, 10, 10, 0.14);
  background: #fff;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.6);
}

/* Kartların üstüne bindiği alan. Yüksekliği sabit olmak zorunda: kartların
   yerleri yüzdeyle veriliyor. */
.yrm-sahne {
  position: relative;
  margin: clamp(20px, 2.6vw, 34px) auto 0;
  height: clamp(510px, 43vw, 600px);
}

/* Sahnenin boyu kart sayısıyla büyüyor: sabit boyda üç yorumla alt yarı boş
   kalıyordu. */
.yrm-sahne:has(.yrm-kart:nth-child(4)) {
  height: clamp(560px, 50vw, 690px);
}

.yrm-sahne:has(.yrm-kart:nth-child(5)) {
  height: clamp(640px, 60vw, 840px);
}

.yrm-sahne:has(.yrm-kart:nth-child(6)) {
  height: clamp(720px, 68vw, 960px);
}

.yrm-baslik {
  position: absolute;
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  z-index: 0;
  width: 92%;
  /* Referanstaki gibi üç satıra kırılsın: tek satır uzarsa sağdaki kart
     başlığın yarısını yutuyor, kelimeler hiç okunmuyor. */
  max-width: 11em;
  margin: 0;
  font-weight: 300;
  font-size: clamp(34px, 5.6vw, 78px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #0a0a0a;
}

.yrm-liste {
  position: absolute;
  inset: 0;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Konum katmanı. Oklarla yer değiştirirken left/top/width yumuşak geçiyor,
   kaydırırken de --kay ile parallax alıyor. */
.yrm-kart {
  --gecikme: 0s;
  --kay: 0px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--g);
  /* Dönüşün perspektifi buradan geliyor; dönüşün kendisi içteki
     .yrm-donus katmanında. Perspektif ne kadar kısaysa dönüş o kadar
     belirgin — 1000px'te açı gözle seçilmiyordu. */
  perspective: 760px;
  transform: translateY(var(--kay));
  transition:
    left 0.85s cubic-bezier(0.62, 0.05, 0.2, 1),
    top 0.85s cubic-bezier(0.62, 0.05, 0.2, 1),
    width 0.85s cubic-bezier(0.62, 0.05, 0.2, 1),
    transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.5s ease;
}

/*
 * Dönüş katmanı. Kartlar düz duruyor; bölüm göründüğü anda BEŞİ BİRDEN okun
 * yönüne dönüyor — sağ üst köşe öne, sol alt köşe geriye.
 *
 * Neden ayrı bir katman: sayfadaki üç hareketin üçü de transform. Konum ve
 * parallax dıştaki li'de, dönüş burada, giriş ve salınım içteki .yrm-cam'da.
 * İkisi aynı elemanda olsaydı biri diğerini ezerdi. Ayrılmalarının bir faydası
 * daha var: dönüş 0.9 sn sürebiliyor (birlikte dönerken ağır bir cam gibi),
 * parallax ise kısa geçişte kalıyor.
 */
/*
 * Camın eti. Kart 3B döndüğü için levhanın YAN YÜZLERİ de görünmeli — kalınlık
 * kenar çizgisinin kalınlığı değil, camın derinliği demek.
 *
 * Dört yan yüz de gerçek 3B: her biri kartın bir kenarına yapışıp o kenar
 * etrafında 90° dönerek geriye uzanıyor, yani levha ekrana doğru değil ekrandan
 * İÇERİ doğru kalınlaşıyor. Dördü de dışa bakacak şekilde kuruldu, bu yüzden
 * `backface-visibility: hidden` görünmeyenleri kendiliğinden eliyor: kart sağa
 * dönünce sol yüz, sola dönünce sağ yüz görünüyor. Hangi yüzün görüneceğini
 * JS'ten hesaplamak gerekmiyor.
 *
 * Yan yüzlerde `backdrop-filter` YOK; düz gradyanlar. Kart başına dört ucuz
 * eleman, beş kartta yirmi — hepsi tek bir composite katmanı.
 */
.yrm-yan {
  position: absolute;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.yrm-yan--sag,
.yrm-yan--sol {
  top: var(--kose);
  height: calc(100% - var(--kose) * 2);
  width: var(--et);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(214, 226, 240, 0.72) 45%,
    rgba(180, 196, 216, 0.6) 100%
  );
}

.yrm-yan--ust,
.yrm-yan--alt {
  left: var(--kose);
  width: calc(100% - var(--kose) * 2);
  height: var(--et);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(214, 226, 240, 0.7) 45%,
    rgba(172, 190, 212, 0.58) 100%
  );
}

/* Her yüz kendi kenarına yapışıp o kenar etrafında geriye dönüyor. */
.yrm-yan--sag {
  left: 100%;
  transform-origin: left center;
  transform: rotateY(90deg);
}

.yrm-yan--sol {
  right: 100%;
  transform-origin: right center;
  transform: rotateY(-90deg);
}

.yrm-yan--ust {
  bottom: 100%;
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.yrm-yan--alt {
  top: 100%;
  transform-origin: center top;
  transform: rotateX(-90deg);
}

.yrm-donus {
  /* Yan yüzler ancak burada 3B korunursa gerçekten derinliğe gider. */
  transform-style: preserve-3d;
  position: relative;

  /* Giriş de burada. Daha önce `.yrm-cam`'daydı ama o elemanın
     `backdrop-filter`ı var: yarı saydam bir backdrop katmanı her karede
     yeniden hesaplanıyor ve kartlar belirirken zıplayarak geliyordu.
     Saydamlık backdrop'suz katmana alınınca temiz açılıyor. */
  opacity: 0;
  transform: translateY(30px) rotateX(0) rotateY(0);
  /* Geçiş hem girişte hem fareyi takip ederken kullanılıyor: 0.9 sn giriş
     için güzeldi ama fare takibini sürükleyici yapıyordu. */
  transition:
    opacity 0.7s ease,
    transform 0.5s cubic-bezier(0.22, 0.68, 0.16, 1);
}

/*
 * Dönüş yönü: kart okun gösterdiği yöne BAKIYOR. Yani okun durduğu sağ üst
 * köşe geriye gidiyor, sol alt köşe öne geliyor — sağ kenar kısa/uzak, sol
 * kenar uzun/yakın görünür.
 *
 * Bunun tersi de denendi (sağ üst köşe öne). İkisi de "oka doğru dönmek"
 * diye okunabiliyor; Büşra bakan hâli seçti.
 *
 * İşaretler: CSS'te +Y aşağı bakar, dolayısıyla pozitif `rotateX` ÜST kenarı
 * uzaklaştırır; pozitif `rotateY` de SAĞ kenarı uzaklaştırır. İkisi de
 * pozitif olunca sağ üst köşe geriye gidiyor.
 */
.yorumlar.gorundu .yrm-donus {
  opacity: 1;
  transform: translateY(0) rotateX(var(--don-x)) rotateY(var(--don-y));
}

/* İmleç üstündeyken kart yükseliyor; duruşu değişmiyor. */
@media (hover: hover) and (min-width: 861px) {
  .yrm-kart:hover {
    z-index: 5;
    transform: translateY(calc(var(--kay) - 6px));
  }
}

/* Kartların yerleri: referanstaki dağılımdan ölçüldü. İlk üçü kendi başına da
   dengeli duruyor (sol üst · sağ üst · orta alt) — panelde çoğu zaman üç
   yorum olacak. JS yoksa da kartlar bu yerlerde durur. */
/* Yerler ust uste binmeyecek sekilde secildi. Onceki dizilimde 2 ile 4
   sagda cakisiyordu (x 79-86% ortak, y 289-319px ortak). Simdi 2 yukari
   cekildi, 4 asagi ve saga: dikeyde artik hic ortak alanlari yok. */
.yrm-kart:nth-child(1) { --x: 0%;   --y: 22%; --g: 23%; }
.yrm-kart:nth-child(2) { --x: 60%;  --y: 2%;  --g: 23%; }
.yrm-kart:nth-child(3) { --x: 40%;  --y: 58%; --g: 23%; }
.yrm-kart:nth-child(4) { --x: 80%;  --y: 41%; --g: 20%; }
.yrm-kart:nth-child(5) { --x: 17%;  --y: 66%; --g: 22%; }
.yrm-kart:nth-child(6) { --x: 63%;  --y: 82%; --g: 20%; }

/*
 * Cam levha — kalın, berrak cam.
 *
 * Araştırmanın özeti: gerçek kırılma (Apple'ın "liquid glass" işi) SVG
 * `feDisplacementMap`'i `backdrop-filter`a besleyerek yapılıyor — arka plan
 * piksellerini kenarlarda büküyorsun. Tek sorunu, SVG filtresini
 * backdrop-filter olarak YALNIZCA Chromium destekliyor; Safari ve Firefox
 * sessizce düz bulanıklığa düşüyor. Büşra Firefox kullandığı için o yol
 * seçilmedi; kalınlık her tarayıcıda çalışan optik ipuçlarıyla kuruldu.
 *
 * Camı kalın gösteren şey saydamlık değil, KENAR. Gerçek kalın camda:
 *   · kenar bandı ortadan daha çok bulanıklaştırır (ışık daha uzun yol alır),
 *   · bandın iki yakasında zıt parlamalar olur (pahın üstü ve altı),
 *   · pahın iç sınırında ince bir karanlık iz kalır,
 *   · ve cam yüzeyden yükseldiği için altında sıkı bir temas gölgesi olur.
 *
 * Dördü birden burada. Kenar bandı ayrı bir katman (`::before`): kendi
 * backdrop-filter'ı var, maskeyle sadece çepere bırakılıyor. Ortadaki cam
 * neredeyse berrak kaldığı için ikisi arasındaki fark camın etini gösteriyor.
 *
 * `::after` yüzey yansıması. Prizma orada — kenarda renkli çerçeve denendi ve
 * çıkartma gibi durdu; gerçek camda renk yansımanın kenarında ayrışır.
 */
.yrm-cam {
  /* Camın eti. Kenar bandının genişliği bu; kalın cam demek geniş pah
     demek. Dolgunun bundan büyük olması şart, yoksa yazı bandın altına
     giriyor. */
  --pah: 17px;
  position: relative;
  display: block;
  isolation: isolate;
  text-align: left;
  /* Dolgu pah kalınlığından büyük olmak zorunda, yoksa yazı kenar bandının
     altına giriyor. */
  padding: clamp(29px, 2.7vw, 35px);
  /* Köşeler yumuşak. Yan yüzler düz dikdörtgen olduğu için yuvarlatılan
     köşede taşarlar; bu yüzden aşağıda uçlarından --kose kadar kısaltılıyorlar
     ve köşede küçük bir pay kalıyor. Yarıçap bilerek küçük tutuldu: büyüdükçe
     o pay da büyür. */
  border-radius: var(--kose);
  background: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.22) 46%,
    rgba(255, 255, 255, 0.34) 100%
  );
  -webkit-backdrop-filter: contrast(0.2) brightness(1.62) saturate(1.2) blur(0.4px);
  backdrop-filter: contrast(0.2) brightness(1.62) saturate(1.2) blur(0.4px);
  /* Çizgi yok. Daha önce dışta 1px'lik koyu bir kırılma çizgisi ve içte
     pah genişliğinde düz bir halka vardı; ikisi de kartın etrafına çizilmiş
     birer çerçeve gibi duruyordu. Kalınlık artık yalnızca yumuşak gölgelerden
     ve yan yüzlerden okunuyor. */
  box-shadow:
    inset 0 0 26px -8px rgba(16, 28, 48, 0.3),
    /* Temas gölgesi: sıkı ve yakın, camın yüzeyden yükseldiğini söyleyen şey. */
    0 3px 7px -3px rgba(12, 24, 46, 0.3),
    /* Taşıyıcı gölge. */
    0 20px 40px rgba(12, 24, 46, 0.12);
}

/*
 * Kenar bandı = camın kalınlığı. Maske yalnızca `--pah` kadarlık çeperi
 * bırakıyor; iki zıt parlama pahı yuvarlatıyor (üst-solda güçlü, alt-sağda
 * zayıf).
 *
 * Bandın kendi `backdrop-filter`ı vardı — optik olarak daha doğruydu ama kart
 * başına İKİ backdrop katmanı demekti, beş kartta on tane. Kaydırırken hepsi
 * her karede yeniden çiziliyordu ve makine ısınıyordu. Kalınlık artık gradyan
 * ve gölgeyle veriliyor; görüntüdeki fark küçük, maliyet farkı büyük.
 */
.yrm-cam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: var(--pah);
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.2) 38%,
    rgba(255, 255, 255, 0.3) 62%,
    rgba(255, 255, 255, 0.72) 100%
  );
  /* Pahın parlamaları da çizgi değil: keskin 1.5px'lik beyaz hatlar silindi,
     yumuşak bir iç ışıma kaldı. */
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.75);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/*
 * Yüzey yansıması. Gradyan kartın iki katı genişlikte; imleç gelince
 * background-position kayıyor ve parlama yüzeyde geçiyor. Prizma burada:
 * bandın iki kenarında hafif renk kayması var, gerçek camda ışık tam kenarda
 * ayrışıyor.
 */
.yrm-cam::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    114deg,
    transparent 0 37%,
    rgba(255, 186, 214, 0.16) 39.5%,
    rgba(255, 255, 255, 0.6) 41.5%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(168, 214, 255, 0.15) 50%,
    transparent 53% 100%
  );
  background-size: 260% 100%;
  background-position: 10% 0;
  opacity: 0.5;
  transition: background-position 0.75s cubic-bezier(0.3, 0.6, 0.2, 1), opacity 0.5s ease;
}

.yrm-cam:hover::after {
  background-position: 90% 0;
  opacity: 0.72;
}

/* Kart eğilip yükselirken gölgesi de uzuyor. */
.yrm-kart:hover .yrm-cam {
  box-shadow:
    inset 0 0 0 var(--pah) rgba(16, 28, 48, 0.045),
    inset 0 0 14px -4px rgba(16, 28, 48, 0.22),
    0 0 0 1px rgba(16, 28, 48, 0.1),
    0 6px 12px -5px rgba(12, 24, 46, 0.3),
    0 30px 56px rgba(12, 24, 46, 0.16);
}

/*
 * Camın üstündeki tek geçiş: hover'da derinleşen gölge.
 *
 * Burada bir de sonsuz bir salınım animasyonu vardı. Kaldırıldı —
 * `backdrop-filter`lı beş elemanın transform'unu durmadan oynatmak, sayfa
 * dururken bile her kareyi yeniden çizdiriyordu; ısınmanın ana sebebi buydu.
 * Hareket zaten var: girişte hep birlikte dönüş, kaydırmada derinlik,
 * imleçte kalkma.
 */
.yrm-cam {
  transition: box-shadow 0.32s ease;
}

.yrm-tirnak {
  display: block;
  /* Sağdaki ok rozetinin altına girmesin. */
  padding-right: 30px;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 0.72;
  color: rgba(10, 10, 10, 0.22);
}

.yrm-alinti {
  margin: clamp(9px, 1.1vw, 14px) 0 0;
  font-weight: 300;
  font-size: clamp(12px, 1.05vw, 13px);
  line-height: 1.58;
  color: rgba(0, 0, 0, 0.7);
}

.yrm-kim {
  display: block;
  margin: clamp(12px, 1.4vw, 17px) 0 0;
  padding: clamp(10px, 1.2vw, 14px) 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}

.yrm-ad {
  display: block;
  font-size: clamp(11px, 1.05vw, 13px);
  color: #0a0a0a;
}

.yrm-kurum {
  display: block;
  margin-top: 0.25em;
  font-weight: 300;
  font-size: clamp(10px, 0.95vw, 11px);
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.45);
}

/*
 * Kartın köşesindeki ok — referanstaki rozetin aynısı. İleri/geri düğmesi
 * olarak da denendi ama o, bölümü "birden fazla sayfa varmış" gibi gösteriyordu;
 * ok referansta olduğu gibi kartın kendi üstünde duruyor.
 *
 * Şu an bir yere gitmiyor, hareket aksanı. Yorumlara iş bağlantısı alanı
 * eklenirse buradan o işe gider.
 */
.yrm-ok {
  position: absolute;
  top: clamp(23px, 2.2vw, 28px);
  right: clamp(23px, 2.2vw, 28px);
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.11);
  background: rgba(255, 255, 255, 0.55);
  color: rgba(10, 10, 10, 0.6);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.yrm-ok svg {
  width: 15px;
  height: 15px;
  display: block;
  /* Okun kendi ucu yukarı-sağı gösteriyor; --ok-aci onu fareye çeviriyor. */
  transform: rotate(var(--ok-aci));
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Kartın üstüne gelince ok köşeye doğru fırlıyor, halo da parlıyor. */
.yrm-cam:hover .yrm-ok {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
}

.yrm-cam:hover .yrm-ok svg {
  transform: rotate(var(--ok-aci)) translate(2.5px, -2.5px);
}

/* Dar ekranda dağınık yerleşim tutmuyor: kartlar üst üste biner. Sahne
   çözülüp kartlar başlığın altında normal akışa geçiyor, oklar da gereksiz. */
@media (max-width: 860px) {
  .yrm-sahne {
    height: auto;
  }

  .yrm-baslik {
    position: static;
    transform: none;
    width: auto;
    margin: 0 auto;
  }

  .yrm-liste {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 20px);
    max-width: 460px;
    margin: clamp(26px, 6vw, 40px) auto 0;
  }

  .yrm-kart {
    position: static;
    width: auto;
    transform: none;
  }

  .yrm-donus {
    transform: none;
  }

}

/* Hareket istemeyen kullanıcıda dönüş ve derinlik kapanıyor; kartlar
   doğrudan yerinde beliriyor. */
@media (prefers-reduced-motion: reduce) {
  .yrm-donus,
  .yorumlar.gorundu .yrm-donus {
    transform: none;
    transition: opacity 0.4s ease;
  }

  .yrm-kart {
    transition: opacity 0.4s ease;
  }
}

/*
 * İmleci kovalayan üç ışıltı ve arkalarındaki iz (assets/js/imlec.js).
 *
 * Karışım kipi yok: `screen` koyu bölümlerde güzel ama beyazın üstünde hiç
 * görünmüyor, `multiply` tam tersi. Site ikisini de kullanıyor.
 *
 * Boyut, renk ve saydamlık JS'ten geliyor (kuyruk geriye doğru küçülüp
 * soluyor), burada yalnızca yerleşim var.
 */
.imlec-kureler {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.imlec-kureler.acik {
  opacity: 1;
}

.imlec-nokta {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  will-change: transform;
}

/*
 * İki alt köşedeki yüzen düğmeler. Sağda başa dön, solda hızlı iletişim.
 *
 * Düğmeler cam: sitenin geri kalanındaki dil. Zeminleri koyu değil saydam,
 * çünkü hem siyah hem beyaz bölümlerin üstünden geçiyorlar.
 */
.yuzen {
  position: fixed;
  z-index: 18;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.4vw, 28px);
  padding: 0 clamp(16px, 2.4vw, 28px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.yuzen-sol {
  position: relative;
  pointer-events: auto;
}

.yuzen-dugme {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(140, 160, 190, 0.32);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 10px 26px rgba(12, 24, 46, 0.16);
  color: #0a0a0a;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, opacity 0.3s ease;
}

.yuzen-dugme svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* Başa dön düğmesi sade: cam zemin, imleçte siyaha dönüyor. Sohbet küresinin
   kendi görünümü aşağıda, bu kuralın dışında. */
.yuzen-yukari:hover {
  transform: translateY(-2px);
  background: #0a0a0a;
  color: #fff;
}

/*
 * Sohbet düğmesi. Üç referans denendi; sonuncusu tuttu: koyu bir bilye,
 * kenarında bir yanı altın bir yanı camgöbeği ışıyan halka, arkasından dışa
 * uzanan ince ışınlar.
 *
 * Aradaki iki deneme kayıt için: önce koyu mor bir küre, sonra MagicOS'taki
 * aydınlık cam bilye. İkisi de elendi.
 *
 * Katmanlar: gövde bilyenin koyu içi, `::before` ışıyan kenar halkası,
 * `::after` arkadaki ışınlar. Işınlar maskeyle yalnızca kürenin DIŞINDA
 * yaşıyor ve çok yavaş dönüyor — küre kendi ışığını saçıyormuş gibi.
 *
 * Hayatı tek bir 9 saniyelik döngüde: sağa sola bakınıyor, ortada bir kez
 * kırpıyor, sonuna doğru gözleri gülümsemeye kısılırken küre omuz atıyor.
 * Üçü de aynı süreyi paylaşıyor; ayrı sürelerle yazılsalardı zamanla kayıp
 * birbirinden kopacaklardı.
 */
.yuzen-sohbet {
  position: relative;
  /* Aurora küreye kırpılsın diye. */
  overflow: hidden;
  border: none;
  background: radial-gradient(circle at 44% 36%, #15304f 0%, #0a1428 56%, #050a16 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Dışarıda halka yok; yalnızca kürenin yüzeyden kalktığını söyleyen
     yumuşak bir gölge ve içeriden gelen hafif bir aydınlanma. */
  box-shadow:
    inset 0 0 12px -3px rgba(130, 190, 245, 0.4),
    0 8px 22px rgba(6, 14, 32, 0.5),
    0 0 16px rgba(90, 150, 230, 0.2);
  animation: bot-kahkaha 9s ease-in-out infinite;
}

/*
 * Aurora kürenin İÇİNDE geziyor; dışarıda halka ya da çizgi yok.
 *
 * Neden CSS değil SVG: aurora yuvarlak bir leke değil, kıvrılan bir perde.
 * Radyal gradyanlarla defalarca denendi ve hepsi "lava lamba" gibi durdu —
 * yuvarlak gradyan hep leke okunuyor. Perdeyi üreten şey gürültü:
 * `feTurbulence` bir gürültü alanı üretiyor, `feDisplacementMap` da renk
 * bantlarını o alana göre büküyor. Bant frekansı yavaşça değiştiği için perde
 * sürekli akıyor. (Aynı işi bir WebGL shader'ı da yapardı ama sayfada zaten
 * iki GL bağlamı var ve burası 48px'lik bir düğme.)
 *
 * `mix-blend-mode: screen`: aurora koyu camın üstünde ışıyor, onu boyamıyor.
 */
/* Seçici bilerek iki parçalı: `.yuzen-dugme svg` kuralı (başa dön okunu 21px
   yapan kural) tek sınıflı bir kuraldan güçlü ve aurorayı da 21px'e
   düşürüyordu. */
.yuzen-sohbet .bot-aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* SVG'de taşma varsayılan olarak görünür: bükülen renkler dairenin dışına
     çıkıyordu. */
  overflow: hidden;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: screen;
}

.yuzen-sohbet:hover,
.yuzen-sohbet.acik {
  box-shadow:
    inset 0 0 14px -3px rgba(150, 205, 255, 0.5),
    0 10px 26px rgba(6, 14, 32, 0.55),
    0 0 22px rgba(110, 170, 240, 0.3);
}

.bot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: bot-bakis 9s ease-in-out infinite;
}

/* Gözler koyu bilyenin üstünde açık: kenardaki ışığın rengini taşıyorlar. */
.bot-goz {
  display: block;
  width: 5px;
  height: 13px;
  border-radius: 3.5px;
  background: linear-gradient(180deg, #ffffff 0%, #cfe9ff 100%);
  box-shadow: 0 0 8px rgba(170, 220, 255, 0.85);
  animation: bot-kirp 9s linear infinite;
}

/* Sağa sola bakınma. */
@keyframes bot-bakis {
  0%, 14% { transform: translateX(0); }
  20%, 32% { transform: translateX(-2px); }
  38%, 50% { transform: translateX(2px); }
  56%, 100% { transform: translateX(0); }
}

/* Ortada bir kırpma, sonuna doğru gülümseme (gözler kısılıyor). */
@keyframes bot-kirp {
  0%, 52%, 56%, 66% { transform: scaleY(1); }
  53.5%, 54.5% { transform: scaleY(0.12); }
  70%, 82% { transform: scaleY(0.42); }
  86%, 100% { transform: scaleY(1); }
}

/* Kahkahayla birlikte küre omuz atıyor. */
@keyframes bot-kahkaha {
  0%, 66% { transform: translateY(0) rotate(0deg); }
  70% { transform: translateY(-2px) rotate(-5deg); }
  74% { transform: translateY(0) rotate(4deg); }
  78% { transform: translateY(-1.4px) rotate(-3deg); }
  82% { transform: translateY(0) rotate(1.5deg); }
  86%, 100% { transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .yuzen-sohbet,
  .bot,
  .bot-goz {
    animation: none;
  }
}

/* Başa dön yalnızca bir ekran boyu kaydırıldıktan sonra. */
.yuzen-yukari {
  opacity: 0;
  visibility: hidden;
}

.yuzen-yukari.gorunur {
  opacity: 1;
  visibility: visible;
}

/* Sohbet paneli: düğmenin üstünde açılır. */
.yuzen-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(78vw, 288px);
  padding: clamp(16px, 2vw, 22px);
  border-radius: 16px;
  border: 1px solid rgba(140, 160, 190, 0.3);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 20px 50px rgba(12, 24, 46, 0.2);
  color: #0a0a0a;
}

.yuzen-baslik {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
}

.yuzen-alt {
  margin: 0.55em 0 0;
  font-weight: 300;
  font-size: clamp(11px, 1.1vw, 12px);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.55);
}

.yuzen-liste {
  list-style: none;
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  padding: clamp(12px, 1.6vw, 16px) 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
  display: grid;
  gap: 0.55em;
}

.yuzen-liste a {
  color: #0a0a0a;
  font-size: clamp(12px, 1.2vw, 13.5px);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.yuzen-liste a:hover {
  border-bottom-color: rgba(10, 10, 10, 0.4);
}

@media (max-width: 620px) {
  .yuzen-dugme {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   Blog (yazılar) sayfası
   Yerleşim referanstan: ortada rozet + iki satır başlık, altında öne çıkan
   tek yazı (solda görsel / sağda metin), onun altında üçlü ızgara.
   Zemin sitenin açık bölümleriyle aynı dilde: kırık beyaz, ince çerçeve,
   yumuşak gölge. Renk yok; vurgu yalnız tipografide.
   ========================================================================== */
.blog-sayfa {
  background: #f2f2f3;
  padding: clamp(56px, 8vw, 110px) clamp(18px, 5vw, 56px) clamp(70px, 9vw, 130px);
}

.blog-ust {
  max-width: 1160px;
  margin: 0 auto clamp(34px, 5vw, 64px);
  text-align: center;
}

.blog-rozet {
  display: inline-block;
  padding: 0.5em 1.15em;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.08);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.66);
}

.blog-baslik {
  margin: clamp(18px, 2.4vw, 30px) 0 0;
  font-weight: 700;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #0a0a0a;
}

.blog-baslik span { display: block; }

/* Referansta ikinci satırın TAMAMI değil, yalnız son kelimesi italik ve
   serif. Tüm satır italik olunca vurgu kayboluyordu. */
.blog-vurgu {
  /* Sitede yüklü bir serif yok; tek kelime için font isteği açmaya
     değmez. Georgia her yerde kurulu ve italik kesiti var. */
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---- öne çıkan yazı ---- */
.blog-one {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.04), 0 18px 46px rgba(16, 36, 62, 0.07);
}

/* Görsel kartın kenarına yapışmıyor: referansta çevresinde beyaz bir
   çerçeve var ve görselin kendi köşe yuvarlaması oluyor. */
.blog-one-gorsel {
  display: block;
  position: relative;
  margin: clamp(10px, 1vw, 14px);
  border-radius: 14px;
  overflow: hidden;
  min-height: 320px;
  background: #e9e9ea;
}

.blog-one-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-one-yazi {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.6vw, 54px) clamp(28px, 3.6vw, 54px) clamp(24px, 3vw, 40px);
}

.blog-etiket {
  align-self: flex-start;
  padding: 0.42em 0.95em;
  border-radius: 100px;
  background: #f1f1f2;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.62);
}

.blog-one-baslik {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-weight: 700;
  font-size: clamp(21px, 2.5vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.blog-one-baslik a,
.blog-kart-baslik a {
  color: #0a0a0a;
  text-decoration: none;
}

.blog-one-baslik a:hover,
.blog-kart-baslik a:hover { text-decoration: underline; text-underline-offset: 3px; }

.blog-one-ozet {
  margin: 0.9em 0 0;
  max-width: 34em;
  font-weight: 300;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
}

/* Alt satır en dibe yapışır: kart yüksekliği değişse de hizası bozulmaz. */
.blog-one-alt {
  margin-top: auto;
  padding-top: clamp(20px, 2.6vw, 34px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.blog-sure {
  position: relative;
  padding-left: 14px;
  font-size: clamp(11px, 1.05vw, 13px);
  color: rgba(0, 0, 0, 0.55);
}

.blog-sure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0a0a0a;
}

.blog-imza {
  font-size: clamp(12px, 1.2vw, 15px);
  color: rgba(0, 0, 0, 0.72);
}

.blog-imza em { font-style: italic; }

/* ---- ızgara ---- */
.blog-izgara {
  max-width: 1160px;
  margin: clamp(16px, 2vw, 26px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.blog-kart {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(10, 10, 10, 0.04), 0 14px 34px rgba(16, 36, 62, 0.06);
}

.blog-kart-gorsel {
  display: block;
  position: relative;
  margin: clamp(9px, 0.9vw, 12px);
  border-radius: 13px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #e9e9ea;
}

.blog-kart-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Izgarada rozet görselin ÜSTÜNDE duruyor: metin alanı kısa, orada
   yer kaplamasın diye. */
.blog-etiket--ustte {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
}

.blog-kart-yazi { padding: clamp(6px, 0.8vw, 10px) clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px); }

.blog-kart-baslik {
  margin: 0;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.26;
  letter-spacing: -0.02em;
}

.blog-kart-ozet {
  margin: 0.75em 0 0;
  font-weight: 300;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.58);
}

.blog-bos {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

.blog-sayfalama {
  max-width: 1160px;
  margin: clamp(30px, 4vw, 54px) auto 0;
  text-align: center;
}

.blog-sayfalama a,
.blog-sayfalama .current {
  display: inline-block;
  padding: 0.5em 0.9em;
  color: rgba(0, 0, 0, 0.66);
  text-decoration: none;
}

.blog-sayfalama .current { color: #0a0a0a; font-weight: 700; }

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

@media (max-width: 820px) {
  .blog-one { grid-template-columns: 1fr; }
  .blog-one-gorsel { min-height: 220px; aspect-ratio: 16 / 10; }
  .blog-izgara { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tek yazı sayfası
   Referanstan: tarih + okuma süresi, büyük başlık, giriş, geniş görsel;
   altında solda dar yapışkan şerit (yazan / paylaş / ilgili yazı),
   sağda metin.
   ========================================================================== */
.yazi-sayfa {
  background: #fff;
  padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 56px) clamp(60px, 8vw, 110px);
}

.yazi {
  max-width: 1120px;
  margin: 0 auto;
}

.yazi-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1.05vw, 13px);
  color: rgba(0, 0, 0, 0.5);
}

.yazi-meta-ayrac { color: rgba(0, 0, 0, 0.28); }

.yazi-baslik {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  max-width: 16em;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #0a0a0a;
}

.yazi-giris {
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 46em;
  font-weight: 300;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.62;
  color: rgba(0, 0, 0, 0.6);
}

.yazi-gorsel {
  margin: clamp(26px, 3.4vw, 46px) 0 0;
  border-radius: 18px;
  overflow: hidden;
  background: #f1f1f2;
}

.yazi-gorsel img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- iki sütun ---- */
.yazi-govde {
  margin-top: clamp(30px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(200px, 250px) 1fr;
  gap: clamp(28px, 4.5vw, 78px);
  align-items: start;
}

/* Yapışkan: uzun yazıda paylaş düğmeleri ve ilgili yazı ekranda kalıyor. */
.yazi-yan {
  position: sticky;
  top: clamp(80px, 10vh, 120px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 32px);
}

.yazi-yan-baslik {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(0, 0, 0, 0.42);
}

.yazi-yazar {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.yazi-yazar-rozet {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #0a0a0a;
  display: grid;
  place-items: center;
}

.yazi-yazar-logo { width: 20px; height: 20px; display: block; }

.yazi-yazar b {
  display: block;
  font-size: clamp(13px, 1.25vw, 15px);
  font-weight: 700;
  color: #0a0a0a;
}

.yazi-yazar b em { font-style: italic; font-weight: 400; }

.yazi-yazar small {
  display: block;
  margin-top: 2px;
  font-size: clamp(11px, 1.05vw, 12px);
  color: rgba(0, 0, 0, 0.5);
}

.yazi-paylas {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.yazi-kopyala,
.yazi-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 0.95em;
  border-radius: 100px;
  border: 1px solid rgba(10, 10, 10, 0.14);
  background: #fff;
  font: inherit;
  font-size: clamp(11px, 1.05vw, 13px);
  color: rgba(0, 0, 0, 0.72);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.yazi-ikon { width: 34px; padding: 0; }

.yazi-kopyala:hover,
.yazi-ikon:hover { border-color: rgba(10, 10, 10, 0.4); color: #0a0a0a; }

/* ---- ilgili yazı kartı ---- */
.yazi-ilgili {
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 36, 62, 0.06);
}

.yazi-ilgili-gorsel {
  display: block;
  aspect-ratio: 16 / 10;
  background: #f1f1f2;
}

.yazi-ilgili-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yazi-ilgili-yazi { padding: 14px 16px 16px; }

.yazi-ilgili-meta {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.yazi-ilgili-baslik {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 16px);
  line-height: 1.26;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}

.yazi-ilgili-dugme {
  margin-top: 14px;
  display: block;
  padding: 0.7em 1em;
  border-radius: 100px;
  border: 1px solid rgba(10, 10, 10, 0.14);
  text-align: center;
  font-size: clamp(11px, 1.05vw, 13px);
  color: #0a0a0a;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.yazi-ilgili-dugme:hover { background: #0a0a0a; color: #fff; }

/* ---- metin ---- */
.yazi-metin {
  max-width: 44em;
  font-weight: 300;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.72;
  color: rgba(0, 0, 0, 0.74);
}

.yazi-metin > * + * { margin-top: 1.15em; }

.yazi-metin h2,
.yazi-metin h3 {
  margin-top: 1.9em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #0a0a0a;
}

.yazi-metin h2 { font-size: clamp(19px, 2.1vw, 27px); }
.yazi-metin h3 { font-size: clamp(16px, 1.7vw, 21px); }

.yazi-metin ol,
.yazi-metin ul { padding-left: 1.3em; }
.yazi-metin li + li { margin-top: 0.6em; }

.yazi-metin img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Alıntı bloğu referanstaki "Conclusion" kutusunun karşılığı. */
.yazi-metin blockquote {
  margin: 1.8em 0;
  padding: clamp(18px, 2.2vw, 28px);
  border-radius: 16px;
  background: #f4f4f5;
  border: 0;
  font-size: clamp(13px, 1.25vw, 16px);
  color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 900px) {
  .yazi-govde { grid-template-columns: 1fr; }
  .yazi-yan { position: static; }
  .yazi-ilgili { max-width: 420px; }
}

/* ---- yazı altındaki yorumlar ----
   Varsayılan form sayfanın diline uymuyordu: çıplak kutular ve sistem
   düğmesi. Alanlar tek sütun, çünkü yazı metni zaten dar bir kolonda. */
.yorum-alan {
  max-width: 1120px;
  margin: clamp(40px, 5vw, 70px) auto 0;
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}

/* Yazı gövdesiyle aynı hizaya otursun: solda dar şerit kadar boşluk. */
@media (min-width: 901px) {
  .yorum-alan {
    padding-left: calc(clamp(200px, 22vw, 250px) + clamp(28px, 4.5vw, 78px));
  }
}

.yorum-baslik,
.yorum-form-baslik {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 24px);
  letter-spacing: -0.025em;
  color: #0a0a0a;
}

.yorum-not {
  margin: 0 0 clamp(14px, 1.7vw, 20px);
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(0, 0, 0, 0.5);
}

.yorum-form { max-width: 44em; }

.yorum-satir { margin: 0 0 12px; }

.yorum-satir label {
  display: block;
  margin-bottom: 7px;
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(0, 0, 0, 0.6);
}

.yorum-satir input,
.yorum-satir textarea {
  width: 100%;
  padding: 0.95em 1.15em;
  border: 1px solid rgba(10, 10, 10, 0.14);
  border-radius: 14px;
  background: #fafafa;
  font: inherit;
  font-size: clamp(13px, 1.25vw, 15px);
  color: #0a0a0a;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.yorum-satir textarea { resize: vertical; min-height: 130px; }

.yorum-satir input::placeholder,
.yorum-satir textarea::placeholder { color: rgba(0, 0, 0, 0.34); }

.yorum-satir input:focus,
.yorum-satir textarea:focus {
  outline: none;
  border-color: rgba(10, 10, 10, 0.42);
  background: #fff;
}

.yorum-form .form-submit { margin: 6px 0 0; }

.yorum-gonder {
  padding: 1em 2.4em;
  border: 0;
  border-radius: 100px;
  background: #0a0a0a;
  color: #fff;
  font: inherit;
  font-size: clamp(13px, 1.25vw, 15px);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.25s ease, letter-spacing 0.25s ease;
}

.yorum-gonder:hover { transform: translateY(-1px); letter-spacing: 0.12em; }

/* ---- yazılmış yorumlar ---- */
.yorum-liste {
  margin: 0 0 clamp(30px, 4vw, 50px);
  padding: 0;
  list-style: none;
  max-width: 44em;
}

.yorum-liste .comment-body {
  padding: clamp(16px, 1.9vw, 22px);
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 16px;
  background: #fff;
}

.yorum-liste li + li { margin-top: 12px; }
.yorum-liste .children { margin: 12px 0 0 clamp(16px, 2.4vw, 34px); list-style: none; padding: 0; }

.yorum-liste .comment-author img {
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}

.yorum-liste .comment-author .fn { font-weight: 700; font-style: normal; color: #0a0a0a; }
.yorum-liste .comment-metadata { margin-top: 4px; font-size: 11px; color: rgba(0, 0, 0, 0.45); }
.yorum-liste .comment-metadata a { color: inherit; text-decoration: none; }
.yorum-liste .comment-content { margin-top: 10px; font-size: clamp(13px, 1.25vw, 15px); line-height: 1.65; }
.yorum-liste .reply { margin-top: 8px; font-size: 12px; }
.yorum-liste .reply a { color: rgba(0, 0, 0, 0.6); text-decoration: underline; text-underline-offset: 3px; }

/* Çerez onayı kutusu: WordPress bunu etiketsiz bir satır olarak basıyor
   ve formun ortasında çıplak bir kare gibi duruyordu. */
.yorum-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 16px;
  font-size: clamp(11px, 1.1vw, 13px);
  color: rgba(0, 0, 0, 0.55);
}

.yorum-form .comment-form-cookies-consent input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: #0a0a0a;
  flex: none;
}

.yorum-form .comment-form-cookies-consent label { margin: 0; }

/* ==========================================================================
   İLETİŞİM SAYFASI
   Menüdeki "iletişim" artık kendi sayfasına gidiyor (sablon-iletisim.php).
   Bölümün kendisi ana sayfadakiyle aynı; burada yalnızca üstteki menünün
   altında kalmasın diye nefes veriliyor.
   ========================================================================== */
.iletisim-sayfa { background: #fff; padding-top: clamp(56px, 8vw, 104px); }

.iletisim-sayfa .iletisim { padding-top: clamp(24px, 4vw, 48px); }

.iletisim-sayfa-yazi {
  max-width: 760px;
  margin: 0 auto clamp(24px, 4vw, 48px);
  padding: 0 clamp(20px, 6vw, 60px);
  color: rgba(10, 10, 10, 0.72);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.75;
}

/* ==========================================================================
   YOLCULUK
   Üç kolun hemen altındaki bölüm: markanın fikirden büyümeye geçtiği
   duraklar. Yerleşim bilerek zikzak DEĞİL; çalışma biçimi bölümü zaten
   zikzak ve ikisi üst üste gelince sayfa kendini tekrar ediyordu. Burada
   tek bir yatay ray var, duraklar onun üzerinde sırayla diziliyor.

   Zemin .section3 ile aynı ailede (bkz. yukarıdaki ortak kural); kendi
   arka planını çizmiyor ki bölüm sınırında yatay bant oluşmasın.
   ========================================================================== */
.yolculuk {
  position: relative;
  z-index: 2;
  padding: clamp(70px, 9vw, 130px) clamp(20px, 6vw, 60px) clamp(80px, 10vw, 150px);
}

.yol-ust {
  max-width: 1120px;
  margin: 0 auto clamp(46px, 6vw, 86px);
  text-align: center;
}

.yol-baslik {
  margin: 0;
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

.yol-alt {
  margin: 0.8em auto 0;
  max-width: 52em;
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.55);
}

/* --- RAY ---
   Duraklar ızgaraya diziliyor; ray onların üstünden geçen tek bir
   çizgi. Çizgi ::before ile boş, ::after ile dolu halde çiziliyor;
   dolu olan --dolu değişkeniyle büyüyor (assets/js/yolculuk.js). */
.yol-ray {
  --dolu: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 0 0;
  list-style: none;
}

.yol-ray::before,
.yol-ray::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  height: 1px;
  pointer-events: none;
}

.yol-ray::before {
  right: 0;
  background: rgba(10, 10, 10, 0.14);
}

/* Dolan kısım. Genişlik yüzde olarak JS'ten gelir; geçiş yumuşak olsun
   diye transition burada, JS'te değil. */
.yol-ray::after {
  width: calc(var(--dolu) * 100%);
  background: #0a0a0a;
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.yol-durak {
  position: relative;
  padding-top: 26px;
}

/* Durak noktası rayın üzerinde oturur. Dolmayan noktalar boş halka,
   dolanlar içi dolu. */
.yol-nokta {
  position: absolute;
  top: -29px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.24);
  background: #fff;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.yol-durak.gecildi .yol-nokta {
  background: #0a0a0a;
  border-color: #0a0a0a;
  transform: scale(1.12);
}

.yol-no {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.34);
}

.yol-ad {
  margin: 0.55em 0 0;
  font-weight: 400;
  font-size: clamp(16px, 1.55vw, 20px);
  letter-spacing: -0.005em;
  color: #0a0a0a;
}

.yol-kol {
  display: inline-block;
  margin-top: 0.6em;
  padding: 0.32em 0.8em;
  border-radius: 100px;
  border: 1px solid rgba(10, 10, 10, 0.12);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.yol-metin {
  margin: 0.85em 0 0;
  font-weight: 300;
  font-size: clamp(13px, 1.12vw, 14.5px);
  line-height: 1.62;
  color: rgba(0, 0, 0, 0.56);
}

/* Dar ekran: altı sütun sığmaz, ray dikeye döner. */
@media (max-width: 900px) {
  .yol-ray {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 0 26px;
  }

  .yol-ray::before,
  .yol-ray::after {
    top: 0;
    left: 3px;
    width: 1px;
    height: auto;
    bottom: 0;
    right: auto;
  }

  .yol-ray::after {
    width: 1px;
    height: calc(var(--dolu) * 100%);
    bottom: auto;
    transition: height 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .yol-durak {
    padding: 0 0 clamp(30px, 6vw, 48px);
  }

  .yol-nokta {
    top: 4px;
    left: -27px;
  }
}