/*
 * Kolektif Medya — düzen ve bileşen stilleri.
 *
 * İlk bölüm Next.js projesindeki src/app/globals.css dosyasının birebir
 * karşılığı (jeton @import satırları çıkarıldı; jetonlar ayrı dosyada
 * ve önce yükleniyor).
 *
 * İkinci bölüm ("bileşenler") React tarafında inline style olarak duran
 * kuralların CSS karşılığı. React'te hover durumları useState ile
 * yönetiliyordu; burada :hover ile — daha az JavaScript, aynı görünüm.
 */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font: var(--kv-text-copy);
  color: var(--kv-text-body);
  background: var(--kv-surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--kv-font-display);
  font-weight: var(--kv-weight-bold);
  letter-spacing: var(--kv-tracking-heading);
}

p {
  margin: 0;
}

a {
  color: var(--kv-text-strong);
  text-decoration: none;
  transition: color var(--kv-duration) var(--kv-ease);
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--kv-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ keyframes --- */
@keyframes kv-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes kv-mega-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kv-hero-img {
  from {
    transform: translateX(6%) scale(1.18);
  }
  to {
    transform: translateX(0) scale(1.04);
  }
}

@keyframes kv-hero-pop {
  0% {
    opacity: 0;
    transform: scale(1.35);
  }
  60% {
    opacity: 1;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes kv-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- layout - */
.kv-container {
  max-width: var(--kv-container);
  margin: 0 auto;
  padding: 0 var(--kv-gutter);
}

.kv-container--narrow {
  max-width: 940px;
}

.kv-sec {
  padding: var(--kv-section-y) 0;
}

.kv-sec--tight {
  padding: var(--kv-section-y-tight) 0;
}

.kv-sec--head {
  padding: var(--kv-section-y) 0 var(--kv-section-y-tight);
}

.kv-sec--tail {
  padding: var(--kv-section-y-tight) 0 var(--kv-section-y);
}

.kv-band {
  background: var(--kv-surface-band);
}

.kv-dark {
  background: var(--kv-surface-dark);
}

/* ------------------------------------------------------------ type roles - */
.kv-h1 {
  font: var(--kv-weight-bold) var(--kv-size-h1) / 64px var(--kv-font-display);
  letter-spacing: var(--kv-tracking-heading);
}

.kv-h2 {
  font: var(--kv-text-h2);
}

.kv-h3 {
  font: var(--kv-text-h3);
}

.kv-h4 {
  font: var(--kv-text-h4);
  letter-spacing: var(--kv-tracking-heading);
}

.kv-lead {
  font: var(--kv-weight-regular) var(--kv-size-lead) / var(--kv-leading-lead) var(--kv-font-body);
}

.kv-copy {
  font: var(--kv-text-copy);
}

.kv-label {
  font: var(--kv-weight-bold) var(--kv-size-meta) / 20px var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
}

/* ------------------------------------------------------- marka vurgusu -- */

/*
 * o8: açık zeminde vurgulanan kelime sarıya boyanmıyor; mürekkep kalıyor ve
 * marka rengi ALTINA çizgi olarak geçiyor. Ölçüm: sarı #ffdb58 beyaz üstünde
 * 1.35, #f9f9f9 bant üstünde 1.28 — okunmuyordu. Mürekkep aynı zeminlerde
 * 14.7-15.5 veriyor.
 *
 * Ayrım zemine göre, sınıf adına göre değil: iki jeton var, koyu kaplar
 * bunları kendi içinde ters çeviriyor. Aynı sınıf iki zeminde de kullanılıyor
 * olabilir; kelime hangi kabın içindeyse onun değerini miras alıyor.
 *
 *   açık zemin → kelime mürekkep, çizgi sarı
 *   koyu zemin → kelime sarı, çizgi yok (bugünkü görünüm aynen korunuyor)
 *
 * Aynı jeton çifti, fareyle üstüne gelince vurgulanan kart başlıklarında da
 * kullanılıyor — orada da "marka vurgusu" aynı şey demek.
 */
:root {
  --kv-aksan-metin: var(--kv-text-strong);
  --kv-aksan-cizgi: var(--kv-accent);
}

/*
 * Koyu kaplar. Liste ölçümle çıkarıldı (scratchpad/aksan-tara.js): 63 adres
 * tarandı, sarı metin yalnızca bu kapların içinde koyu zemine denk geliyor.
 */
.kv-hero,
.kv-cband,
.kv-dark,
.kv-reel__section,
.kv-footer,
.kv-scard--ink,
.kv-m2lead__link,
.kv-tile__panel {
  --kv-aksan-metin: var(--kv-accent);
  --kv-aksan-cizgi: transparent;
}

.kv-accent {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  /*
   * Kalınlık metnin ağırlığıyla ölçekleniyor: 42px başlıkta ~3px, 13px
   * etikette 2px. Daha ince kalırsa marka rengi kayboluyor.
   */
  text-decoration-thickness: max(2px, .07em);
  /* Çizgi tabana yapışmasın; skip-ink inen harflerin altından geçmesini sağlar. */
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-pretty {
  text-wrap: pretty;
}

.kv-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kv-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------- grids - */
.kv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kv-space-12);
}

.kv-grid-2--tight {
  gap: var(--kv-space-9);
}

/* Proje detayında metin sütunu daha geniş. */
.kv-grid-2--wide {
  grid-template-columns: 1.6fr 1fr;
}

.kv-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kv-space-11) var(--kv-space-9);
}

/*
 * Instagram şeridi: 6 kare, kenardan kenara. Konteyner genişliğinde (1270px)
 * 6 kare sıkışık kalıyordu, bu yüzden bölümün bu kısmı tam genişlikte.
 */
.kv-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--kv-border-hairline);
}

.kv-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--kv-space-9);
}

.kv-grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--kv-space-1);
}

/* ------------------------------------------------ portfolyo mozaiği ----- */

/*
 * Üç sütunlu mozaik: her görsel kendi oranında, kutu yüksekliği içerikten
 * geliyor. Kart çerçevesi, gölge, köşe yuvarlaması yok.
 *
 * NEDEN column-count:
 * Metin uzunluğu karttan karta değiştiği için mozaikte her ögenin GERÇEK
 * yüksekliği gerekiyor. Bunu ızgarayla yapmanın yolu her ögeye ölçülmüş bir
 * satır sayısı (grid-row: span N) vermek; ölçüm ise JavaScript istiyor ve
 * assets/js/main.js bu ekipte değil. Şartnamedeki `grid-template-rows: masonry`
 * henüz kararlı tarayıcılarda yok. Sunucuda hesaplamak da olmuyor: görselin
 * oranı biliniyor ama başlık ve özetin kaç satır süreceği bilinmiyor.
 * Geriye tek saf CSS seçeneği kalıyor.
 *
 * ERİŞİLEBİLİRLİK: column-count ögeleri YENİDEN SIRALAMIYOR — DOM sırası,
 * sekme sırası ve okuma sırası aynı kalıyor (order/dense gibi hilelerin tam
 * tersi). Tek sonucu, okumanın satır satır değil sütun sütun ilerlemesi.
 * Projelerin kendi içinde güçlü bir sırası olmadığı için bu kabul edilebilir;
 * sekmede odak sütunun altından bir sonraki sütunun tepesine atlıyor.
 */
.kv-mozaik {
  column-count: 3;
  column-gap: var(--kv-space-9);
}

/*
 * Öge sütunda ikiye bölünmesin; alt boşluk column-gap ile aynı ritimde.
 * margin yerine padding: Chrome'da bölünmeyi engellenen ögede alt margin
 * sütun sonunda yutulabiliyor, padding her zaman duruyor.
 */
.kv-mozaik__oge {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  padding-bottom: var(--kv-space-9);
}

.kv-mozaik__bag {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kv-mozaik__gorsel {
  display: block;
  background: var(--kv-surface-placeholder);
  overflow: hidden;
}

/*
 * Oran serbest — kırpma yok. width/height nitelikleri şablonda basılıyor,
 * tarayıcı yeri baştan ayırıyor; yoksa görseller yüklendikçe sütunlar
 * yeniden diziliyor.
 */
.kv-mozaik__img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-mozaik__bag:hover .kv-mozaik__img {
  transform: scale(1.03);
}

.kv-mozaik__baslik {
  margin: var(--kv-space-6) 0 0;
  font: var(--kv-text-h4);
  letter-spacing: var(--kv-tracking-heading);
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-mozaik__bag:hover .kv-mozaik__baslik {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

/*
 * Özet gri. --kv-grey-500 beyaz üstünde 3.07 kalıyor, gövde metni için gereken
 * 4.5'in altında; bu yüzden mürekkebin beyazla karışımı kullanılıyor —
 * ölçülen kontrast 5.7 ve palete ikinci bir hue girmiyor.
 * Desteklemeyen tarayıcı ilk satırdaki mürekkebi alır.
 */
.kv-mozaik__ozet {
  margin: var(--kv-space-4) 0 0;
  font: var(--kv-text-copy);
  color: var(--kv-ink-600);
  color: color-mix(in srgb, var(--kv-ink-600) 70%, #fff);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kv-mozaik__bag:focus-visible {
  outline: 2px solid var(--kv-ink-600);
  outline-offset: 4px;
}

/*
 * Betik çalışınca (main.js → mozaikKur) sütunlar kapanıyor, kartlar satır
 * satır, soldan sağa konumlanıyor. column-gap değeri boşluk olarak okunmaya
 * devam ediyor; bu yüzden sıfırlanmıyor.
 */
.kv-mozaik.kv-mozaik--js {
  column-count: auto;
  position: relative;
}

.kv-mozaik--js .kv-mozaik__oge {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 1100px) {
  .kv-mozaik {
    column-count: 2;
    column-gap: var(--kv-space-8);
  }

  .kv-mozaik__oge {
    padding-bottom: var(--kv-space-8);
  }
}

@media (max-width: 700px) {
  .kv-mozaik {
    column-count: 1;
  }
}

/* ------------------------------------------------ proje detayı: video --- */

/*
 * Yüklenen video. Otomatik oynatma yok, denetimler açık, poster olarak
 * projenin kapağı duruyor — video inene kadar siyah kutu yerine işin kendisi
 * görünüyor. Oran zorlanmıyor: dikey çekilmiş bir video da kendi oranında
 * kalıyor, yalnızca yükseklik ekranı aşmasın diye sınırlanıyor.
 */
.kv-projvideo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  background: var(--kv-ink-900);
}

/* YouTube gömüsü: satır içi stil yerine kendi kuralı. */
.kv-projembed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--kv-ink-900);
}

.kv-projembed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------------------------------------------- proje detayı: galeri ---- */

/*
 * Galeri mozaiği. Portfolyo listesindeki .kv-mozaik ile aynı dil: her görsel
 * kendi oranında, kırpma yok. Eskiden aspect-ratio 1/1 ile zorla kareye
 * sokuluyordu ve dikey kadrajların yarısı kesiliyordu.
 *
 * column-count seçilme gerekçesi .kv-mozaik'te yazılı (ölçülmüş yükseklik
 * gerekiyor, JS bu ekipte değil, masonry henüz kararlı değil). Galeride
 * ögelerin altında metin olmadığı için sütun sırası sorunu da yok: görseller
 * arasında okunacak bir dizi yok.
 */
/*
 * İki sütun, üç değil. Ölçüldü: aynı galeride üç sütunda sütun sonları arası
 * fark 378px (sol altta belirgin bir boşluk kalıyor), iki sütunda 201px.
 * Üstelik galerinin işi projenin işini göstermek — iki sütunda kareler iki kat
 * büyük çıkıyor. Portfolyo listesi üç sütun kalıyor: orada kartın altında
 * başlık ve özet var, amaç taramak; burada amaç bakmak.
 */
/* ------------------------------------------ proje detayı: galeri şeridi - */
/*
 * Yatay kaydırılan şerit. Kareler sabit yükseklikte, genişlik kendi oranında:
 * 4:5 gönderi ile 9:16 hikâye yan yana durunca ikisi de kendi hâliyle
 * görünüyor, kırpma yok.
 *
 * Şerit kabın dışına, ekranın sağ kenarına kadar taşıyor — kesilen kare
 * "devamı var" demenin en sessiz yolu. Soldaki boşluk kabın hizasında
 * başlıyor (padding-inline-start), böylece metinle aynı eksende duruyor.
 */
.kv-galeri {
  --kv-galeri-h: 560px;
  overflow: hidden;
}

.kv-galeri__sec {
  overflow: hidden;
}

.kv-galeri__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-7);
  margin-bottom: var(--kv-space-7);
}

.kv-galeri__nav {
  display: flex;
  align-items: center;
  gap: var(--kv-space-5);
}

.kv-galeri__sayac {
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-eyebrow);
  color: var(--kv-text-muted);
  font-variant-numeric: tabular-nums;
}

.kv-galeri__ok {
  width: var(--kv-control-height-sm);
  height: var(--kv-control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  font-size: 14px;
  background: transparent;
  color: var(--kv-text-strong);
  box-shadow: inset 0 0 0 var(--kv-border-width-hairline) var(--kv-border-hairline);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease),
    box-shadow var(--kv-duration) var(--kv-ease);
}

.kv-galeri__ok:hover:not(:disabled) {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  box-shadow: none;
}

/* Uçlarda ok işlevsiz kalıyor; görünür ama sönük. */
.kv-galeri__ok:disabled {
  opacity: 0.35;
  cursor: default;
}

.kv-galeri__ray {
  display: flex;
  gap: var(--kv-space-5);
  margin: 0;
  padding: 0 var(--kv-gutter);
  padding-inline-start: max(var(--kv-gutter), calc((100vw - var(--kv-container)) / 2 + var(--kv-gutter)));
  /*
   * Yapışma noktası soldaki boşluğu saymalı: scroll-padding olmadan tarayıcı
   * ilk kareyi kaydırma alanının en soluna yapıştırıyor ve şerit kendiliğinden
   * 665px kaymış hâlde açılıyordu.
   */
  scroll-padding-inline-start: max(var(--kv-gutter), calc((100vw - var(--kv-container)) / 2 + var(--kv-gutter)));
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kv-galeri__ray::-webkit-scrollbar {
  display: none;
}

.kv-galeri__oge {
  flex: 0 0 auto;
  height: var(--kv-galeri-h);
  scroll-snap-align: start;
  margin: 0;
}

.kv-galeri__img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  background: var(--kv-surface-placeholder);
}

/* Klavyeyle gezilebilir bir alan: odak görünür olmalı. */
.kv-galeri:focus-visible {
  outline: var(--kv-border-width-hairline) solid var(--kv-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .kv-galeri__ray {
    scroll-behavior: auto;
  }
}

@media (max-width: 1100px) {
  .kv-galeri {
    --kv-galeri-h: 460px;
  }
}

@media (max-width: 700px) {
  .kv-galeri {
    --kv-galeri-h: 380px;
  }

  /* Dar ekranda oklar yerine parmakla kaydırma; sayaç kalıyor. */
  .kv-galeri__ok {
    display: none;
  }
}

/* ------------------------------------- proje detayı: instagram şeridi - */
/*
 * Gönderiler sayfaya gömülü duruyor: Instagram'ın kendi /embed/ ucu iframe
 * olarak basılıyor, resmî embed.js dosyası kullanılmıyor (her açılışta inip
 * sayfayı yavaşlatıyordu). Çerçeveler lazy: ekrana yaklaşınca yükleniyorlar.
 *
 * Yükseklik sabit: gömme sayfası kendi boyunu dışarıya bildirmiyor (ayrı
 * kaynak), çerçeve içeriğe göre büyüyemiyor. 700px, dikey gönderinin oynatma
 * alanını ve altındaki beğeni satırını kesmeden gösteren en küçük değer;
 * 640'ta alt satır kırpılıyordu.
 */
.kv-igserit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--kv-space-7);
  margin-top: var(--kv-space-7);
}

.kv-igserit__oge {
  margin: 0;
  min-width: 0;
}

.kv-igserit__cerceve {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  background: var(--kv-surface-placeholder);
}

/* YouTube Shorts oynatıcısı kendi 9:16 oranını tutuyor; sabit boy gerekmiyor. */
.kv-igserit__cerceve--yt {
  height: auto;
  aspect-ratio: 9 / 16;
}

.kv-igserit__alt {
  margin-top: var(--kv-space-4);
  font: var(--kv-weight-semibold) var(--kv-size-meta) / 1.4 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
}

.kv-igserit__alt a {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-4);
  color: var(--kv-text-muted);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-igserit__alt a:hover {
  color: var(--kv-accent-ink, var(--kv-text-strong));
}

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

@media (max-width: 700px) {
  .kv-igserit {
    grid-template-columns: minmax(0, 1fr);
  }

  .kv-igserit__cerceve {
    height: 620px;
  }

  .kv-igserit__cerceve--yt {
    height: auto;
  }
}

/* ------------------------------------------- proje detayı: diğer işler --- */

/*
 * ad-o9: karo artık başlıksız gri kare değil. Görselin altında proje adı
 * görünür metin olarak duruyor; ad daha önce yalnızca aria-label içindeydi ve
 * blok ekranda ne olduğu anlaşılmayan yedi kareden ibaretti.
 */
.kv-worktiles__baslik {
  margin: 0 0 var(--kv-space-9);
}

.kv-worktile {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-4);
  text-decoration: none;
  color: var(--kv-text-strong);
}

.kv-worktile__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--kv-surface-placeholder);
}

/*
 * Hover dili temanın hizmet satırlarındakiyle aynı: fotoğraf büyür, üstüne
 * perde iner, sarı ok rozeti aşağıdan gelir, başlık sarıya döner. Portfolyoya
 * özel yeni bir hareket yok.
 */
.kv-worktile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-worktile:hover .kv-worktile__img,
.kv-worktile:focus-visible .kv-worktile__img {
  transform: scale(1.06);
}

/* Rozet 56px'lik ortak ölçüde; karo küçüldüğünde bir kademe iniyor. */
@media (max-width: 700px) {
  .kv-worktile .kv-badge {
    width: 44px;
    height: 44px;
  }
}

.kv-worktile__title {
  /* .kv-label ile aynı ölçü — portfolyo kartlarındaki dille tutarlı. */
  font: var(--kv-weight-bold) var(--kv-size-meta) / 20px var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kv-text-strong);
  /* Uzun proje adları ızgarayı bozmasın: en çok iki satır. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-worktile:hover .kv-worktile__title,
.kv-worktile:focus-visible .kv-worktile__title {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-worktile:focus-visible {
  outline: 2px solid var(--kv-ink-600);
  outline-offset: 3px;
}

/*
 * Hareketi azalt: büyüme ve kayma kalkıyor. Perde ve rozet duruyor ama
 * geçişsiz — bilgi kaybı olmadan hareket sıfırlanıyor.
 */
@media (prefers-reduced-motion: reduce) {
  .kv-worktile__img,
  .kv-worktile .kv-badge,
  .kv-worktile .kv-scrim-hover,
  .kv-worktile__title {
    transition: none;
  }

  .kv-worktile:hover .kv-worktile__img,
  .kv-worktile:focus-visible .kv-worktile__img {
    transform: none;
  }

  .kv-worktile .kv-badge {
    transform: none;
  }
}

/*
 * Karo sayısı dört; sütun sayısı da dördün böleni olsun ki satır hep dolsun.
 * auto-fit tabletde üç sütun veriyordu ve 3+1 diye kırık bir satır kalıyordu.
 * Başlık satırı eklendiği için karolar arasına nefes payı da giriyor.
 */
.kv-grid-tiles:has(.kv-worktile) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kv-space-6) var(--kv-space-5);
}

@media (max-width: 1100px) {
  .kv-grid-tiles:has(.kv-worktile) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- header - */
.kv-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

.kv-header__bar {
  max-width: var(--kv-container);
  margin: 0 auto;
  height: var(--kv-header-height);
  padding: 0 var(--kv-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-9);
}

.kv-header__logo img {
  height: 38px;
  width: auto;
}

.kv-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--kv-space-7) 28px;
  flex: 1 1 auto;
}

.kv-navlink {
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  color: var(--kv-white);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-2);
}

.kv-navlink:hover,
.kv-navlink[data-active="true"] {
  color: var(--kv-accent);
}

.kv-navcta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--kv-control-height-sm);
  padding: 0 var(--kv-space-7);
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--kv-duration) var(--kv-ease);
}

.kv-navcta:hover {
  background: var(--kv-accent-hover);
  color: var(--kv-text-on-accent);
}

.kv-burger {
  display: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  width: var(--kv-control-height-sm);
  height: var(--kv-control-height-sm);
  align-items: center;
  justify-content: center;
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font-size: 17px;
}

.kv-mobnav {
  /*
   * Tam opak: %98'de arkadaki sayfa metni menünün altından hayal meyal
   * görünüyordu.
   */
  background: rgb(24, 24, 24);
  border-top: var(--kv-border-width-indicator) solid var(--kv-accent);
  padding: var(--kv-space-2) 0;
}

/*
 * Menü açıkken arkadaki sayfa kaymasın. Başlık position:absolute olduğu için
 * sayfa kayınca menü de ekrandan çıkıyordu. Kilit html üzerinde; gövdeye
 * position:fixed verilseydi başlık yukarı kayardı.
 */
.kv-menu-acik,
.kv-menu-acik body {
  overflow: hidden;
}

.kv-mobnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 var(--kv-gutter);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  color: var(--kv-white);
}

.kv-mobnav a[data-depth="2"] {
  min-height: 44px;
  padding-left: 36px;
  font-weight: var(--kv-weight-regular);
  text-transform: none;
  letter-spacing: 0;
}

/* Üçüncü kademe: alt kategoriler. Girinti ve soluk renk hiyerarşiyi anlatıyor. */
.kv-mobnav a[data-depth="3"] {
  min-height: 40px;
  padding-left: 56px;
  font-weight: var(--kv-weight-regular);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .72);
}

.kv-mobnav a[data-depth="3"]:hover {
  color: var(--kv-accent);
}

.kv-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--kv-header-height);
  pointer-events: none;
}

.kv-mega__cols {
  width: 902px;
  display: flex;
  align-items: flex-start;
  gap: 1px;
  pointer-events: auto;
}

.kv-mega__col {
  width: 300px;
  flex: 0 0 300px;
  background: rgba(24, 24, 24, 0.96);
  border-top: var(--kv-border-width-indicator) solid var(--kv-accent);
  padding: var(--kv-space-5) 0;
}

.kv-mega__col--anim {
  animation: kv-mega-in 0.26s var(--kv-ease) both;
}

.kv-mega__item {
  display: flex;
  align-items: center;
  gap: var(--kv-space-4);
  padding: var(--kv-space-4) var(--kv-space-7);
  transition: background-color var(--kv-duration) var(--kv-ease);
}

.kv-mega__leaf {
  display: block;
  padding: var(--kv-space-4) var(--kv-space-7);
  font: var(--kv-text-copy);
  color: var(--kv-white);
  transition: color var(--kv-duration) var(--kv-ease), padding-left var(--kv-duration) var(--kv-ease);
}

.kv-mega__leaf:hover {
  color: var(--kv-accent);
  padding-left: var(--kv-space-9);
}

/* ------------------------------------------------------------- home hero - */
.kv-hero {
  position: relative;
  height: 974px;
  overflow: hidden;
  background: var(--kv-ink-900);
}

.kv-hero__inner {
  position: relative;
  height: 100%;
  max-width: var(--kv-container);
  margin: 0 auto;
  padding: var(--kv-header-height) var(--kv-gutter) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kv-hero__title {
  font: var(--kv-weight-extrabold) var(--kv-size-hero) / var(--kv-leading-hero) var(--kv-font-display);
  letter-spacing: var(--kv-tracking-heading);
  color: var(--kv-white);
  margin: 0;
  max-width: 900px;
  transform-origin: left center;
}

.kv-hero__lead {
  font: var(--kv-text-hero-lead);
  color: var(--kv-white);
  margin: var(--kv-space-8) 0 0;
  max-width: 760px;
  min-height: 66px;
}

.kv-hero__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.kv-hero__progress {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--kv-space-13);
  z-index: 3;
  width: 380px;
  max-width: calc(100% - 40px);
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------- page hero - */
.kv-phero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  background: var(--kv-surface-dark);
  overflow: hidden;
}

.kv-phero__copy {
  position: relative;
  max-width: var(--kv-container);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--kv-gutter) var(--kv-space-12);
  will-change: transform, opacity;
}

/* --------------------------------------------------------- service cards - */
.kv-threeup {
  max-width: var(--kv-container);
  margin: -38px auto 0;
  padding: 0 var(--kv-gutter);
  position: relative;
  z-index: 4;
}

.kv-threeup__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* --------------------------------------------------------- service rows -- */
.kv-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--kv-border-hairline);
}

.kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  height: 400px;
  overflow: hidden;
  background: var(--kv-surface-card);
  color: var(--kv-text-strong);
}

.kv-row__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: var(--kv-space-9) var(--kv-space-11);
}

.kv-row--wide .kv-row__text {
  gap: var(--kv-space-6);
  padding: var(--kv-space-11) var(--kv-space-12);
}

.kv-row__media {
  position: relative;
  overflow: hidden;
  background: var(--kv-surface-dark);
  height: 100%;
}

/* ---------------------------------------------------------------- reel --- */
.kv-reel {
  display: flex;
  gap: var(--kv-reel-gap);
  height: var(--kv-reel-h);
  --kv-reel-in-dur: 600ms;
  --kv-reel-in-stagger: 120ms;
}

/* ------------------------------------------------- şerit giriş animasyonu -- */
/*
 * Şerit ilk kez görünüm alanına girdiğinde paneller sondan başa doğru
 * belirir: en sağdaki panel önce gelir, açık olan ilk panel en son yerine
 * oturur. Sıra --kv-reel-i ile verilir (bileşende index'in tersi).
 * Toplam süre: 7 × 120ms gecikme + 600ms ≈ 1,44 sn.
 *
 * Yalnızca opacity ve transform animasyonu yapılır; panelin flex geçişine ve
 * hover davranışına karışmaz. Animasyon JS tarafından data-reel-run
 * niteliğiyle başlatılır — JS yoksa bileşendeki noscript kuralı panelleri
 * olduğu gibi gösterir.
 */
.kv-reel[data-reel-in] .kv-reel__panel {
  opacity: 0;
}

.kv-reel[data-reel-in][data-reel-run] .kv-reel__panel {
  animation: kv-reel-yukselis var(--kv-reel-in-dur) var(--kv-ease-out) both;
  animation-delay: calc(var(--kv-reel-i) * var(--kv-reel-in-stagger));
}

@keyframes kv-reel-yukselis {
  from {
    opacity: 0;
    transform: translateY(48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-reel[data-reel-in] .kv-reel__panel {
    opacity: 1;
    animation: none;
  }
}

/* -------------------------------------------------------- kademeli giriş -- */
/*
 * StaggerIn ile sarmalanan bir kabın doğrudan çocukları, kap görünüm alanına
 * girdiğinde soldan sağa sırayla belirir. Bileşen data-stagger-run niteliğini
 * ekleyerek başlatır.
 *
 * İlk gecikme 150ms: bölümü saran Reveal'ın kendi solma hareketi otursun,
 * kareler onun üstüne binmesin. Toplam süre: 600ms gecikme + 600ms = 1,2 sn.
 */
[data-stagger] > * {
  opacity: 0;
}

[data-stagger][data-stagger-run] > * {
  animation: kv-stagger-in 600ms var(--kv-ease-out) both;
}

[data-stagger][data-stagger-run] > *:nth-child(1) {
  animation-delay: 150ms;
}

[data-stagger][data-stagger-run] > *:nth-child(2) {
  animation-delay: 240ms;
}

[data-stagger][data-stagger-run] > *:nth-child(3) {
  animation-delay: 330ms;
}

[data-stagger][data-stagger-run] > *:nth-child(4) {
  animation-delay: 420ms;
}

[data-stagger][data-stagger-run] > *:nth-child(5) {
  animation-delay: 510ms;
}

[data-stagger][data-stagger-run] > *:nth-child(6) {
  animation-delay: 600ms;
}

/*
 * .kv-grid-6'nin 1px'lik çizgileri kabın zemin renginden geliyor. Kareler
 * gelmeden bu zemin boş bir gri blok gibi görünmesin diye son kareyle
 * birlikte (900ms + 300ms = 1,2 sn) açılıyor.
 */
.kv-grid-6[data-stagger] {
  background-color: transparent;
  transition: background-color 300ms var(--kv-ease) 900ms;
}

.kv-grid-6[data-stagger][data-stagger-run] {
  background-color: var(--kv-border-hairline);
}

@keyframes kv-stagger-in {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * {
    opacity: 1;
    animation: none;
  }
}

/* ------------------------------------------------------------- carousel -- */
.kv-carousel {
  width: 1220px;
  max-width: calc(100% - 40px);
  margin: var(--kv-space-11) auto 0;
  position: relative;
}

.kv-carousel__card {
  width: 380px;
  flex: 0 0 auto;
  position: relative;
}

.kv-carousel__arrow {
  appearance: none;
  cursor: pointer;
  width: 72px;
  height: 72px;
  background: rgba(36, 36, 36, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--kv-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease),
    border-color var(--kv-duration) var(--kv-ease);
}

.kv-carousel__arrow:hover {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  border-color: var(--kv-accent);
}

/* ---------------------------------------------------------- contact band - */
.kv-contact {
  position: relative;
  max-width: var(--kv-container);
  margin: 0 auto;
  padding: var(--kv-section-y) var(--kv-gutter);
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: var(--kv-space-12);
  align-items: start;
}

/* ----------------------------------------------------------------- form -- */
.kv-form {
  background: var(--kv-white);
  padding: var(--kv-gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kv-form__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kv-space-4);
}

.kv-form__topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kv-space-3) var(--kv-gutter);
}

.kv-form__topics--wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kv-field {
  height: 44px;
  padding: 0 14px;
  background: var(--kv-white);
  color: var(--kv-text-strong);
  font: var(--kv-weight-regular) var(--kv-size-label) / var(--kv-space-7) var(--kv-font-body);
  outline: none;
  width: 100%;
}

.kv-field--area {
  height: auto;
  padding: 14px;
  font: var(--kv-text-copy);
  resize: vertical;
}

.kv-checkbox {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--kv-space-4);
  text-align: left;
}

.kv-contactbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kv-space-3);
  height: var(--kv-control-height-hero);
  background: var(--kv-surface-dark);
  color: var(--kv-white);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  transition: background-color var(--kv-duration) var(--kv-ease), transform var(--kv-duration) var(--kv-ease),
    letter-spacing var(--kv-duration) var(--kv-ease);
}

.kv-contactbtn:hover {
  background: var(--kv-ink-900);
  color: var(--kv-white);
  transform: translateY(-4px);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------- footer -- */
.kv-footer__cta {
  max-width: var(--kv-container);
  margin: 0 auto;
  padding: var(--kv-space-9) var(--kv-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-8);
  flex-wrap: wrap;
}

.kv-footer__top {
  max-width: var(--kv-container);
  margin: 0 auto;
  padding: var(--kv-space-12) var(--kv-gutter);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--kv-space-11);
}

.kv-footer__bar {
  background: var(--kv-surface-footer-bar);
  min-height: var(--kv-header-height);
  display: flex;
  align-items: center;
}

.kv-footer__barinner {
  max-width: var(--kv-container);
  margin: 0 auto;
  width: 100%;
  padding: var(--kv-space-8) var(--kv-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-9);
  flex-wrap: wrap;
}

.kv-footer a {
  color: var(--kv-text-inverse-muted);
}

.kv-footer a:hover {
  color: var(--kv-accent);
}

/* --------------------------------------------------------- yasal metinler -- */
/* Uzun düz metin sayfaları: gizlilik politikası gibi. Okuma genişliği sınırlı. */
.kv-prose {
  max-width: 820px;
}

.kv-prose h2 {
  /* Tasarımda bölüm başlıkları kv-h3 boyutunda; editörden gelen düz h2'ye
     aynı ölçüyü veriyoruz. */
  font: var(--kv-text-h3);
  letter-spacing: var(--kv-tracking-heading);
  margin: var(--kv-space-11) 0 var(--kv-space-5);
}

.kv-prose h3 {
  font: var(--kv-text-h4);
  letter-spacing: var(--kv-tracking-heading);
  margin: var(--kv-space-9) 0 var(--kv-space-5);
}

.kv-prose h2:first-of-type {
  margin-top: var(--kv-space-9);
}

.kv-prose p,
.kv-prose ul {
  margin: 0 0 var(--kv-space-6);
}

.kv-prose ul {
  padding-left: var(--kv-space-8);
}

.kv-prose li {
  margin-bottom: var(--kv-space-3);
}

.kv-prose strong {
  font-weight: var(--kv-weight-semibold);
}

/* ------------------------------------------------------------------ map -- */
.kv-map {
  width: 100%;
  height: 560px;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

/* --------------------------------------------------------------- reveal -- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--kv-ease), transform 0.6s var(--kv-ease);
}

[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------ responsive - */
@media (max-width: 1100px) {
  .kv-hero__rail {
    display: none;
  }

  .kv-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .kv-threeup__grid {
    grid-template-columns: 1fr;
  }

  .kv-threeup {
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .kv-nav,
  .kv-mega {
    display: none;
  }

  .kv-burger {
    display: inline-flex;
  }

  .kv-header__bar {
    height: 84px;
    gap: var(--kv-space-4);
  }

  :root {
    --kv-header-height: 84px;
    --kv-section-y: 64px;
    --kv-section-y-tight: 48px;
    --kv-size-hero: 40px;
    --kv-leading-hero: 46px;
    --kv-size-h1: 32px;
    --kv-size-h2: 28px;
    --kv-leading-h2: 36px;
    --kv-size-h3: 23px;
    --kv-leading-h3: 31px;
    --kv-size-h4: 21px;
    --kv-leading-h4: 29px;
    --kv-size-lead: 19px;
    --kv-leading-lead: 30px;
    --kv-text-hero-lead: var(--kv-weight-semibold) 16px/27px var(--kv-font-body);
    --kv-reel-h: 420px;
    --kv-control-height: 60px;
  }

  .kv-h1 {
    line-height: 40px;
  }

  /* Mobilde hero ekranın yarısını geçmesin; içerik kıvrımın üstüne çıksın. */
  .kv-hero {
    height: 520px;
  }

  .kv-hero__inner {
    padding: 104px var(--kv-gutter) var(--kv-space-9);
    justify-content: flex-end;
  }

  /*
   * Dar ekranda ilerleme çizgisi "İNCELE" düğmesinin alt kenarıyla çakışıyordu
   * (ölçüldü: 10px bindirme). Çizgi aşağı alındı, araya nefes payı girdi.
   */
  .kv-hero__progress {
    bottom: var(--kv-space-5);
  }

  /*
   * ad-o12: tablette hero giriş metni satır başına 86 karaktere çıkıyordu.
   * Punto 19'dan 16'ya inerken genişlik 760px'te sabit kalıyor; genişlik de
   * bir kademe iniyor, satır başına karakter ~70'e düşüyor.
   */
  .kv-hero__lead {
    max-width: 620px;
  }

  .kv-phero {
    min-height: 300px;
  }

  .kv-phero__copy {
    padding-bottom: var(--kv-space-9);
  }

  /*
   * kv-grid-3 bilerek bu listede yok (ad-o3). Tabletde (820px) portfolyo
   * ızgarası, blogdaki üçlü yazı ızgarası ve hizmet kartları tek sütuna
   * düşüyordu: kart 780px genişliyor, görseli 780×975'e çıkıyor ve sekiz
   * projeyi görmek için 10595px kaydırmak gerekiyordu.
   *
   * kv-grid-3'ün kendi basamakları zaten var ve yeterli:
   *   1100px → iki sütun (948. satırdaki blok)
   *    620px → tek sütun (aşağıdaki blok)
   * 820px'te iki sütun rahat sığıyor: (780 − 40) ÷ 2 = 370px kart, masaüstündeki
   * 383px ile neredeyse aynı.
   */
  .kv-grid-2,
  .kv-grid-2--wide,
  .kv-contact,
  .kv-threeup__grid {
    grid-template-columns: 1fr;
    gap: var(--kv-space-9);
  }

  /* Dört sütun tek sütuna inince footer aşırı uzuyor; ara adım olarak ikiye. */
  .kv-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kv-space-9);
  }

  .kv-contact {
    padding: var(--kv-section-y) var(--kv-gutter);
  }

  .kv-threeup {
    margin-top: 0;
  }

  .kv-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .kv-row {
    grid-template-columns: 1fr;
    height: auto;
  }

  .kv-carousel__card {
    width: 280px;
  }

  .kv-form__topics,
  .kv-form__topics--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kv-map {
    height: 340px;
  }

  .kv-footer__barinner {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 620px) {
  .kv-grid-3 {
    grid-template-columns: 1fr;
  }

  .kv-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .kv-footer__top {
    grid-template-columns: 1fr;
  }

  .kv-form__pair,
  .kv-form__topics,
  .kv-form__topics--wide {
    grid-template-columns: 1fr;
  }

  .kv-carousel__arrow {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }
}

/* -------------------------------------------------------------- marquee -- */
.kv-marquee {
  display: flex;
  width: max-content;
  animation: kv-marquee 45s linear infinite;
}

.kv-marquee:hover,
.kv-marquee:focus-within {
  animation-play-state: paused;
}

.kv-marquee__tile {
  width: 220px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--kv-space-8);
  border-right: 1px solid var(--kv-border-hairline);
  flex: 0 0 auto;
}

.kv-marquee__tile img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Referans logoları kendi marka renkleriyle görünür. */
  opacity: var(--kv-alpha-solid);
  transition: opacity var(--kv-duration) var(--kv-ease);
}

.kv-marquee__tile:hover img {
  opacity: 1;
}

/* ---------------------------------------------------------- tile hovers -- */

/*
 * Karolar renkli (müşteri isteği). Önceden grayscale(1) ile griye çevriliyor,
 * rengi yalnızca fare üstüne gelince dönüyordu; dokunmatik cihazda hiç
 * dönmüyordu ve blok ne olduğu anlaşılmayan gri kareler olarak duruyordu.
 * Filtre tamamen kalktı — hareket artık .kv-worktile kuralında, temanın
 * hizmet satırlarındaki hover diliyle aynı.
 */
.kv-tile-img {
  display: block;
}

/* ------------------------------------------- kart iç boşluğu kırılımları - */
@media (max-width: 1180px) {
  :root {
    --kv-card-pad-x: var(--kv-space-9);
  }
}

@media (max-width: 980px) {
  :root {
    --kv-card-pad-x: var(--kv-space-8);
    --kv-card-pad-y: var(--kv-space-11);
    --kv-card-h: 380px;
  }
}

/* Dar ekranda portfolyo şeridi dikey akordiyona döner. */
@media (max-width: 980px) {
  .kv-reel {
    flex-direction: column;
    height: auto;
  }
}

/* ==========================================================================
   BİLEŞENLER
   React tarafında inline style olarak duran kuralların CSS karşılığı.
   Hover durumları useState yerine :hover ile yönetiliyor.
   ========================================================================== */

/* ---------------------------------------------------------------- button - */
.kv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kv-space-3);
  font-family: var(--kv-font-body);
  font-weight: var(--kv-weight-semibold);
  font-size: var(--kv-size-label);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--kv-radius-none);
  cursor: pointer;
  white-space: nowrap;
  height: var(--kv-control-height);
  padding: 0 var(--kv-control-px);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease),
    border-color var(--kv-duration) var(--kv-ease);
}

.kv-btn i {
  font-size: 12px;
}

.kv-btn--sm {
  height: var(--kv-control-height-sm);
  padding: 0 var(--kv-space-6);
}

.kv-btn--block {
  width: 100%;
}

.kv-btn--primary {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
}

.kv-btn--primary:hover {
  background: var(--kv-accent-hover);
  color: var(--kv-text-on-accent);
}

.kv-btn--dark {
  background: var(--kv-surface-dark);
  color: var(--kv-accent);
}

.kv-btn--dark:hover {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
}

.kv-btn--outline {
  background: transparent;
  color: var(--kv-text-strong);
  box-shadow: inset 0 0 0 var(--kv-border-width-indicator) var(--kv-text-strong);
}

.kv-btn--outline:hover {
  background: var(--kv-surface-dark);
  color: var(--kv-accent);
  box-shadow: inset 0 0 0 var(--kv-border-width-indicator) var(--kv-surface-dark);
}

.kv-btn--ondark {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
}

.kv-btn--ondark:hover {
  background: var(--kv-white);
  color: var(--kv-text-on-accent);
}

.kv-btn--link {
  background: transparent;
  color: var(--kv-text-strong);
  padding: 0;
  height: auto;
  align-self: flex-start;
}

.kv-btn--link:hover {
  color: var(--kv-accent-hover);
}

.kv-btn[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------- eyebrow - */
.kv-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--kv-space-4);
  font-family: var(--kv-font-body);
  font-weight: var(--kv-weight-bold);
  font-size: var(--kv-size-label);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kv-text-strong);
}

.kv-eyebrow__rule {
  flex: 0 0 auto;
  width: var(--kv-indicator-w-idle);
  height: var(--kv-indicator-h);
  background: var(--kv-accent);
}

.kv-eyebrow--ondark {
  color: var(--kv-accent);
}

.kv-eyebrow--accent {
  color: var(--kv-text-on-accent);
}

.kv-eyebrow--ondark .kv-eyebrow__rule,
.kv-eyebrow--accent .kv-eyebrow__rule {
  background: currentColor;
}

.kv-eyebrow--center {
  justify-content: center;
}

/* ------------------------------------------------------------- icon chip - */
.kv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kv-icon-chip);
  height: var(--kv-icon-chip);
  border-radius: var(--kv-radius-circle);
  opacity: var(--kv-alpha-solid);
  font-size: 26px;
}

.kv-chip--accent {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
}

.kv-chip--ink {
  background: var(--kv-surface-dark);
  color: var(--kv-accent);
}

.kv-chip--outline {
  background: transparent;
  color: var(--kv-text-strong);
  box-shadow: inset 0 0 0 2px currentColor;
}

/* -------------------------------------------------------- section heading - */
.kv-shead {
  max-width: 760px;
}

.kv-shead--center {
  text-align: center;
  margin: 0 auto;
}

.kv-shead .kv-eyebrow {
  margin-bottom: var(--kv-space-6);
}

.kv-shead--center .kv-eyebrow {
  justify-content: center;
}

.kv-shead__lead {
  margin-top: var(--kv-space-7);
  color: var(--kv-text-muted);
}

.kv-shead--ondark .kv-shead__title {
  color: var(--kv-text-on-dark);
}

.kv-shead--ondark .kv-shead__lead {
  color: var(--kv-text-inverse-muted);
}

/* ---------------------------------------------------------- service card - */
/*
 * Kart, front-page.php'deki zemin div'inin içinde duruyor. Izgara zemini
 * esnetiyordu ama kart kendi içerik yüksekliğinde kalıyordu: başlığı üç satır
 * olan ilk kart 524px, ötekiler 448px oluyor ve soldaki DEVAM bağlantısı
 * diğerlerinden 76px aşağıda duruyordu (ad-o6).
 *
 * height:100% kartı zemine yayıyor; kv-scard__body zaten flex:1 1 auto olduğu
 * için gövde uzayıp bağlantıyı kartın dibine itiyor ve üç bağlantı aynı
 * çizgiye oturuyor.
 */
.kv-scard {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--kv-card-h);
  display: flex;
  flex-direction: column;
  padding: var(--kv-card-pad-y) var(--kv-card-pad-x) var(--kv-space-11);
}

/*
 * Kart 1100px'te tek sütuna iniyor (.kv-threeup__grid). Orada sabit yüksekliğin
 * işlevi kalmıyor: kart genişliğini kaptan alıp 780px'e yayılıyor ve 448px'lik
 * min-height metnin altında 128px ölü sarı boşluk bırakıyordu (ad-o10).
 *
 * Kural bilerek burada, taban .kv-scard kuralının hemen ardında: medya sorgusu
 * özgüllük eklemediği için yukarıdaki 1100px bloğuna yazılsaydı taban kuralın
 * min-height'ı onu ezerdi.
 */
@media (max-width: 1100px) {
  .kv-scard {
    min-height: 0;
    --kv-card-pad-y: var(--kv-space-9);
  }
}

.kv-scard--accent {
  background: var(--kv-surface-card-accent);
  color: var(--kv-text-on-accent);
}

.kv-scard--ink {
  background: var(--kv-surface-card-dark);
  color: var(--kv-text-on-dark);
}

.kv-scard__medallion {
  position: absolute;
  top: calc(var(--kv-card-medallion) / -2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--kv-card-medallion);
  height: var(--kv-card-medallion);
  object-fit: cover;
  border-radius: var(--kv-radius-pill);
  box-shadow: 0 0 0 var(--kv-border-width-medallion) var(--kv-white);
}

.kv-scard__chip {
  position: absolute;
  top: calc(var(--kv-icon-chip) / -2);
  left: 50%;
  transform: translateX(-50%);
}

.kv-scard__title a {
  color: inherit;
}

.kv-scard__body {
  flex: 1 1 auto;
  margin-top: var(--kv-space-7);
}

.kv-scard--accent .kv-scard__body {
  color: var(--kv-text-on-accent);
}

.kv-scard--ink .kv-scard__body {
  color: var(--kv-text-inverse-muted);
}

.kv-scard__more {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: var(--kv-space-8);
  align-self: flex-start;
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  transition: gap var(--kv-duration) var(--kv-ease);
}

.kv-scard--accent .kv-scard__more {
  color: var(--kv-text-on-accent);
}

.kv-scard--ink .kv-scard__more {
  color: var(--kv-accent);
}

.kv-scard__more i {
  font-size: 12px;
  opacity: 0;
  transition: opacity var(--kv-duration) var(--kv-ease);
}

.kv-scard:hover .kv-scard__more {
  gap: var(--kv-space-3);
}

.kv-scard:hover .kv-scard__more i {
  opacity: 1;
}

/* ------------------------------------------------------------- post card - */
.kv-pcard {
  display: flex;
  flex-direction: column;
  background: var(--kv-surface-card);
  overflow: hidden;
}

.kv-pcard__media {
  position: relative;
  aspect-ratio: 5 / 6;
  background: var(--kv-surface-placeholder);
  overflow: hidden;
  display: block;
}

.kv-pcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-pcard:hover .kv-pcard__img {
  transform: scale(1.04);
}

.kv-pcard__scrim {
  position: absolute;
  inset: 0;
  background: var(--kv-overlay-photo);
  opacity: 0;
  transition: opacity var(--kv-duration) var(--kv-ease);
}

.kv-pcard:hover .kv-pcard__scrim {
  opacity: 1;
}

.kv-pcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-5);
  padding: var(--kv-space-8) 0 0;
}

.kv-pcard__title a {
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-pcard:hover .kv-pcard__title a {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-pcard__excerpt {
  color: var(--kv-text-muted);
}

/* ---------------------------------------------------------- social links - */
.kv-social {
  display: flex;
  gap: var(--kv-social-gap);
}

.kv-social--vertical {
  flex-direction: column;
}

.kv-social__chip {
  position: relative;
  width: var(--kv-social-chip);
  height: var(--kv-social-chip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font-size: 15px;
  transition: background-color var(--kv-duration) var(--kv-ease);
}

/*
 * Rozet 30px görünüyor ama parmakla 30px küçük kalıyor. Görünüm aynı kalsın
 * diye kutu büyütülmedi; dokunma alanı görünmez bir katmanla 44px'e çıkarıldı.
 * Rozet aralığı 20px, adım 50px; 44px alanlar 44px yer kapladığı için
 * komşu rozetlerin alanları çakışmıyor.
 */
.kv-social__chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.kv-social__chip:hover {
  background: var(--kv-white);
  color: var(--kv-text-on-accent);
}

/*
 * Alt bilgide `.kv-footer a` bağlantılara beyaz veriyor ve özgüllüğü
 * `.kv-social__chip`ten yüksek olduğu için ikonlar sarı zeminde beyaz
 * kalıyordu. Burada açıkça geri alınıyor: sarı üstüne koyu.
 */
.kv-footer .kv-social__chip {
  color: var(--kv-text-on-accent);
}

.kv-footer .kv-social__chip:hover {
  color: var(--kv-text-on-accent);
}

/* Hero'nun sağ rayındaki daha küçük dikey şerit. */
.kv-social--rail {
  gap: 25px;
}

.kv-social--rail .kv-social__chip {
  width: 25px;
  height: 25px;
  font-size: 13px;
}

/* ------------------------------------------------------------ scroll top - */
.kv-scrolltop {
  position: fixed;
  right: var(--kv-space-6);
  bottom: var(--kv-space-6);
  z-index: 70;
  width: var(--kv-control-height-sm);
  height: var(--kv-control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--kv-duration) var(--kv-ease), transform var(--kv-duration) var(--kv-ease),
    visibility var(--kv-duration);
}

.kv-scrolltop.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------------------------------------------------------------- header - */
.kv-mega[hidden],
.kv-mobnav[hidden] {
  display: none;
}

.kv-mega__item span {
  flex: 1 1 auto;
  color: var(--kv-white);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-mega__item.is-on {
  background: rgba(255, 255, 255, 0.05);
}

.kv-mega__item.is-on span {
  color: var(--kv-accent);
}

.kv-mega__chip {
  font-size: 12px;
  color: var(--kv-accent);
  opacity: 0.35;
  transform: translateX(-6px);
  transition: opacity var(--kv-duration) var(--kv-ease), transform var(--kv-duration) var(--kv-ease);
}

.kv-mega__item.is-on .kv-mega__chip {
  opacity: 1;
  transform: translateX(0);
}

.kv-mega__col--leaf {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--kv-ease);
}

.kv-mega__col--leaf.is-on {
  opacity: 1;
  visibility: visible;
}

.kv-mobnav__cta {
  padding: 12px 20px 16px;
}

.kv-mobnav__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
}

/* ------------------------------------------------------------- home hero - */
.kv-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--kv-ease);
}

.kv-hero__slide.is-on {
  opacity: 1;
  pointer-events: auto;
}

.kv-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}

.kv-hero__slide.is-on .kv-hero__img {
  animation: 8s var(--kv-ease) both kv-hero-img;
}

.kv-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.302);
}

.kv-hero__slide.is-on .kv-hero__title {
  animation: 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) 0.1s both kv-hero-pop;
}

.kv-hero__slide.is-on .kv-hero__ctawrap {
  animation: 0.7s cubic-bezier(0.2, 1.4, 0.3, 1) 0.3s both kv-hero-pop;
}

.kv-hero__ctawrap {
  margin-top: var(--kv-space-9);
  transform-origin: left center;
}

.kv-hero__btn {
  width: 178px;
  height: var(--kv-control-height-hero);
  gap: var(--kv-space-4);
}

.kv-hero__btn i {
  font-size: 12px;
}

.kv-hero__caret {
  display: inline-block;
  width: 2px;
  height: 20px;
  margin-left: 3px;
  background: var(--kv-accent);
  vertical-align: -3px;
  opacity: 0;
}

.kv-hero__caret.is-on {
  opacity: 1;
  animation: 1s steps(1) infinite kv-caret;
}

.kv-hero__railbtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.9;
}

.kv-hero__rail--nav {
  right: 200px;
  gap: 56px;
}

.kv-hero__rail--social {
  right: var(--kv-rail-inset);
}

.kv-hero__bar {
  display: block;
  height: 100%;
  background: var(--kv-accent);
  width: 0;
  transition: width 0.25s linear;
}

/* ------------------------------------------------------------- page hero - */
.kv-phero__img {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + 300px);
  object-fit: cover;
  will-change: transform;
}

.kv-phero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.6);
}

.kv-phero__crumbs {
  display: flex;
  align-items: center;
  gap: var(--kv-space-4);
  flex-wrap: wrap;
  color: var(--kv-accent);
  margin-bottom: var(--kv-space-6);
}

.kv-phero__crumbs a {
  color: var(--kv-accent);
}

.kv-phero__title {
  color: var(--kv-white);
  max-width: 900px;
}

/* ---------------------------------------------------------- service rows - */
.kv-row__text {
  order: 1;
}

.kv-row__media {
  order: 2;
}

.kv-row--alt .kv-row__text {
  order: 2;
}

.kv-row--alt .kv-row__media {
  order: 1;
}

.kv-row__title {
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

/*
 * Hover ikiye ayrıldı: fotoğrafın animasyonu fotoğrafa, metnin animasyonu
 * metne gelince çalışıyor. Satırın tamamı tek bağlantı olduğu için tıklama
 * her yerden aynı yere gidiyor; değişen yalnızca geri bildirim.
 */
.kv-row__text:hover .kv-row__title {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-row__rule {
  height: 3px;
  background: var(--kv-accent);
  width: 40px;
  transition: width var(--kv-duration-slow) var(--kv-ease);
}

.kv-row__text:hover .kv-row__rule {
  width: 96px;
}

.kv-row__lead {
  max-width: 440px;
}

.kv-row__more {
  margin-top: var(--kv-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-4);
  font: var(--kv-weight-bold) var(--kv-size-label) / 20px var(--kv-font-body);
  letter-spacing: var(--kv-tracking-label);
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-row--wide .kv-row__more {
  margin-top: var(--kv-space-4);
}

.kv-row__text:hover .kv-row__more {
  color: var(--kv-accent-hover);
}

.kv-row__more i {
  font-size: 13px;
}

.kv-row__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-row__media:hover .kv-row__img {
  transform: scale(1.06);
}

/* Fotoğraf üstündeki koyulaşma ve sarı ok rozeti; portfolyo ızgarasıyla ortak. */
.kv-scrim-hover {
  position: absolute;
  inset: 0;
  background: var(--kv-ink-900);
  opacity: 0;
  transition: opacity var(--kv-duration) var(--kv-ease);
}

.kv-row__media:hover .kv-scrim-hover,
.kv-pgrid__item:hover .kv-scrim-hover,
.kv-worktile:hover .kv-scrim-hover,
.kv-worktile:focus-visible .kv-scrim-hover {
  opacity: 0.3;
}

.kv-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--kv-duration) var(--kv-ease), transform var(--kv-duration) var(--kv-ease);
}

.kv-row__media:hover .kv-badge,
.kv-pgrid__item:hover .kv-badge,
.kv-worktile:hover .kv-badge,
.kv-worktile:focus-visible .kv-badge {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------- portfolio grid - */
.kv-pgrid__item {
  display: flex;
  flex-direction: column;
  color: var(--kv-text-strong);
}

.kv-pgrid__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--kv-surface-dark);
}

.kv-pgrid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-pgrid__item:hover .kv-pgrid__img {
  transform: scale(1.06);
}

.kv-pgrid__title {
  margin: var(--kv-space-8) 0 0;
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-pgrid__item:hover .kv-pgrid__title {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-pgrid__rule {
  margin-top: var(--kv-space-5);
  height: 3px;
  background: var(--kv-accent);
  width: 0;
  transition: width var(--kv-duration-slow) var(--kv-ease);
}

.kv-pgrid__item:hover .kv-pgrid__rule {
  width: 100%;
}

.kv-pgrid__excerpt {
  margin-top: var(--kv-space-5);
}

/*
 * Dokunmatikte hover yok: sarı çizgi hiç açılmıyor ve kart kimliğini
 * kaybediyordu. Bu cihazlarda çizgi baştan açık geliyor.
 */
@media (hover: none) {
  .kv-pgrid__rule {
    width: 100%;
  }

  /*
   * Fare yoksa hover hiç gelmiyor: perde ve rozet görünmesin, karo duran
   * hâliyle eksiksiz okunsun. Proje adı zaten karonun altında görünür metin,
   * yani hover'ın arkasında saklanan bilgi yok.
   */
  .kv-worktile .kv-scrim-hover,
  .kv-worktile .kv-badge {
    display: none;
  }
}

/*
 * Dar ekranda projeler alt alta dizilince metin biten yerle sonraki fotoğrafın
 * başladığı yer karışıyordu. Her proje kendi bloğu olsun diye araya ayırıcı
 * çizgi ve nefes payı giriyor.
 */
@media (max-width: 700px) {
  .kv-pgrid__item {
    padding-bottom: var(--kv-space-9);
    border-bottom: 1px solid var(--kv-border-hairline);
  }

  .kv-pgrid__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Dar ekranda da çizgi açık — tek sütunda kart kimliğini o taşıyor. */
  .kv-pgrid__rule {
    width: 100%;
  }
}

/*
 * Mobil hizmet satırı.
 *
 * İki sorun vardı: metin fotoğrafından ÖNCE geliyordu (media order:2), yani
 * bir hizmetin fotoğrafı bir sonrakinin başlığına komşu düşüyor ve hangi
 * fotoğrafın kime ait olduğu karışıyordu. İkincisi bloklar arasında 1px
 * boşluk vardı.
 *
 * Çözüm: her hizmet tek bir fotoğraf bloğu; başlık, açıklama ve bağlantı
 * fotoğrafın üstünde. Blok kimliği fotoğrafın kendisinden geliyor, araya da
 * boşluk konuyor. Masaüstünde zikzak düzen ayrımı zaten veriyor; orada
 * hiçbiri geçerli değil.
 */
@media (max-width: 900px) {
  .kv-rows {
    display: flex;
    flex-direction: column;
    gap: var(--kv-space-7);
  }

  .kv-row {
    position: relative;
    height: 400px;
    padding: 0;
  }

  .kv-row__media {
    order: 1 !important;
    height: 100%;
  }

  /* Metin okunsun diye alttan yukarı açılan perde. */
  .kv-row__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .9) 0%,
      rgba(0, 0, 0, .55) 42%,
      rgba(0, 0, 0, .1) 75%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  .kv-row__text,
  .kv-row--wide .kv-row__text {
    position: absolute;
    z-index: 2;
    left: var(--kv-gutter);
    right: var(--kv-gutter);
    bottom: 0;
    order: 2 !important;
    gap: var(--kv-space-4);
    padding: 0 0 var(--kv-space-8);
  }

  .kv-row__title,
  .kv-row__text:hover .kv-row__title,
  .kv-row__lead,
  .kv-row__more,
  .kv-row__text:hover .kv-row__more {
    color: var(--kv-text-on-dark);
  }

  .kv-row__lead {
    opacity: .85;
  }

  /* Sarı çizgi hover'a bağlıydı; dokunmatikte hiç açılmıyordu. */
  .kv-row__rule {
    width: 56px;
  }
}

/* ------------------------------------------------- hizmet grupları ------ */

/*
 * Hizmetler alt kategori başlıkları altında gruplanıyor. Kökte 28 hizmet tek
 * listeydi; mobilde 21 ekran sürüyor ve okuyucu nerede olduğunu göremiyordu.
 */
.kv-svcgroup + .kv-svcgroup {
  margin-top: var(--kv-space-12);
}

.kv-svcgroup__title {
  margin: 0 0 var(--kv-space-8);
  padding-bottom: var(--kv-space-5);
  border-bottom: 2px solid var(--kv-accent);
  font: var(--kv-weight-bold) var(--kv-size-h4) / 1.2 var(--kv-font-display);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  color: var(--kv-text-strong);
}

.kv-svcgroup__title a {
  color: inherit;
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-svcgroup__title a:hover {
  color: var(--kv-accent-hover);
}

/* ------------------------------------------------------------------ reel - */
.kv-reel__section {
  background: var(--kv-surface-dark);
  padding: var(--kv-section-y) 0;
}

.kv-reel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kv-space-9);
  margin-bottom: var(--kv-space-12);
  flex-wrap: wrap;
}

.kv-reel__headtext {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-6);
}

.kv-reel__nav {
  display: flex;
  align-items: center;
  gap: var(--kv-space-5);
}

.kv-reel__counter {
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-eyebrow);
  color: var(--kv-text-inverse-muted);
  font-variant-numeric: tabular-nums;
}

.kv-reel__arrow {
  width: var(--kv-control-height-sm);
  height: var(--kv-control-height-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  font-size: 14px;
  background: transparent;
  color: var(--kv-text-on-dark);
  box-shadow: inset 0 0 0 var(--kv-border-width-hairline) rgba(255, 255, 255, 0.4);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease);
}

.kv-reel__arrow:hover {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  box-shadow: none;
}

.kv-reel__panel {
  position: relative;
  flex: 0.5 1 0%;
  min-width: 0;
  overflow: hidden;
  background: var(--kv-surface-card-dark);
  cursor: pointer;
  outline: none;
  transition: flex var(--kv-duration-slow) var(--kv-ease), height var(--kv-duration-slow) var(--kv-ease);
}

.kv-reel__panel.is-active {
  flex: 2.6 1 0%;
}

.kv-reel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--kv-duration-slow) var(--kv-ease), transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-reel__panel.is-active .kv-reel__img {
  filter: none;
}

.kv-reel__panel.is-active:hover .kv-reel__img {
  transform: scale(1.04);
}

.kv-reel__scrim {
  position: absolute;
  inset: 0;
  background: var(--kv-overlay-panel-idle);
  transition: background var(--kv-duration-slow) var(--kv-ease);
}

.kv-reel__panel.is-active .kv-reel__scrim {
  background: var(--kv-overlay-panel);
}

.kv-reel__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--kv-border-width-indicator);
  background: var(--kv-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-reel__panel.is-active .kv-reel__bar {
  transform: scaleX(1);
}

.kv-reel__open {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--kv-space-9);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-4);
  max-width: 560px;
}

.kv-reel__panel.is-active .kv-reel__open {
  display: flex;
}

.kv-reel__idle {
  position: absolute;
  inset: 0;
  padding: var(--kv-space-8) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.kv-reel__panel.is-active .kv-reel__idle {
  display: none;
}

.kv-reel__index {
  font: var(--kv-text-reel-index);
  letter-spacing: var(--kv-tracking-eyebrow);
  color: var(--kv-accent);
}

.kv-reel__title {
  color: var(--kv-text-on-dark);
}

.kv-reel__excerpt {
  color: var(--kv-text-inverse-muted);
}

.kv-reel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-3);
  margin-top: var(--kv-space-3);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  color: var(--kv-accent);
  transition: gap var(--kv-duration) var(--kv-ease);
}

.kv-reel__panel:hover .kv-reel__cta {
  gap: var(--kv-space-5);
}

.kv-reel__cta i {
  font-size: 12px;
}

.kv-reel__vtitle {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  color: var(--kv-text-on-dark);
  white-space: nowrap;
  display: block;
  max-height: var(--kv-reel-title-max);
  overflow: hidden;
}

/* Dikey şerit yatay akordiyona döndüğünde kullanılan tam başlık. */
.kv-reel__htitle {
  display: none;
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  color: var(--kv-text-on-dark);
  text-align: left;
  width: 100%;
}

/* -------------------------------------------------------------- carousel - */
.kv-carousel__vp {
  overflow: hidden;
}

.kv-carousel__track {
  display: flex;
  gap: 40px;
  width: max-content;
  transition: transform 0.6s var(--kv-ease);
}

.kv-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.kv-carousel__nav--prev {
  left: 0;
}

.kv-carousel__nav--next {
  right: 0;
}

/* ---------------------------------------------------------- neden video -- */
.kv-nvideo {
  position: relative;
}

.kv-nvideo__link {
  position: relative;
  display: block;
  width: 100%;
  height: 520px;
  max-height: 60vw;
  overflow: hidden;
  background: var(--kv-surface-dark);
}

.kv-nvideo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity var(--kv-duration-slow) var(--kv-ease);
}

.kv-nvideo.is-playing .kv-nvideo__img {
  opacity: 0;
}

.kv-nvideo__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.kv-nvideo__play {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 80px;
  background: var(--kv-surface-dark);
  color: var(--kv-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 1;
  transition: opacity var(--kv-duration-slow) var(--kv-ease);
}

.kv-nvideo.is-playing .kv-nvideo__play {
  opacity: 0;
}

.kv-nvideo__block {
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 240px;
  height: 240px;
  background: var(--kv-accent);
  z-index: -1;
}

/* --------------------------------------------------------- contact band -- */
.kv-cband {
  position: relative;
  background: var(--kv-surface-dark);
  overflow: hidden;
}

.kv-cband__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.62);
}

.kv-cband__left {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-7);
  padding-top: var(--kv-space-4);
}

.kv-cband__title {
  color: var(--kv-white);
}

.kv-cband__lead {
  color: var(--kv-white);
  max-width: 440px;
}

.kv-cband__rows {
  margin-top: var(--kv-space-4);
  display: flex;
  flex-direction: column;
}

.kv-cband__row {
  display: flex;
  align-items: center;
  gap: var(--kv-space-7);
  padding: var(--kv-space-7) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.kv-cband__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
}

.kv-cband__rowtext {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kv-cband__label {
  color: var(--kv-white);
}

.kv-cband__value {
  font: var(--kv-weight-bold) var(--kv-size-lead) / 30px var(--kv-font-display);
  color: var(--kv-white);
}

.kv-cband__social {
  margin-top: var(--kv-space-6);
}

.kv-cband__panel {
  background: var(--kv-accent);
  padding: var(--kv-space-8) 28px var(--kv-space-9);
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-5);
}

.kv-cband__paneltitle {
  margin: 0 0 var(--kv-space-1);
}

/*
 * fe-o8 (25 Eylül müşteri kararı): telefonda bant ~390×1650; yatay fotoğrafı
 * bu kutuya kaplatmak onu ~17 kat büyütüp bulanıklaştırıyordu. Dar ekranda
 * fotoğraf büyütülmeden, tam genişlikte bandın tepesine oturuyor; perde
 * aşağı doğru koyu zemine geçiyor. Parallax'ın satır içi stilini ve JS'in
 * yazdığı transform'u ezmek için !important gerekiyor.
 */
@media (max-width: 700px) {
  .kv-cband > img[data-parallax] {
    top: 0 !important;
    height: auto !important;
    object-fit: fill !important;
    transform: none !important;
  }

  .kv-cband__scrim {
    background: linear-gradient(
      to bottom,
      rgba(16, 16, 16, 0.35) 0,
      rgba(16, 16, 16, 0.55) 90px,
      var(--kv-surface-dark) 150px
    );
  }
}

/* --------------------------------------------------------- teklif bandı -- */
.kv-quoteband {
  background: var(--kv-accent);
  padding: var(--kv-space-9) 0;
}

.kv-quoteband__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--kv-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-5);
}

.kv-quoteband__title {
  text-align: center;
  margin-bottom: var(--kv-space-2);
}

/* ----------------------------------------------------------------- form -- */

/*
 * ad-o12: form alanlarının kenarlığı ve odak halkası açıkça yazılıyor.
 *
 * Kenarlık zaten vardı ama --kv-grey-200 (#eee) beyaz üstünde 1.2 kontrast
 * veriyordu; WCAG 1.4.11 form denetiminin sınırı için 3 istiyor. Aynı rampada
 * bir adım koyu olan --kv-grey-500 (#939393) beyaz üstünde 3.07 — ikinci bir
 * renk girmeden eşiği geçiyor.
 *
 * Odak: taban kuralda outline:none vardı, yani klavyeyle gezen kullanıcı
 * hangi alanda olduğunu göremiyordu. Art direktörün önerisi odak için
 * --kv-accent-border idi ama o beyaz üstünde 2.44 kalıyor; kontrastı mürekkep
 * taşıyor, marka sarısı dış halka olarak duruyor.
 */
.kv-field {
  border: 1px solid var(--kv-grey-500);
}

.kv-field:focus,
.kv-field:focus-visible {
  outline: 2px solid var(--kv-ink-600);
  outline-offset: 1px;
  border-color: var(--kv-ink-600);
  box-shadow: 0 0 0 5px var(--kv-scrim-accent);
}

/* Aynı halka iş konusu düğmelerinde ve gönder düğmesinde de geçerli. */
.kv-checkbox:focus-visible,
.kv-form__submit:focus-visible {
  outline: 2px solid var(--kv-ink-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--kv-scrim-accent);
}

.kv-field.is-invalid {
  border-color: var(--kv-ink-600);
}

.kv-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-4);
}

.kv-form legend {
  padding: 0;
}

.kv-form__hp {
  position: absolute;
  left: -9999px;
  top: 0;
}

.kv-check__box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px #cccccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kv-checkbox[aria-pressed='true'] .kv-check__box,
.kv-checkbox.is-invalid .kv-check__box {
  box-shadow: inset 0 0 0 2px var(--kv-ink-600);
}

.kv-check__box span {
  width: 10px;
  height: 10px;
  background: var(--kv-ink-600);
  opacity: 0;
  transition: opacity var(--kv-duration) var(--kv-ease);
}

.kv-checkbox[aria-pressed='true'] .kv-check__box span {
  opacity: 1;
}

.kv-check__label {
  font: var(--kv-weight-regular) 13px / 20px var(--kv-font-body);
}

.kv-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-6);
  flex-wrap: wrap;
}

.kv-form__submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  height: 44px;
  padding: 0 var(--kv-space-8);
  background: var(--kv-surface-dark);
  color: var(--kv-white);
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
}

.kv-form__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

.kv-form__ok {
  background: var(--kv-accent);
  padding: var(--kv-space-6);
  font: var(--kv-weight-bold) 16px / 26px var(--kv-font-display);
  color: var(--kv-text-on-accent);
}

.kv-form__err {
  background: var(--kv-surface-dark);
  color: var(--kv-white);
  padding: var(--kv-space-6);
  font: var(--kv-text-copy);
}

/* --------------------------------------------------------------- footer -- */
.kv-footer__ctatitle {
  color: var(--kv-text-on-accent);
}

.kv-footer__ctalead {
  margin-top: 6px;
  color: var(--kv-text-on-accent);
  opacity: 0.75;
}

.kv-footer__ctaside {
  display: flex;
  align-items: center;
  gap: var(--kv-space-8);
  flex-wrap: wrap;
}

/*
 * Sarı banttaki telefon numarası. `.kv-footer a` (0,0,1,1) buradaki tek
 * sınıfı (0,0,1,0) eziyordu; numara sarı zeminde beyaz kalıyor ve kontrast
 * 1.35:1'e düşüyordu — bandın en okunmaz öğesi oydu, üstelik her sayfada.
 * Sosyal rozetlerde aynı tuzak daha önce yakalanmıştı (bkz. .kv-social__chip);
 * burada gözden kaçmış. Sınıf iki kez yazılarak özgüllük yükseltiliyor.
 */
.kv-footer .kv-footer__phone {
  color: var(--kv-text-on-accent);
}

.kv-footer a.kv-footer__phone:hover {
  color: var(--kv-ink-600);
}

.kv-footer__brand,
.kv-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-5);
}

.kv-footer__brand {
  gap: var(--kv-space-6);
}

.kv-footer__brand img {
  height: 44px;
  width: auto;
}

.kv-footer__blurb,
.kv-footer__address {
  color: var(--kv-text-inverse-muted);
}

.kv-footer__heading {
  font-family: var(--kv-font-body);
  font-size: var(--kv-size-label);
  font-weight: var(--kv-weight-bold);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kv-accent);
  margin: 0;
}

.kv-footer__line {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-4);
}

/* Sabit genişlikli ikonlar numaraları alt alta hizalı tutuyor. */
.kv-footer__line i {
  width: 15px;
  font-size: 15px;
  flex: 0 0 auto;
  color: var(--kv-accent);
}

.kv-footer__copy {
  font-size: var(--kv-size-meta);
  color: var(--kv-text-inverse-muted);
}

.kv-footer__nav {
  display: flex;
  gap: var(--kv-space-8);
  flex-wrap: wrap;
}

.kv-footer__nav a {
  font: var(--kv-text-nav);
  text-transform: uppercase;
  letter-spacing: var(--kv-tracking-label);
  white-space: nowrap;
}

/* ------------------------------------------------------- instagram şerit - */
.kv-ig__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--kv-surface-dark);
}

.kv-ig__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--kv-alpha-solid);
}

.kv-ig__icon {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px;
  display: flex;
  justify-content: flex-end;
  color: var(--kv-accent);
  font-size: 16px;
}

.kv-follow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-9);
  flex-wrap: wrap;
}

.kv-follow__left {
  display: flex;
  align-items: baseline;
  gap: var(--kv-space-6);
  flex-wrap: wrap;
}

/* -------------------------------------------------------- hizmet gövdesi - */
.kv-body h2 {
  font: var(--kv-text-h4);
  letter-spacing: var(--kv-tracking-heading);
  margin: var(--kv-space-9) 0 var(--kv-space-5);
}

.kv-body h2:first-child {
  margin-top: 0;
}

.kv-body p {
  font: var(--kv-text-copy);
  margin: 0 0 var(--kv-space-7);
}

.kv-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Madde işareti mutlak konumlandırılıyor, flex değil: "Başlık:" kalın
 * etiketiyle devamı aynı metin akışında kalmalı. Flex olsaydı ikisi ayrı
 * sütuna düşerdi.
 */
.kv-body li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 var(--kv-space-5);
  padding-bottom: var(--kv-space-5);
  border-bottom: 1px solid var(--kv-border-hairline);
  font: var(--kv-text-copy);
}

/*
 * Madde işareti: Font Awesome kaldırıldığında '\f105' karakteri boş kutuya
 * dönmüştü. Yazı tipsiz, iki kenarlıklı küçük bir ok.
 */
.kv-body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--kv-accent);
  border-right: 2px solid var(--kv-accent);
  transform: rotate(45deg);
}

.kv-body li strong {
  font-weight: var(--kv-weight-bold);
}

.kv-body blockquote {
  margin: 0 0 var(--kv-space-7);
  padding-left: var(--kv-space-6);
  border-left: 3px solid var(--kv-accent);
  font: var(--kv-text-lead);
}

/* ------------------------------------------------------- gövde tabloları - */

/*
 * mz-o3: fiyat ve karşılaştırma tabloları. Tablo kuralları şimdiye kadar
 * yalnızca .kv-article__body altında (blog yazısı) vardı; hizmet ve proje
 * gövdeleri .kv-body kullanıyor ve tablo eklenirse biçimsiz kalıyordu.
 *
 * Dar ekran: tablo kendi kabında yatay kayıyor, sayfa gövdesi yana kaymıyor.
 * İki markup biçimi de destekleniyor — blok editörünün figure.wp-block-table
 * sarmalayıcısı ve klasik editörden gelen düz <table>. Düz tabloya kap
 * ekleyemediğimiz için tablonun kendisi kaydırma kabı oluyor (display:block);
 * hücre düzeni anonim tablo kutusu sayesinde bozulmuyor.
 */
.kv-body .wp-block-table {
  margin: 0 0 var(--kv-space-7);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.kv-body > table,
.kv-body .wp-block-table > table {
  width: 100%;
  margin: 0 0 var(--kv-space-7);
  border-collapse: collapse;
  border: 1px solid var(--kv-border-hairline);
  font: var(--kv-text-copy);
}

/*
 * Sarmalayıcısı olan tabloda alt boşluğu kap taşıyor. min-width burada
 * güvenli: kaydırma kabı figure, tablo onun içeriği — dar ekranda figure
 * kayar, sayfa kaymaz.
 */
.kv-body .wp-block-table > table {
  margin-bottom: 0;
  min-width: 480px;
}

.kv-body th,
.kv-body td {
  padding: var(--kv-space-4) var(--kv-space-5);
  border-bottom: 1px solid var(--kv-border-hairline);
  text-align: left;
  vertical-align: top;
}

/* Başlık satırı: düz renk bloğu ve altında kalın mürekkep çizgi. */
.kv-body thead th {
  background: var(--kv-surface-band);
  border-bottom: 2px solid var(--kv-ink-600);
  color: var(--kv-text-strong);
  font-weight: var(--kv-weight-bold);
  white-space: nowrap;
}

/* Satır başı hücresi (scope="row") de başlık gibi okunsun. */
.kv-body tbody th {
  font-weight: var(--kv-weight-semibold);
  color: var(--kv-text-strong);
}

/* Okuma şeridi — aynı rampada tek ton, ikinci renk yok. */
.kv-body tbody tr:nth-child(even) {
  background: var(--kv-surface-band);
}

.kv-body tbody tr:last-child th,
.kv-body tbody tr:last-child td {
  border-bottom: 0;
}

.kv-body table caption,
.kv-body .wp-block-table figcaption {
  margin-top: var(--kv-space-4);
  color: var(--kv-text-body);
  font: var(--kv-text-meta);
  text-align: left;
}

/* Tablo hücresindeki liste, gövde listesinin madde biçimini almasın. */
.kv-body td li,
.kv-body th li {
  padding-left: 0;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.kv-body td li::before,
.kv-body th li::before {
  content: none;
}

@media (max-width: 700px) {
  .kv-body th,
  .kv-body td {
    padding: var(--kv-space-3) var(--kv-space-4);
  }

  /*
   * Sarmalayıcısı olmayan düz tablo dar ekranda kendi kaydırma kabı oluyor.
   * min-width veremiyoruz — kaydıran kutu tablonun kendisi, ona genişlik
   * tabanı vermek sayfayı taşırır. Onun yerine hücreler sarmıyor: tablo
   * doğal genişliğine açılıyor ve kutu kayıyor.
   */
  .kv-body > table {
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * display:block olan tablonun satır grupları anonim bir tablo kutusuna
   * sarılıyor ve o kutu içeriğe göre büzülüyor — dar bir tabloda kenarlık ve
   * okuma şeridi kabın yarısında kesiliyordu. thead/tbody'yi kendi tablosu
   * yapınca kap doluyor; geniş tabloda ikisi de aynı doğal genişliğe açılıp
   * birlikte kayıyor.
   */
  .kv-body > table > * {
    display: table;
    width: 100%;
  }

  .kv-body > table th,
  .kv-body > table td {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------- proje detayı -- */
.kv-proj__aside {
  background: var(--kv-accent);
  padding: var(--kv-space-9);
}

.kv-proj__meta {
  padding: var(--kv-space-5) 0;
  border-top: 1px solid var(--kv-border-rule-on-accent);
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-1);
}

/*
 * ad-o12: ilk künye satırının üstündeki ayırıcı havada duruyordu — sarı yan
 * panelde YER başlığının üstünde ayıracak bir şey yok.
 */
.kv-proj__meta:first-child {
  border-top: 0;
  padding-top: 0;
}

.kv-proj__cta {
  margin-top: var(--kv-space-8);
}

/* ------------------------------------------------------- iletişim sayfası - */
.kv-info {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-2);
  padding-top: var(--kv-space-7);
  border-top: 1px solid var(--kv-border-hairline);
}

.kv-info__value {
  font: var(--kv-weight-regular) 22px / 32px var(--kv-font-body);
}

a.kv-info__value {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-5);
}

.kv-info__value i {
  width: 20px;
  font-size: 20px;
  flex: 0 0 auto;
  color: var(--kv-accent);
}

.kv-mapwrap {
  position: relative;
  width: 100%;
}

.kv-mapwrap .kv-contactbtn {
  position: absolute;
  left: 50%;
  bottom: var(--kv-space-9);
  transform: translateX(-50%);
  padding: 0 var(--kv-control-px);
}

/* --------------------------------------------- bileşen kırılım noktaları - */
@media (max-width: 980px) {
  /*
   * Dikey akordiyonda paneller sabit yükseklikte. Açık panelin masaüstü
   * kuralı (.kv-reel__panel.is-active{flex:2.6 1 0%}) daha yüksek özgüllükte
   * olduğu için burada da iki seçiciyle yazılıyor — yoksa flex-basis:0
   * sütun ekseninde yüksekliği eziyor ve paneller kayboluyor.
   */
  .kv-reel__panel,
  .kv-reel__panel.is-active {
    flex: 0 0 auto;
  }

  .kv-reel__panel {
    height: 96px;
  }

  .kv-reel__panel.is-active {
    height: 380px;
  }

  .kv-reel__open {
    padding: var(--kv-space-6);
  }

  .kv-reel__idle {
    padding: 0 var(--kv-space-6);
    flex-direction: row;
    align-items: center;
    gap: var(--kv-space-6);
    justify-content: flex-start;
  }

  .kv-reel__vtitle {
    display: none;
  }

  .kv-reel__htitle {
    display: block;
  }
}

/* WordPress yönetici çubuğu sabit başlığı aşağı itmesin. */
.admin-bar .kv-scrolltop {
  bottom: calc(var(--kv-space-6) + 10px);
}

/* WordPress hizalama sınıfları (editörden gelen içerik için). */
.alignleft {
  float: left;
  margin: 0 var(--kv-space-7) var(--kv-space-5) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--kv-space-5) var(--kv-space-7);
}

.aligncenter {
  display: block;
  margin: 0 auto var(--kv-space-5);
}

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ------------------------------------------------------------ künye ------ */
.kv-postmeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kv-space-3);
  font: var(--kv-weight-bold) var(--kv-size-meta) / 20px var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kv-grey-500);
}

.kv-postmeta a {
  color: var(--kv-text-strong);
}

/*
 * Kart içinde künye iki satıra sarabiliyor ve satır sonunda boşta bir ayraç
 * kalıyordu. Kartlarda ayraç yerine boşluk ayırıyor — CSS sarmayı algılayıp
 * ayracı gizleyemediği için tek doğru çözüm bu.
 */
.kv-bcard__body .kv-postmeta {
  gap: var(--kv-space-2) var(--kv-space-5);
}

.kv-bcard__body .kv-postmeta > [aria-hidden="true"] {
  display: none;
}

.kv-postmeta a:hover {
  color: var(--kv-accent-hover);
}

/* ------------------------------------------------------------ blog kartı - */
.kv-bcard {
  display: flex;
  flex-direction: column;
  background: var(--kv-surface-card);
}

.kv-bcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--kv-surface-placeholder);
}

.kv-bcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-bcard:hover .kv-bcard__img {
  transform: scale(1.05);
}

.kv-bcard__scrim {
  position: absolute;
  inset: 0;
  background: var(--kv-overlay-photo);
  opacity: 0;
  transition: opacity var(--kv-duration) var(--kv-ease);
}

.kv-bcard:hover .kv-bcard__scrim {
  opacity: 1;
}

/*
 * Kartın üst kenarındaki sarı çizgi: hover'da soldan sağa açılır. Portfolyo
 * ızgarasındaki alt çizginin kart üstündeki karşılığı.
 */
.kv-bcard__media::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--kv-indicator-h);
  width: 0;
  background: var(--kv-accent);
  transition: width var(--kv-duration-slow) var(--kv-ease);
}

.kv-bcard:hover .kv-bcard__media::after {
  width: 100%;
}

.kv-bcard__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-5);
  padding: var(--kv-space-7) 0 0;
}

.kv-bcard__title a {
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-bcard:hover .kv-bcard__title a {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-bcard__excerpt {
  color: var(--kv-text-muted);
}

/* Blog ızgarasında satır araları kartlara göre biraz daha geniş. */
.kv-bloglist {
  gap: var(--kv-space-12) var(--kv-space-9);
}

/* ----------------------------------------------------------- etiket çipi - */
.kv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kv-space-3);
  margin-bottom: var(--kv-space-11);
}

.kv-chip-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--kv-space-6);
  font: var(--kv-weight-semibold) var(--kv-size-meta) / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  color: var(--kv-text-strong);
  box-shadow: inset 0 0 0 1px var(--kv-border-hairline);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease),
    box-shadow var(--kv-duration) var(--kv-ease);
}

.kv-chip-link:hover,
.kv-chip-link.is-on {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  box-shadow: inset 0 0 0 1px var(--kv-accent);
}

/* ------------------------------------------------------------- yazı metni - */
.kv-article__lead {
  margin: var(--kv-space-7) 0 var(--kv-space-9);
  padding-left: var(--kv-space-6);
  border-left: var(--kv-indicator-h) solid var(--kv-accent);
  color: var(--kv-text-body);
}

.kv-article__body > * {
  margin: 0 0 var(--kv-space-7);
}

.kv-article__body h2 {
  font: var(--kv-text-h3);
  letter-spacing: var(--kv-tracking-heading);
  margin: var(--kv-space-11) 0 var(--kv-space-5);
}

.kv-article__body h3 {
  font: var(--kv-text-h4);
  letter-spacing: var(--kv-tracking-heading);
  margin: var(--kv-space-9) 0 var(--kv-space-5);
}

.kv-article__body p,
.kv-article__body li {
  font: var(--kv-weight-regular) 17px / 30px var(--kv-font-body);
}

.kv-article__body ul,
.kv-article__body ol {
  padding-left: var(--kv-space-8);
}

.kv-article__body li {
  margin-bottom: var(--kv-space-3);
}

.kv-article__body blockquote {
  margin: var(--kv-space-9) 0;
  padding: var(--kv-space-7) var(--kv-space-8);
  background: var(--kv-surface-band);
  border-left: var(--kv-indicator-h) solid var(--kv-accent);
  font: var(--kv-text-lead);
}

.kv-article__body blockquote p:last-child {
  margin-bottom: 0;
}

.kv-article__body img,
.kv-article__body figure {
  margin: var(--kv-space-9) 0;
}

.kv-article__body figcaption {
  margin-top: var(--kv-space-3);
  font: var(--kv-weight-regular) var(--kv-size-meta) / 20px var(--kv-font-body);
  color: var(--kv-grey-500);
}

.kv-article__body a {
  color: var(--kv-text-strong);
  box-shadow: inset 0 -2px 0 var(--kv-accent);
  transition: background-color var(--kv-duration) var(--kv-ease);
}

.kv-article__body a:hover {
  background: var(--kv-accent);
}

.kv-article__body pre {
  overflow-x: auto;
  padding: var(--kv-space-6);
  background: var(--kv-surface-dark);
  color: var(--kv-white);
  font-size: 14px;
}

.kv-article__body table {
  width: 100%;
  border-collapse: collapse;
}

.kv-article__body th,
.kv-article__body td {
  padding: var(--kv-space-4) var(--kv-space-5);
  border-bottom: 1px solid var(--kv-border-hairline);
  text-align: left;
}

/* --------------------------------------------------------------- etiketler - */
.kv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kv-space-3);
  margin: var(--kv-space-11) 0 0;
  padding-top: var(--kv-space-7);
  border-top: 1px solid var(--kv-border-hairline);
}

/* --------------------------------------------------------------- paylaşım - */
.kv-share {
  display: flex;
  align-items: center;
  gap: var(--kv-space-6);
  flex-wrap: wrap;
  margin-top: var(--kv-space-9);
  padding-top: var(--kv-space-7);
  border-top: 1px solid var(--kv-border-hairline);
}

.kv-share__list {
  display: flex;
  gap: var(--kv-space-3);
}

.kv-share__chip {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--kv-text-strong);
  box-shadow: inset 0 0 0 1px var(--kv-border-hairline);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease),
    box-shadow var(--kv-duration) var(--kv-ease);
}

.kv-share__chip:hover {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  box-shadow: inset 0 0 0 1px var(--kv-accent);
}

/* -------------------------------------------------------------- sayfalama - */
.kv-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kv-space-2);
  margin-top: var(--kv-space-12);
}

.kv-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 var(--kv-space-4);
  font: var(--kv-weight-semibold) var(--kv-size-label) / 1 var(--kv-font-body);
  color: var(--kv-text-strong);
  box-shadow: inset 0 0 0 1px var(--kv-border-hairline);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease),
    box-shadow var(--kv-duration) var(--kv-ease);
}

.kv-pager .page-numbers:hover,
.kv-pager .page-numbers.current {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  box-shadow: inset 0 0 0 1px var(--kv-accent);
}

.kv-pager .dots {
  box-shadow: none;
}

.kv-pager .dots:hover {
  background: transparent;
  color: var(--kv-text-strong);
}

/* ------------------------------------------------ blog kırılım noktaları - */
@media (max-width: 980px) {

  .kv-bloglist {
    gap: var(--kv-space-11) var(--kv-space-9);
  }
}

/* ==========================================================================
   MAGAZİN DÜZENİ (blog listesi)
   ========================================================================== */

.kv-shead--flush {
  max-width: none;
}

/* --------------------------------------------- magazin kırılım noktaları - */

/* ==========================================================================
   BLOG DETAY — yalnızca blog şablonlarında kullanılan sınıflar.
   Hizmet sayfaları bu bloktaki hiçbir kuraldan etkilenmiyor.
   ========================================================================== */

/* ------------------------------------------------------------ blog şeridi - */
/*
 * Başlık bandının hemen altındaki ikincil gezinme. Aramadan doğrudan bir
 * yazıya düşen okuyucu, blogun içinde olduğunu ve başka konular bulunduğunu
 * buradan görüyor.
 */
.kv-blogbar {
  background: var(--kv-surface-dark);
  border-bottom: var(--kv-indicator-h) solid var(--kv-accent);
}

/*
 * Blog listesinde hero yok; site başlığı (position:absolute) dayanacak bir
 * zemin bulamıyordu. Bu blok o zemini veriyor: yalnızca başlığın kendi alanı,
 * içinde başka bir şey yok. Blog menüsü altında ayrı bir bant olarak duruyor —
 * ikisi karışmasın diye aralarına aksan çizgisi giriyor.
 */
.kv-headzone {
  height: var(--kv-header-height);
  background: var(--kv-surface-dark);
}

.kv-blogbar--top {
  border-top: var(--kv-indicator-h) solid var(--kv-accent);
}

/*
 * Şerit ortalı: "BLOG" işareti ve kategoriler tek grup hâlinde ortada duruyor.
 * Geniş ekranda sola yapışık bir menü şeridin sağ yarısını boş bırakıyordu.
 */
.kv-blogbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kv-space-8);
  min-height: 62px;
  flex-wrap: wrap;
}

.kv-blogbar__home {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-3);
  flex: 0 0 auto;
  font: var(--kv-weight-bold) var(--kv-size-label) / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  color: var(--kv-accent);
}

.kv-blogbar__home:hover {
  color: var(--kv-white);
}

.kv-blogbar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kv-space-7);
  flex-wrap: wrap;
  overflow-x: auto;
}

.kv-blogbar__nav a {
  font: var(--kv-weight-semibold) var(--kv-size-meta) / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  color: var(--kv-text-inverse-muted);
  white-space: nowrap;
  padding: var(--kv-space-4) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--kv-duration) var(--kv-ease), border-color var(--kv-duration) var(--kv-ease);
}

.kv-blogbar__nav a:hover,
.kv-blogbar__nav a.is-on {
  color: var(--kv-accent);
  border-bottom-color: var(--kv-accent);
}

/* Açılır seçicinin düğmesi yalnızca dar ekranda; masaüstünde şerit var. */
.kv-blogbar__toggle {
  display: none;
}

/* Kategori adının yanındaki yazı sayısı — dalın ne kadar dolu olduğunu söyler. */
.kv-blogbar__count {
  display: inline-block;
  margin-left: var(--kv-space-1);
  font-weight: var(--kv-weight-medium);
  opacity: .6;
}

.kv-blogbar__nav a.is-on .kv-blogbar__count {
  opacity: .85;
}

/* ------------------------------------------------------- yazı + yan sütun - */
.kv-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--kv-space-12);
  align-items: start;
}

.kv-article__main {
  max-width: 760px;
  min-width: 0;
}

/*
 * Yan sütun okurken ekranda kalıyor; uzun yazılarda gezinme kolaylaşıyor.
 * Kutular ekrandan uzun olursa (kısa dizüstü ekranları) sütun kendi içinde
 * kayıyor — yoksa alttaki teklif kutusuna hiç ulaşılamıyordu.
 */
.kv-aside {
  position: sticky;
  top: var(--kv-space-6);
  max-height: calc(100vh - var(--kv-space-9));
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-2);
}

.kv-aside__box {
  padding: var(--kv-space-7);
  background: var(--kv-surface-band);
}

.kv-aside__box--cta {
  background: var(--kv-accent);
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-5);
}

.kv-aside__title {
  display: block;
  margin-bottom: var(--kv-space-5);
  font: var(--kv-weight-bold) var(--kv-size-meta) / 20px var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kv-text-strong);
}

.kv-aside__box--cta .kv-aside__title {
  margin-bottom: 0;
}

.kv-aside ol,
.kv-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* İçindekiler: numaralar sarı, madde girintisi elle veriliyor. */
.kv-toc ol {
  counter-reset: kv-toc;
}

.kv-toc li {
  counter-increment: kv-toc;
  position: relative;
  padding-left: var(--kv-space-7);
  margin-bottom: var(--kv-space-4);
}

.kv-toc li::before {
  content: counter(kv-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font: var(--kv-weight-extrabold) 12px / 20px var(--kv-font-display);
  color: var(--kv-accent);
}

.kv-toc a {
  font: var(--kv-weight-regular) 14px / 20px var(--kv-font-body);
  color: var(--kv-text-body);
}

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

.kv-aside__cats li {
  border-top: 1px solid var(--kv-border-hairline);
}

.kv-aside__cats li:first-child {
  border-top: 0;
}

.kv-aside__cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-4);
  padding: var(--kv-space-4) 0;
  font: var(--kv-weight-semibold) 14px / 20px var(--kv-font-body);
  color: var(--kv-text-strong);
}

.kv-aside__cats a:hover {
  color: var(--kv-accent-hover);
}

.kv-aside__cats em {
  font: var(--kv-weight-extrabold) 12px / 1 var(--kv-font-display);
  font-style: normal;
  color: var(--kv-grey-500);
}

.kv-aside__posts li {
  padding: var(--kv-space-5) 0;
  border-top: 1px solid var(--kv-border-hairline);
}

.kv-aside__posts li:first-child {
  border-top: 0;
  padding-top: 0;
}

.kv-aside__posts a {
  display: block;
  font: var(--kv-weight-semibold) 14px / 21px var(--kv-font-body);
  color: var(--kv-text-strong);
}

.kv-aside__posts a:hover {
  color: var(--kv-accent-hover);
}

.kv-aside__posts time {
  display: block;
  margin-top: var(--kv-space-1);
  font: var(--kv-weight-regular) 12px / 18px var(--kv-font-body);
  color: var(--kv-grey-500);
}

/* --------------------------------------------------- önceki / sonraki ---- */
.kv-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: var(--kv-space-11);
  background: var(--kv-border-hairline);
}

/* İlk ya da son yazıda karşı taraf yok — tek sütun, boş hücre kalmıyor. */
.kv-prevnext--tek {
  grid-template-columns: 1fr;
}

.kv-prevnext__item {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-3);
  padding: var(--kv-space-7);
  background: var(--kv-surface-card);
  color: var(--kv-text-strong);
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease);
}

.kv-prevnext__item--next {
  text-align: right;
  align-items: flex-end;
}

.kv-prevnext__item:hover {
  background: var(--kv-surface-dark);
  color: var(--kv-text-on-dark);
}

.kv-prevnext__label {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-3);
  font: var(--kv-weight-bold) var(--kv-size-meta) / 20px var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  color: var(--kv-accent);
}

.kv-prevnext__title {
  font: var(--kv-weight-semibold) 16px / 24px var(--kv-font-body);
}

/* ---------------------------------------------------------- hizmet bandı - */
/*
 * Yazının altındaki köprü: okuyucuyu yazının konusuna en yakın hizmet
 * sayfasına götürür. Hizmet sayfalarındaki sarı teklif bandının blog
 * karşılığı — daha hafif, tek satırlık.
 */
.kv-blogcta {
  background: var(--kv-surface-band);
  padding: var(--kv-space-11) 0;
  border-top: 1px solid var(--kv-border-hairline);
}

.kv-blogcta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-9);
  flex-wrap: wrap;
}

.kv-blogcta__title {
  margin: var(--kv-space-3) 0 var(--kv-space-2);
}

.kv-blogcta__lead {
  color: var(--kv-text-muted);
  max-width: 520px;
}

.kv-blogcta__buttons {
  display: flex;
  gap: var(--kv-space-5);
  flex-wrap: wrap;
}

/* ------------------------------------------ blog detay kırılım noktaları - */
@media (max-width: 1100px) {
  .kv-article {
    grid-template-columns: 1fr;
    gap: var(--kv-space-11);
  }

  .kv-article__main {
    max-width: none;
  }

  /* Tek sütuna inince yan sütun yapışkan kalmasın. */
  .kv-aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .kv-aside__box {
    /* İçindekiler mobilde yazının başında gereksiz yer kaplıyor. */
    order: 2;
  }

  .kv-toc {
    display: none;
  }
}

@media (max-width: 620px) {
  .kv-prevnext {
    grid-template-columns: 1fr;
  }

  .kv-prevnext__item--next {
    text-align: left;
    align-items: flex-start;
  }

  /*
   * Mobilde kategoriler tek satıra sığmıyor. Kaydırmalı şerit yerine açılır
   * seçici: düğme bulunulan kategoriyi söylüyor, liste dokununca şeridin
   * altına açılıyor. "BLOG" işareti gizli — "TÜMÜ" aynı adrese gidiyor.
   */
  .kv-blogbar__inner {
    position: relative;
    justify-content: flex-start;
    gap: 0;
  }

  .kv-blogbar__home {
    display: none;
  }

  .kv-blogbar__toggle {
    display: flex;
    align-items: center;
    gap: var(--kv-space-3);
    width: 100%;
    min-height: 62px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kv-text-on-dark);
    font: var(--kv-weight-bold) var(--kv-size-meta) / 1 var(--kv-font-body);
    letter-spacing: var(--kv-tracking-label);
    text-align: left;
    cursor: pointer;
  }

  .kv-blogbar__toggleLabel {
    color: var(--kv-accent);
  }

  .kv-blogbar__toggleValue {
    flex: 1;
    text-transform: uppercase;
  }

  .kv-blogbar__toggle i {
    transition: transform var(--kv-duration) var(--kv-ease);
  }

  .kv-blogbar[data-open="true"] .kv-blogbar__toggle i {
    transform: rotate(180deg);
  }

  /* Liste: kapalıyken display:none — erişilebilirlik ağacından da çıkıyor. */
  .kv-blogbar__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--kv-space-2) 0 var(--kv-space-4);
    background: var(--kv-surface-dark);
    border-top: 1px solid var(--kv-border-rule-on-dark);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
  }

  .kv-blogbar[data-open="true"] .kv-blogbar__nav {
    display: flex;
  }

  .kv-blogbar__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kv-space-5);
    padding: var(--kv-space-5) var(--kv-space-6) var(--kv-space-5) var(--kv-space-5);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }

  .kv-blogbar__nav a:hover,
  .kv-blogbar__nav a.is-on {
    border-bottom-color: transparent;
    border-left-color: var(--kv-accent);
    background: rgba(255, 255, 255, .04);
  }

  .kv-blogbar__count {
    margin-left: 0;
  }

  /* Daha dar ekranda biraz daha kısa. */
  .kv-phero {
    min-height: 260px;
  }

  .kv-arthead {
    padding: var(--kv-space-9) 0 var(--kv-space-7);
  }

  .kv-arthead__title,
  .kv-artcover__copy .kv-arthead__title {
    max-width: none;
  }

  .kv-sec--afterCover {
    padding-top: var(--kv-space-8);
  }

  /*
   * Dar ekranda künye iki satıra sarıyor ve ikinci satır ayraçla başlıyordu.
   * Ayraç yerine boşluk — kartlarda uygulanan çözümün aynısı.
   */
  .kv-postmeta {
    gap: var(--kv-space-2) var(--kv-space-5);
  }

  .kv-postmeta > [aria-hidden="true"] {
    display: none;
  }
}

/* ------------------------------------------------------ editör notu ------ */
/*
 * Boş bir listede panelden ne yapılacağını anlatan satır. Yalnızca giriş yapmış
 * editörlere basılıyor (şablonda current_user_can), ziyaretçi görmüyor.
 */
.kv-muted {
  font-size: var(--kv-size-label);
  line-height: 1.7;
  color: var(--kv-text-muted);
  opacity: 0.75;
}

/* ================================================= magazin blog düzeni ==== */

/* Hero kaldırıldığı için sayfanın kendi üst boşluğu burada. */
.kv-blogtop {
  padding: var(--kv-space-11) 0 var(--kv-space-12);
}

.kv-blogtop__head {
  max-width: 820px;
  margin-bottom: var(--kv-space-10);
}

.kv-blogtop__title {
  margin: 0 0 var(--kv-space-4);
}

.kv-blogtop__lead {
  margin: 0;
}

/* --------------------------------------------------------- bölüm başlığı - */

.kv-secbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-6);
  margin-bottom: var(--kv-space-9);
}

/* Başlığın solundaki sarı çubuk — referans tasarımdaki bayrağın karşılığı. */
.kv-secbar__title {
  display: flex;
  align-items: center;
  gap: var(--kv-space-4);
  margin: 0;
}

.kv-secbar__title::before {
  content: "";
  width: 6px;
  height: 26px;
  background: var(--kv-accent);
  flex: none;
}

.kv-secbar__more {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-2);
  padding: var(--kv-space-3) var(--kv-space-6);
  border: 1px solid var(--kv-border-hairline);
  color: var(--kv-text-strong);
  font: var(--kv-weight-bold) var(--kv-size-meta) / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--kv-duration) var(--kv-ease),
    border-color var(--kv-duration) var(--kv-ease);
}

.kv-secbar__more:hover {
  background: var(--kv-accent);
  border-color: var(--kv-accent);
}

/* ------------------------------------------------ ortak rozet ve süre ---- */

.kv-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 24px;
  padding: 0 var(--kv-space-4);
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font: var(--kv-weight-bold) 11px / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kart künyesi: tarih · saat ikonu + okuma süresi. Dar kartta alta sarıyor. */
.kv-cardmeta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kv-space-2);
  font: var(--kv-weight-medium) var(--kv-size-meta) / 1.4 var(--kv-font-body);
}

.kv-cardmeta__sep {
  opacity: .5;
}

.kv-readtime {
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-2);
  font: var(--kv-weight-medium) var(--kv-size-meta) / 1 var(--kv-font-body);
}

/* --------------------------------------------------------------- karo ---- */

.kv-tile {
  display: block;
  height: 100%;
}

.kv-tile__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--kv-surface-dark);
}

/*
 * Öne çıkarılan görsel 16:9 basılıyor — haber kapaklarının doğal oranı.
 * Görsel kırpılmasın diye koyu panel üstüne binmiyor, altına oturuyor.
 */
.kv-tile__media {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--kv-surface-placeholder);
}

.kv-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-tile__link:hover .kv-tile__img {
  transform: scale(1.04);
}

/*
 * Panel görselin altında ve kalan yüksekliği dolduruyor (flex:1). Mozaikte üç
 * sütun aynı satırda; sütunlar farklı doğal yükseklikte olduğunda fark panele
 * yazılıyor, görsellerin 16:9 oranı bozulmuyor.
 */
.kv-tile__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-3);
  padding: var(--kv-space-6);
  background: var(--kv-surface-dark);
  color: var(--kv-text-on-dark);
}

.kv-tile__title {
  display: block;
  font: var(--kv-weight-bold) 18px / 1.35 var(--kv-font-display);
  color: var(--kv-text-on-dark);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-tile__link:hover .kv-tile__title {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-tile__meta {
  color: var(--kv-text-inverse-muted);
  opacity: .85;
}

/* Ortadaki geniş karo: aynı işaretleme, büyük ölçüler. */
.kv-tile--lg .kv-tile__panel {
  gap: var(--kv-space-5);
  padding: var(--kv-space-9);
}

.kv-tile--lg .kv-tile__title {
  font-size: var(--kv-size-h3);
  line-height: 1.2;
}

/* ------------------------------------------------------ sıralı liste ----- */

.kv-ranks {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--kv-border-hairline);
}

.kv-rank {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: var(--kv-space-5);
  align-items: center;
  flex: 1;
  padding: var(--kv-space-6);
  border-bottom: 1px solid var(--kv-border-hairline);
  transition: background var(--kv-duration) var(--kv-ease);
}

.kv-rank:last-child {
  border-bottom: 0;
}

.kv-rank:hover {
  background: var(--kv-surface-band);
}

.kv-rank__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-3);
  min-width: 0;
}

.kv-rank__title {
  display: block;
  font: var(--kv-weight-bold) 15px / 1.35 var(--kv-font-display);
  color: var(--kv-text-strong);
}

.kv-rank__meta {
  color: var(--kv-text-muted);
}

/*
 * Dar sütunda künye tek satıra sığmıyor; sarınca satır sonunda boşta bir
 * ayraç kalıyordu. Sıralı listede tarih ile süre bilerek alt alta, ayraç gizli.
 */
.kv-rank__meta .kv-cardmeta {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-1);
}

.kv-rank__meta .kv-cardmeta__sep {
  display: none;
}

.kv-rank__media {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
}

.kv-rank__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kv-surface-placeholder);
}

/* Sıra numarası madalyonun sol üstünde — yalnızca görsel işaret. */
.kv-rank__num {
  position: absolute;
  left: -8px;
  top: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kv-surface-dark);
  color: var(--kv-text-on-dark);
  font: var(--kv-weight-bold) 12px / 1 var(--kv-font-body);
}

/* ------------------------------------------------------- yazı künyesi ---- */

/*
 * Yazı sayfasında hero yok. Kapak fotoğrafı varsa künye fotoğrafın üstüne
 * biniyor; yoksa kendi beyaz alanında duruyor (.kv-arthead).
 */
.kv-arthead {
  padding: var(--kv-space-11) 0 var(--kv-space-8);
}

.kv-arthead__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kv-space-3) var(--kv-space-5);
  margin-bottom: var(--kv-space-6);
  color: var(--kv-text-muted);
}

.kv-arthead__crumbs a {
  color: var(--kv-text-muted);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-arthead__crumbs a:last-child {
  color: var(--kv-text-strong);
}

.kv-arthead__crumbs a:hover {
  color: var(--kv-accent-hover);
}

.kv-arthead__title {
  max-width: 20ch;
  margin: 0 0 var(--kv-space-6);
}

/* -------------------------------------------------------------- kapak ---- */

.kv-artcover {
  position: relative;
  display: block;
  margin: 0;
}

/*
 * Kapakta oran sınırı yok: öne çıkarılan görsel kendi en/boy oranıyla basılıyor,
 * kırpılmıyor. (Liste kartlarında 16:9 zorunlu — orada ızgaranın hizası buna
 * bağlı; burada tek görsel olduğu için gerek yok.)
 */
.kv-artcover__media {
  position: relative;
  display: block;
  background: var(--kv-surface-placeholder);
}

.kv-artcover__img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Perde alttan yukarı açılıyor: yazının oturduğu yer koyu, fotoğrafın üst
 * yarısı açıkta kalıyor.
 */
.kv-artcover__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .88) 0%,
    rgba(0, 0, 0, .55) 45%,
    rgba(0, 0, 0, 0) 80%
  );
}

.kv-artcover__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--kv-space-10);
}

/* Fotoğraf üstündeki künye beyaz; vurgu sarıya dönüyor. */
.kv-artcover__copy .kv-arthead__title {
  max-width: 24ch;
  color: var(--kv-text-on-dark);
}

.kv-artcover__copy .kv-arthead__crumbs,
.kv-artcover__copy .kv-arthead__crumbs a {
  color: var(--kv-accent);
}

.kv-artcover__copy .kv-arthead__crumbs a:last-child {
  color: var(--kv-text-on-dark);
}

.kv-artcover__copy .kv-postmeta {
  color: var(--kv-text-inverse-muted);
}

.kv-artcover__copy .kv-postmeta a {
  color: var(--kv-text-on-dark);
}

/* Kapaktan sonra gövde biraz daha yakın başlasın. */
.kv-sec--afterCover {
  padding-top: var(--kv-space-10);
}

/*
 * Mobil kapak — bu blok kapak kurallarının ARDINDAN gelmeli. Aynı özgüllükte
 * sonra gelen kural kazandığı için daha yukarıdaki 700px bloğuna yazıldığında
 * temel kurallar bunları eziyordu (min-height dışında hepsi kayboluyordu).
 *
 * Dar ekranda künye fotoğraftan uzun olabiliyor (ölçüldü: 328px yazı /
 * 307px fotoğraf). Burada kapağın yüksekliğini künye belirliyor, fotoğraf
 * arkayı object-fit:cover ile dolduruyor — yani mobilde kapak kırpılabilir,
 * masaüstünde kırpılmıyor.
 */
@media (max-width: 700px) {
  .kv-artcover {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 420px;
  }

  .kv-artcover__media {
    position: absolute;
    inset: 0;
  }

  .kv-artcover__img {
    height: 100%;
    object-fit: cover;
  }

  .kv-artcover__copy {
    position: relative;
    padding: var(--kv-space-7) var(--kv-space-6);
  }

  .kv-artcover__copy .kv-arthead__title {
    max-width: none;
  }

  .kv-artcover__scrim {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .9) 0%,
      rgba(0, 0, 0, .65) 60%,
      rgba(0, 0, 0, .15) 100%
    );
  }

  .kv-sec--afterCover {
    padding-top: var(--kv-space-8);
  }
}

/* ------------------------------------------------------------- duyarlı ---- */

@media (max-width: 700px) {
  .kv-blogtop {
    padding: var(--kv-space-9) 0 var(--kv-space-10);
  }

  .kv-tile--lg .kv-tile__panel {
    padding: var(--kv-space-6);
  }

  .kv-tile--lg .kv-tile__title {
    font-size: 22px;
  }

  .kv-secbar {
    flex-wrap: wrap;
  }
}

/* ================================= D · referans düzen ==================== */
/*
 * Müşterinin ilettiği örnek temel alındı. Bu düzen temanın iki kuralından
 * bilerek ayrılıyor: başlıklar serif (Lora) ve kategori etiketleri kategoriye
 * göre renkli. Her ikisi de yalnızca bu blokta geçerli; sitenin geri kalanı
 * Poppins ve tek sarı aksanla devam ediyor.
 */

.kv-m2 {
  padding: var(--kv-space-10) 0 var(--kv-space-13);
  background: var(--kv-grey-100);
}

.kv-m2 .kv-secbar {
  margin-top: var(--kv-space-12);
}

/* -------------------------------------------------- kategori etiketi ---- */

/*
 * Rozet tek aksanda (ad-o1). Önce dört kategorinin her biri kendi renginde
 * basılıyordu — şeftali, lavanta, nane, pudra mavisi — ve bunlar jeton bile
 * değil, doğrudan hex idi. tokens.css "one hue, one ramp; no second colour
 * ever enters the palette" diyor, dört modifier de kaldırıldı.
 *
 * Kategoriyi artık renk değil rozetin üstündeki AD ayırıyor. Sınıf adı
 * (kv-catchip--<kategori>) HTML'de duruyor: ileride görsel ayrım istenirse
 * ikinci bir hue yerine aynı rampada ton farkı jeton olarak tokens.css'e
 * eklenip buradan bağlanır.
 *
 * Kontrast: ink-600 (#242424) / accent (#ffdb58) = 11.9.
 */
.kv-catchip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px var(--kv-space-4);
  border-radius: var(--kv-radius-pill);
  background: var(--kv-accent);
  color: var(--kv-text-on-accent);
  font: var(--kv-weight-semibold) 12px / 1.35 var(--kv-font-body);
  white-space: nowrap;
}

/* ------------------------------------------- kategori sayfası künyesi ---- */

/*
 * Kategori arşivinin başlığı. Blog anasayfasında böyle bir künye yok (manşet
 * doğrudan başlıyor); burada okuyucunun hangi dalda olduğunu söylemesi gerek.
 */
.kv-m2head {
  max-width: 760px;
  margin-bottom: var(--kv-space-9);
}

.kv-m2head__title {
  margin: 0 0 var(--kv-space-4);
  font: var(--kv-weight-bold) var(--kv-size-h2) / 1.14 var(--kv-font-serif);
  color: var(--kv-text-strong);
}

.kv-m2head__lead {
  margin: 0;
  font: var(--kv-weight-regular) 16px / 1.6 var(--kv-font-body);
  color: var(--kv-text-muted);
}

/* --------------------------------------------------- yazar imzası ------- */

.kv-byline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kv-space-2) var(--kv-space-3);
  font: var(--kv-weight-medium) 13px / 1 var(--kv-font-body);
  color: var(--kv-text-muted);
}

.kv-byline__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--kv-radius-circle);
  background: var(--kv-accent);
  color: var(--kv-ink-600);
  font: var(--kv-weight-bold) 11px / 1 var(--kv-font-body);
  letter-spacing: .02em;
}

.kv-byline__name {
  font-weight: var(--kv-weight-semibold);
  color: var(--kv-text-strong);
}

.kv-byline__sep {
  opacity: .45;
}

.kv-byline--dark,
.kv-byline--dark .kv-byline__name {
  color: var(--kv-text-on-dark);
}

/* --------------------------------------------------- manşet ızgarası ---- */

/*
 * Üst blok iki sütun: solda manşet ve altındaki üçlü ızgara, sağda çok
 * okunanlar. Manşet tam genişlikte değil — üçlü ızgarayla aynı hizada bitiyor.
 */
.kv-m2top {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--kv-space-8);
  align-items: start;          /* sütunlar birbirini germiyor */
}

/* Kategori sayfasında manşetin sağı: iki yatay kart, biraz daha geniş sütun. */
.kv-m2top:has(.kv-m2side) {
  grid-template-columns: 1.32fr 1fr;
  align-items: stretch;
}

/* Yanında kart yoksa manşet tek başına, tam genişlikte. */
.kv-m2top--tek {
  grid-template-columns: 1fr;
}

.kv-m2main {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-7);
  min-width: 0;
}

.kv-m2main .kv-m2row {
  margin-top: 0;
}

.kv-m2lead,
.kv-m2lead__link {
  display: block;
}

/*
 * ad-o5: blog bileşenleri kare. tokens.css "Radii: the brand is square.
 * Nothing rounds except circular chips" diyor; yuvarlatma yalnızca blog
 * listesi ve kategori sayfalarında, üstelik üç farklı değerde vardı
 * (18 / 16 / 12px). Kullanıcı hizmet kartından blog kartına geçerken bileşen
 * dili değişiyordu.
 */
.kv-m2lead__link {
  position: relative;
  overflow: hidden;
  border-radius: var(--kv-radius-none);
  background: var(--kv-surface-dark);
}

.kv-m2lead__media {
  position: absolute;
  inset: 0;
  display: block;
}

.kv-m2lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-m2lead__link:hover .kv-m2lead__media img {
  transform: scale(1.03);
}

.kv-m2lead__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.05) 78%);
}

.kv-m2lead__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-5);
  min-height: 420px;
  max-width: 720px;
  padding: var(--kv-space-9);
  justify-content: flex-end;
  color: var(--kv-text-on-dark);
}

.kv-m2lead__title {
  max-width: 20ch;
  font: var(--kv-weight-bold) 40px / 1.15 var(--kv-font-serif);
}

.kv-m2lead__excerpt {
  max-width: 46ch;
  font: var(--kv-weight-regular) 15px / 1.6 var(--kv-font-body);
  color: rgba(255, 255, 255, .88);
}

/* ------------------------------------------------------ yatay kart ------ */

/* Manşetin sağındaki sütun: iki kart, manşetle aynı yüksekliği paylaşıyor. */
.kv-m2side {
  display: flex;
  flex-direction: column;
  gap: var(--kv-space-7);
  min-width: 0;
}

/* Kart sayısı ikiden azsa da sütun dolsun; boşluk metne yazılıyor. */
.kv-m2side .kv-m2wide {
  flex: 1;
  min-height: 0;
}

/*
 * ad-o5: kare kenar, gölge yerine saç teli çerçeve. tokens.css gölge için
 * "The source uses none, depth comes from flat colour blocks" diyor; kartın
 * zeminden ayrılması gerekiyorsa tema zaten hizmet satırlarında 1px çerçeve
 * kullanıyor, aynı yöntem buraya da geldi.
 */
.kv-m2wide__link {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--kv-space-7);
  height: 100%;
  padding: var(--kv-space-5);
  border: 1px solid var(--kv-border-hairline);
  border-radius: var(--kv-radius-none);
  background: var(--kv-white);
  transition: border-color var(--kv-duration) var(--kv-ease);
}

.kv-m2wide__link:hover {
  border-color: var(--kv-ink-600);
}

/*
 * Görsel sabit oranda ve dikeyde ortalı: kart uzadığında fotoğraf gerilmiyor,
 * fazlalık metin tarafına yazılıyor.
 */
.kv-m2wide__media {
  position: relative;
  display: block;
  /*
   * Görsel 16:9'a inince (ad-o11) 240px'lik sütunda 135px yükseklikte kalıyor;
   * ortalanınca kartın içinde havada duruyordu. Üste hizalanınca başlığın
   * yanındaki küçük resim gibi okunuyor.
   */
  align-self: start;
  width: 100%;
  /*
   * ad-o11: aynı satırdaki iki görsel aynı oranda olsun. Genişkaro 1.63,
   * yanındaki kart 1.33 oranındaydı; günlükte blog görsellerinin 16:9 olması
   * karara bağlanmıştı, manşetle de aynı oran böylece tutuyor.
   */
  aspect-ratio: 16 / 9;
  border-radius: var(--kv-radius-none);
  overflow: hidden;
  background: var(--kv-surface-placeholder);
}

.kv-m2wide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kv-m2wide__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-4);
  justify-content: center;
  min-width: 0;
  padding-right: var(--kv-space-5);
}

.kv-m2wide__title {
  font: var(--kv-weight-bold) 21px / 1.25 var(--kv-font-serif);
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-m2wide__link:hover .kv-m2wide__title {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-m2wide__excerpt {
  font: var(--kv-weight-regular) 14px / 1.55 var(--kv-font-body);
  color: var(--kv-text-muted);
}

/* ------------------------------------------------------ dikey kart ------ */

.kv-m2row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--kv-space-7);
  margin-top: var(--kv-space-7);
}

/* Bu kural .kv-m2row'dan SONRA gelmeli — aynı özgüllükte sonraki kazanır. */
.kv-m2row--uc {
  grid-template-columns: repeat(3, 1fr);
}

/*
 * ad-o11: kategori şeridi kart sayısına uysun. Her kategoride iki yazı var;
 * dört sabit sütunda iki kart 285px kalıp kabın sağındaki 626px boş duruyor ve
 * dört şerit üst üste "ragged" bir kolon üretiyordu.
 *
 * auto-fit boş parçaları katlıyor: iki kartta iki geniş kart, dörtte dört kart
 * çıkıyor. minmax kendi kırılımını da taşıdığı için aşağıdaki 1100/700
 * kurallarına ek bir istisna gerekmiyor.
 *
 * "Tüm yazılar" bloğu bunun dışında: orada kart sayısı ondan fazla, sabit dört
 * sütun düzeni doğru.
 */
.kv-m2strip .kv-m2row {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kv-m2card {
  min-width: 0;
}

/* ad-o5: kare kenar, gölge yerine saç teli çerçeve. */
.kv-m2card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--kv-border-hairline);
  border-radius: var(--kv-radius-none);
  background: var(--kv-white);
  transition: border-color var(--kv-duration) var(--kv-ease);
}

.kv-m2card__link:hover {
  border-color: var(--kv-ink-600);
}

.kv-m2card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--kv-surface-placeholder);
}

.kv-m2card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kv-duration-slow) var(--kv-ease);
}

.kv-m2card__link:hover .kv-m2card__media img {
  transform: scale(1.04);
}

/* Etiket fotoğrafın sol altına biniyor — referanstaki gibi. */
.kv-m2card__chip {
  position: absolute;
  left: var(--kv-space-5);
  bottom: var(--kv-space-5);
}

.kv-m2card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kv-space-3);
  padding: var(--kv-space-6);
}

.kv-m2card__title {
  font: var(--kv-weight-bold) 19px / 1.28 var(--kv-font-serif);
  color: var(--kv-text-strong);
  transition: color var(--kv-duration) var(--kv-ease);
}

.kv-m2card__link:hover .kv-m2card__title {
  color: var(--kv-aksan-metin);
  text-decoration-line: underline;
  text-decoration-color: var(--kv-aksan-cizgi);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}

.kv-m2card__excerpt {
  font: var(--kv-weight-regular) 13.5px / 1.55 var(--kv-font-body);
  color: var(--kv-text-muted);
}

.kv-m2card__meta {
  margin-top: auto;
  padding-top: var(--kv-space-4);
  color: var(--kv-text-muted);
}

/* ------------------------------------- çok okunanlar / kategori şeritleri - */

/*
 * Sağ sütun: çok okunanlar. Kılavuz align-items:start olduğu için sütunlar
 * birbirini germiyor; burada tek istisna bu — liste sol sütunun boyuna
 * yayılıyor ki alt hizaları çakışsın.
 */
.kv-m2pop {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
}

.kv-m2pop__baslik {
  margin: 0 0 var(--kv-space-5);
  font: var(--kv-weight-bold) var(--kv-size-h4) / 1.2 var(--kv-font-display);
  color: var(--kv-text-strong);
}

/* ad-o5: kare kenar, gölge yerine saç teli çerçeve. */
.kv-m2pop .kv-ranks {
  flex: 1;
  border: 1px solid var(--kv-border-hairline);
  border-radius: var(--kv-radius-none);
  background: var(--kv-white);
  overflow: hidden;
}

.kv-m2pop .kv-rank {
  gap: var(--kv-space-6);
  padding: var(--kv-space-6) var(--kv-space-7);
}

.kv-m2pop .kv-rank__title {
  font-size: 17px;
}

/* --------------------------------------------------------- duyarlı ------ */

@media (max-width: 1100px) {
  .kv-m2top,
  .kv-m2top:has(.kv-m2side) {
    grid-template-columns: 1fr;
    gap: var(--kv-space-10);
  }

  .kv-m2side {
    flex-direction: row;
  }

  .kv-m2side .kv-m2wide {
    flex: 1 1 0;
  }

  .kv-m2row,
  .kv-m2row--uc {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .kv-m2 {
    padding: var(--kv-space-8) 0 var(--kv-space-11);
  }

  .kv-m2lead__copy {
    min-height: 380px;
    max-width: none;
    padding: var(--kv-space-6);
  }

  .kv-m2lead__title {
    font-size: 27px;
  }

  /*
   * Sütun tek başına kalınca yüksekliği belirsiz; `flex: 1` orada sıfıra
   * çöküyor ve kart kutusu içeriğini dışarı taşıyordu. Dar ekranda kartlar
   * kendi doğal yüksekliklerinde duruyor.
   */
  .kv-m2side {
    flex-direction: column;
  }

  .kv-m2side .kv-m2wide {
    flex: 0 0 auto;
  }

  .kv-m2wide__link {
    height: auto;
    grid-template-columns: 120px 1fr;
    gap: var(--kv-space-5);
  }

  .kv-m2row,
  .kv-m2row--uc {
    grid-template-columns: 1fr;
  }

  .kv-m2wide__title {
    font-size: 18px;
  }

  .kv-m2wide__excerpt {
    display: none;
  }

  .kv-m2pop .kv-rank {
    padding: var(--kv-space-5) var(--kv-space-6);
  }
}

/* ------------------------------------------------------- proje kapağı --- */
/*
 * Proje detayında kapak görseli. Başlık bandı artık ortak bir fotoğraf
 * (panelden seçiliyor); projenin kendi karesi buraya, içeriğin başına geldi.
 * Oran serbest: portfolyo kareleri yatay, dikey ve kare olabiliyor, zorla
 * kırpmak işin kendisini bozardı.
 */
.kv-projcover {
  margin: 0;
  background: var(--kv-surface-placeholder);
}

.kv-projcover__img {
  display: block;
  width: 100%;
  height: auto;
}


/* ------------------------------------------------------------- 404 ek --- */
.kv-404ara {
  margin-top: var(--kv-space-9);
  max-width: 560px;
  display: grid;
  gap: var(--kv-space-4);
}

.kv-404ara__satir {
  display: flex;
  gap: var(--kv-space-4);
}

.kv-404ara__satir .kv-field {
  flex: 1;
  min-width: 0;
}

.kv-404ara__dugme {
  border: 0;
  background: var(--kv-accent);
  color: var(--kv-text-strong, #1c1c1c);
  font: var(--kv-weight-semibold) var(--kv-size-meta) / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-label);
  padding: 0 var(--kv-space-7);
  cursor: pointer;
}

.kv-404linkler {
  margin-top: var(--kv-space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kv-space-4) var(--kv-space-7);
}

.kv-404linkler a {
  font-weight: var(--kv-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Form altı aydınlatma metni bağlantısı */
.kv-form__kvkk {
  margin: var(--kv-space-4) 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: .8;
}

.kv-form__kvkk a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------ çerez bandı --- */
.kv-cerez {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: 560px;
  margin-left: auto;
  background: var(--kv-surface-dark, #242424);
  color: #f4f3ee;
  padding: var(--kv-space-5) var(--kv-space-6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: var(--kv-space-4);
  font-size: 13.5px;
  line-height: 1.5;
}

.kv-cerez[hidden] {
  display: none;
}

.kv-cerez__metin {
  margin: 0;
}

.kv-cerez__metin a {
  color: var(--kv-accent);
  text-decoration: underline;
}

.kv-cerez__dugmeler {
  display: flex;
  gap: var(--kv-space-4);
  justify-content: flex-end;
}

.kv-cerez__btn {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: inherit;
  font: var(--kv-weight-semibold) 13px / 1 var(--kv-font-body);
  padding: 10px 16px;
  cursor: pointer;
}

.kv-cerez__btn--kabul {
  background: var(--kv-accent);
  border-color: var(--kv-accent);
  color: #1c1c1c;
}


/* ------------------------------------------- CTA ekleri (25 Eylül) --- */
.kv-hero__ctawrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kv-space-4);
}

.kv-hero__btn--ikincil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  text-transform: uppercase;
  transition: background-color var(--kv-duration) var(--kv-ease), color var(--kv-duration) var(--kv-ease);
}

.kv-hero__btn--ikincil:hover {
  background: #fff;
  color: var(--kv-ink-900, #1c1c1c);
}

.kv-phero__cta {
  margin-top: var(--kv-space-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kv-space-4) var(--kv-space-7);
}

.kv-phero__ara {
  color: #fff;
  font: var(--kv-text-nav);
  letter-spacing: var(--kv-tracking-label);
  display: inline-flex;
  align-items: center;
  gap: var(--kv-space-3, 8px);
}

#teklif {
  scroll-margin-top: 24px;
}

/* Mobil sabit çağrı çubuğu */
.kv-mcubuk {
  display: none;
}

@media (max-width: 980px) {
  .kv-mcubuk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 65;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--kv-surface-dark, #242424);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
  }

  .kv-mcubuk__oge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    color: #f4f3ee;
    font: var(--kv-weight-semibold) 12.5px / 1 var(--kv-font-body);
    letter-spacing: var(--kv-tracking-label);
  }

  .kv-mcubuk__oge + .kv-mcubuk__oge {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .kv-mcubuk__oge--teklif {
    background: var(--kv-accent);
    color: var(--kv-text-on-accent, #1c1c1c);
  }

  body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }

  .kv-scrolltop {
    bottom: calc(54px + var(--kv-space-6) + env(safe-area-inset-bottom, 0px));
  }

  .kv-cerez {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  html.kv-menu-acik .kv-mcubuk {
    display: none;
  }
}

/* Proje sonu teklif bandı */
.kv-projcta {
  background: var(--kv-accent);
  color: var(--kv-text-on-accent, #1c1c1c);
  padding: var(--kv-space-9) 0;
}

.kv-projcta__ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kv-space-7);
}

.kv-projcta .kv-label {
  color: inherit;
  opacity: .75;
}

.kv-projcta__baslik {
  margin: var(--kv-space-3, 8px) 0 0;
  max-width: 640px;
  text-wrap: balance;
}

.kv-projcta__not {
  margin: var(--kv-space-4) 0 0;
}

.kv-projcta__not a {
  font-weight: var(--kv-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kv-projcta__btn {
  background: var(--kv-ink-900, #1c1c1c);
  color: #fff;
}

.kv-projcta__btn:hover {
  background: #000;
}

/* <picture> sarmalayıcısı kutu üretmesin: img eski yerleşimini korur. */
picture {
  display: contents;
}

.kv-yorumbag {
  margin: var(--kv-space-7) 0 0;
  font-weight: var(--kv-weight-semibold);
}

.kv-yorumbag a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Dar ekranda slider düğmeleri yan yana, sabit genişlik yerine içerik kadar. */
@media (max-width: 700px) {
  .kv-hero__ctawrap {
    flex-wrap: nowrap;
  }

  .kv-hero__btn,
  .kv-hero__btn--ikincil {
    width: auto;
    height: 48px;
    padding: 0 18px;
  }
}

/* İletişim haritası: onay gelene kadar yer tutucu (26 Eylül) */
.kv-map--kapi {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kv-surface-2, #ecebe6);
  filter: none;
}

.kv-map__dugme {
  border: 1px solid currentColor;
  background: transparent;
  color: var(--kv-text-strong, #1c1c1c);
  font: var(--kv-weight-semibold) 14px / 1 var(--kv-font-body);
  letter-spacing: var(--kv-tracking-label);
  padding: 14px 22px;
  cursor: pointer;
}

.kv-map__dugme span {
  font-weight: var(--kv-weight-regular);
  opacity: .7;
}

/*
 * 29 Eylül — mobil sadeleştirme (müşteri, telefondan bakınca):
 * - Sayfa hero'sunda üst etiket ("HİZMETLERİMİZ") logonun altına giriyordu:
 *   hero 260px'e iniyor, içerik alttan hizalı ve taşınca yukarı, sabit
 *   başlığın altına uzuyordu. Hero'ya başlık yüksekliği kadar üst boşluk verildi.
 * - Başlıklar bir kademe küçüldü; Teklif Al düğmesi ve telefon numarası inceldi.
 * - Alttaki sabit Ara/WhatsApp/Teklif Al çubuğu 54px'ten 44px'e indi.
 */
@media (max-width: 980px) {
  .kv-phero {
    padding-top: var(--kv-header-height);
    min-height: 0;
  }

  .kv-phero__copy {
    padding-top: var(--kv-space-7);
  }

  .kv-phero .kv-navcta,
  .kv-hero__btn,
  .kv-hero__btn--ikincil {
    height: 40px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .kv-phero__ara {
    font-size: 13px;
  }

  .kv-mcubuk__oge {
    min-height: 44px;
    font-size: 11.5px;
    gap: 6px;
  }

  body {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .kv-scrolltop {
    bottom: calc(44px + var(--kv-space-6) + env(safe-area-inset-bottom, 0px));
  }

  .kv-cerez {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 620px) {
  :root {
    --kv-size-hero: 32px;
    --kv-leading-hero: 38px;
    --kv-size-h1: 27px;
    --kv-size-h2: 24px;
    --kv-leading-h2: 31px;
    --kv-size-h3: 20px;
    --kv-leading-h3: 27px;
    --kv-size-h4: 18px;
    --kv-leading-h4: 25px;
  }

  .kv-h1 {
    line-height: 34px;
  }
}

/*
 * 29 Eylül — anasayfa hero'su mobilde ekranı dolduruyor (müşteri): altındaki
 * hizmet kartının sarısı, sabit alt çubuğun hemen üstünde ~1 cm (38px) görünür
 * kalıyor. svh tarayıcı çubukları açıkken ölçülüyor, böylece kart iOS'ta da
 * adres çubuğunun arkasına kaçmıyor. Çok kısa/uzun ekranlar için 520–760px.
 */
@media (max-width: 980px) {
  .kv-hero {
    height: clamp(520px, calc(100svh - 44px - env(safe-area-inset-bottom, 0px) - 38px), 760px);
  }
}

/*
 * 29 Eylül — mobil düzeltmeler:
 * - Sabit alt çubuk için bırakılan boşluk body'de olunca altbilginin altında
 *   44px beyaz şerit kalıyordu; boşluk altbilgi çubuğunun kendisine taşındı.
 * - İletişimdeki "YOL TARİFİ AL" dar ekranda iki satıra kırılıyordu.
 */
@media (max-width: 980px) {
  body {
    padding-bottom: 0;
  }

  .kv-footer__bar {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }

  .kv-contactbtn {
    white-space: nowrap;
    width: auto;
    padding-left: var(--kv-space-7);
    padding-right: var(--kv-space-7);
  }
}

/*
 * 29 Eylül — hero'daki yol bağlantıları (kırıntılar) mobilde görseli çok
 * kapatıyordu: her biri geniş harf aralıklı ayrı satıra düşüyordu. Küçük punto,
 * dar harf aralığı ve "›" ayırıcıyla tek satır (en fazla iki) oluyor.
 */
@media (max-width: 980px) {
  .kv-phero__crumbs {
    font-size: 10.5px;
    line-height: 16px;
    letter-spacing: 0.08em;
    gap: 2px 6px;
    margin-bottom: var(--kv-space-4);
    opacity: 0.9;
  }

  .kv-phero__crumbs a + a::before {
    content: "›";
    margin-right: 6px;
    opacity: 0.7;
  }
}

/* ==========================================================================
   29 Eylül — anasayfa mobil hareketleri ve sade portfolyo şeridi
   Masaüstü değişmiyor: tek genel kural yeni .kv-reel__kisa öğesini gizleyen
   aşağıdaki satır; kalan her şey 980px altında ve JS'in koyduğu niteliklerde.
   ========================================================================== */
.kv-reel__kisa {
  display: none;
}

@media (max-width: 980px) {
  /* Portfolyo: kapalı satırda yalnızca müşteri adı, açık panelde özet yok. */
  .kv-reel__panel {
    height: 56px;
  }

  .kv-reel__panel.is-active {
    height: var(--kv-reel-acik, 380px);
  }

  .kv-reel__htitle {
    display: none;
  }

  .kv-reel__kisa {
    display: block;
    flex: 1;
    min-width: 0;
    font: var(--kv-weight-semibold) 14px/1.2 var(--kv-font-body);
    letter-spacing: 0.01em;
    color: var(--kv-text-on-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kv-reel__excerpt {
    display: none;
  }

  .kv-reel__title {
    font-size: 20px;
    line-height: 26px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Kaydırınca açılma: şerit sarmalayıcının boyu kadar ekrana yapışık kalır. */
  .kv-reel__pin[data-pin-on] .kv-reel {
    position: sticky;
    top: 12px;
  }

  /* Hizmet kartları: sırayla soldan / sağdan. */
  [data-mgir="sol"],
  [data-mgir="sag"] {
    opacity: 0;
    transition: opacity 0.7s var(--kv-ease-out), transform 0.7s var(--kv-ease-out);
  }

  [data-mgir="sol"] {
    transform: translateX(-48px);
  }

  [data-mgir="sag"] {
    transform: translateX(48px);
  }

  [data-mgir="sol"][data-mgir-on],
  [data-mgir="sag"][data-mgir-on] {
    opacity: 1;
    transform: none;
  }
}

/*
 * Giriş hareketleri — mobil ve PC ortak (29 Eylül). Nitelikleri yalnızca
 * anasayfada girisHareketiKur() koyuyor; soldan/sağdan kayma yukarıdaki mobil
 * blokta, PC'deki "yuksel" burada.
 */
[data-mgir="yuksel"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--kv-ease-out) var(--kv-mgir-gecikme, 0ms),
    transform 0.7s var(--kv-ease-out) var(--kv-mgir-gecikme, 0ms);
}

[data-mgir="yuksel"][data-mgir-on] {
  opacity: 1;
  transform: none;
}

[data-mgir][data-mgir-on] .kv-scard__medallion {
  animation: kv-madalyon 0.6s cubic-bezier(0.2, 1.5, 0.35, 1) calc(var(--kv-mgir-gecikme, 0ms) + 0.35s) both;
}

/* Başlıklardaki sarı çizgi soldan sağa çizilir. */
[data-mgir="cizgi"] .kv-accent {
  text-decoration-color: transparent;
  background-image: linear-gradient(var(--kv-aksan-cizgi), var(--kv-aksan-cizgi));
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 0% max(2px, 0.07em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.9s var(--kv-ease-out) 0.2s;
}

[data-mgir="cizgi"][data-mgir-on] .kv-accent {
  background-size: 100% max(2px, 0.07em);
}

/* Drone videosu yakınlaşarak açılır. */
[data-mgir="yakin"] .kv-nvideo__img {
  transform: scale(1.14);
  opacity: 0.35;
  transition: transform 1.2s var(--kv-ease-out), opacity 0.9s var(--kv-ease-out);
}

[data-mgir="yakin"][data-mgir-on]:not(.is-playing) .kv-nvideo__img {
  transform: none;
  opacity: 1;
}

/* Instagram kareleri sırayla belirir. */
[data-mgir="bel"] {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.6s var(--kv-ease-out) var(--kv-mgir-gecikme, 0ms),
    transform 0.6s var(--kv-ease-out) var(--kv-mgir-gecikme, 0ms);
}

[data-mgir="bel"][data-mgir-on] {
  opacity: 1;
  transform: none;
}


@keyframes kv-madalyon {
  from {
    transform: translateX(-50%) scale(0.4);
  }
  to {
    transform: translateX(-50%) scale(1);
  }
}

/* 29 Eylül — altbilginin en alt menüsü mobilde çok iriydi (15px, geniş aralık). */
@media (max-width: 980px) {
  .kv-footer__barinner {
    gap: var(--kv-space-4);
    padding-top: var(--kv-space-7);
  }

  .kv-footer__copy {
    font-size: 11.5px;
  }

  .kv-footer__nav {
    justify-content: center;
    gap: 0 16px;
  }

  .kv-footer__nav a {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.08em;
    padding: 6px 0;
  }
}

/*
 * 29 Eylül — mobilde Gizlilik ve Çerez Tercihleri ayrı, en alt satırda ortalı.
 * Gizlilik menünün ilk bağlantısı, çerez bağlantısı data-cerez-ac taşıyor;
 * ::after tam genişlikte görünmez bir satır sonu olarak araya giriyor.
 */
@media (max-width: 980px) {
  .kv-footer__nav::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }

  .kv-footer__nav a:first-child,
  .kv-footer__nav a[data-cerez-ac] {
    order: 2;
  }
}

/* 29 Eylül — alt menü iki satır: beş sayfa üstte, Gizlilik/Çerez altta; hepsi aynı punto. */
@media (max-width: 980px) {
  .kv-footer__nav {
    gap: 0 12px;
  }

  .kv-footer__nav a {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}