/* ============================================================
   KNT4 — Kanıt bandı + üst çubuk hizası
   Görseller kullanıcının gönderdiği 21 parçadan; public/img/kanit/
   Ölçüler referanstan: kart 290px · aralık 14px · üst 65px · alt 186px
   duz1.css'ten sonra yüklenir.
   ============================================================ */

/* ---------- ÜST ÇUBUK HİZASI ----------
   Ölçüldü: 1600px'de düğmeler 1200px'lik kaptan 131px dışarı
   taşıyordu (logo solda hizalı, düğmeler sağa kaçmış); 390px'de
   "Başvuru Yap" 16px ekran dışına çıkıyordu.
   Sebep: "Ücretsiz Deneyin" düğmesi 1500px üstünde geri geliyor
   ama yedi menü maddesiyle birlikte kaba sığmıyor.
   Çözüm: o düğme üst çubukta hiç gösterilmiyor — aynı çağrı
   hero'da ve her sayfanın kapanışında zaten var. Dar ekranda da
   "Başvuru Yap" biraz daralıyor.                                */
/* A1 — "Ücretsiz Deneyin" üst çubuğa geri geldi. KNT4'te 1600px
   taşması yüzünden çıkarılmıştı; asıl sorun menünün yedi
   maddesiydi. Menü aralığı ve punto ölçüyle daraltıldı.        */
/* DUZ1'deki kurallar aynı seçiciyi kullanıyor ve sonra geldiği
   için ezilmesin diye burada daha özgül seçici var. */
@media (max-width: 1359px) { header nav.yy-hd-nav ~ * .yy-hd-demo, header a.yy-hd-demo { display: none !important; } }
@media (min-width: 1360px) {
  header a.yy-hd-demo { display: inline-flex !important; padding-left: 13px !important; padding-right: 13px !important; font-size: 13px !important; }
}
/* Üst çubuk kabı geniş ekranda biraz genişler: yedi menü maddesi,
   dil seçici ve üç düğme 1200px'e sığmıyordu. Sayfa gövdesi 1200px
   kalır; yalnızca header genişler.                              */
@media (min-width: 1400px) { header .max-w-kap { max-width: 1340px !important; } }
@media (max-width: 1279px) { header nav.yy-hd-nav { display: none !important; } }
/* 420px altı: ölçüldü, logo 144 + sağ grup 242 = 386 > 358 kullanılabilir
   genişlik. Dil düğmesindeki dünya ikonu gizlenir, marka yazısı ve
   düğme iç boşlukları daralır. Hiçbir bağlantı kaybolmaz.        */
@media (max-width: 420px) {
  header a[href$="/basvuru"] { padding-left: 11px !important; padding-right: 11px !important; font-size: 12px !important; }
  header .max-w-kap > a img.h-\[26px\] { height: 21px !important; }
  header .max-w-kap > a img.h-\[30px\] { height: 26px !important; width: 26px !important; margin-right: .4rem !important; }
  header [aria-controls="dilMenu"] svg:first-of-type,
  header #dilMenu ~ * svg:first-of-type { display: none; }
  header .max-w-kap > div > button[aria-expanded] { padding-left: 9px !important; padding-right: 9px !important; gap: .3rem !important; }
  header [data-yy-hd="menu"] { margin-right: 0 !important; }
}

/* Hero'nun altındaki eski ipucu satırı bu banda taşındı */
.ks-hero-ipucu { display: none !important; }

.kn { background: #fff; }
.kn-ic { max-width: 1200px; margin: 0 auto; padding: 38px 24px 26px; }

/* kart zeminleri — illüstrasyonların zeminiyle eşleşir */
.kn .t-a { --tz: #EFF5FD; --tk: #E2EDF9; }
.kn .t-b { --tz: #EDF7F5; --tk: #DDEFEA; }
.kn .t-c { --tz: #F3F1FD; --tk: #E7E2FA; }
.kn .t-d { --tz: #FDF6EE; --tk: #F8EBDB; }

/* ---------- giriş hareketi ---------- */
.kn-gir { opacity: 0; transform: translateY(18px); }
.kn-gir.acik {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.2,.7,.2,1) var(--gec, 0ms),
              transform .55s cubic-bezier(.2,.7,.2,1) var(--gec, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .kn-gir { opacity: 1; transform: none; }
  .kn-gir.acik { transition: none; }
}

/* ---------- üst sıra ---------- */
.kn-ust { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px)  { .kn-ust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .kn-ust { grid-template-columns: repeat(4, 1fr); } }

.kn-ozellik {
  display: flex; align-items: center; gap: 11px;
  background: var(--tz); border: 1px solid var(--tk);
  border-radius: 16px; padding: 9px 14px 9px 9px; min-height: 65px;
}
.kn-ozellik b { display: block; font-size: 14px; font-weight: 700; color: var(--ks-koyu); letter-spacing: -.02em; line-height: 1.25; }
.kn-ozellik small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ks-duman); }
.kn-ozellik img.kn-ikon { width: 48px; height: 48px; flex: 0 0 48px; display: block; }

/* ---------- alt sıra ---------- */
.kn-alt { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 640px)  { .kn-alt { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .kn-alt { grid-template-columns: repeat(4, 1fr); } }

.kn-rakam {
  position: relative; overflow: hidden;
  background: var(--tz); border: 1px solid var(--tk); border-radius: 18px;
  min-height: 186px; display: flex;
}
.kn-rakam.acik { transition: opacity .55s cubic-bezier(.2,.7,.2,1) var(--gec,0ms),
                             transform .55s cubic-bezier(.2,.7,.2,1) var(--gec,0ms),
                             box-shadow .3s ease; }
.kn-rakam:hover { box-shadow: 0 22px 42px -24px rgba(15,45,91,.3); }
.kn-rakam:hover img.kn-fon { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .kn-rakam:hover img.kn-fon { transform: none; } }

/* İLLÜSTRASYON — referanstan ölçüldü: illüstrasyonun sol kenarı
   kartın %25'inde başlıyor, yani genişliği kartın %75'i. Sağ alta
   yaslı ve KIRPILMAZ (contain): "cover" denendi, aile kartında
   üçüncü figürü kesiyordu.                                     */
img.kn-fon {
  position: absolute; right: 0; bottom: 0; width: 75%; height: auto;
  max-height: 82%; object-fit: contain; object-position: right bottom;
  pointer-events: none; user-select: none;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  transform-origin: right bottom;
}
[dir="rtl"] img.kn-fon { right: auto; left: 0; transform: scaleX(-1); transform-origin: left bottom; }
/* Kart bazlı ince ayar
   t-a (site ve apartman): binalar kutu içinde yukarı uzatıldı,
     üst kenardan taşmıyor.
   t-d (7/24 erişim): laptop/telefon biraz büyütüldü ve yukarı
     alındı; alt satır yazısına değmiyor, kutudan taşmıyor. */
.kn .t-a img.kn-fon { width: 97%; max-height: 99%; }
.kn .t-d img.kn-fon { width: 66%; max-height: 64%; bottom: auto; top: 22px; }
@media (max-width: 639px) {
  .kn .t-a img.kn-fon { width: 88%; }
  .kn .t-d img.kn-fon { width: 58%; }
}
[dir="rtl"] .kn-rakam:hover img.kn-fon { transform: scaleX(-1) scale(1.045); }

.kn-govde { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 15px 17px 13px; }
.kn-govde b.num {
  font-size: clamp(1.65rem, 1.15rem + 1.35vw, 2rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: var(--ks-koyu); font-variant-numeric: tabular-nums;
}
.kn-govde img.kn-ikon { width: 52px; height: 52px; margin-bottom: 9px; display: block; }
.kn-etiket { display: block; margin-top: 7px; font-size: 14px; color: var(--ks-kurum); }
.kn-altmetin { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ks-duman); }

.kn-satir {
  margin-top: auto; padding-top: 13px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ks-kurum);
  text-shadow: 0 1px 0 var(--tz), 0 0 8px var(--tz), 0 0 4px var(--tz);
}
.kn-satir img { width: 30px; height: 33px; flex: 0 0 30px; }
[dir="rtl"] .kn-satir img { transform: scaleX(-1); }

/* ---------- alt şerit ---------- */
.kn-serit {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ks-tel);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
}
@media (min-width: 1200px) { .kn-serit { flex-wrap: nowrap; } }
.kn-serit-ana { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ks-kurum); margin: 0; }
@media (min-width: 1200px) { .kn-serit-ana { white-space: nowrap; } }
.kn-serit-ana img { width: 34px; height: 26px; flex: 0 0 34px; }

img.kn-ayrac { width: 1px; height: 30px; opacity: .55; flex: 0 0 1px; }
.kn-serit-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.kn-serit-rozetler span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ks-kurum); white-space: nowrap;
}
.kn-serit-rozetler img:not(.kn-ayrac) { width: 24px; height: 23px; flex: 0 0 24px; }

.kn-slogan-gorsel { margin-left: auto; width: 158px; height: auto; display: block; flex: 0 0 auto; }
[dir="rtl"] .kn-slogan-gorsel { margin-left: 0; margin-right: auto; }
.kn-slogan { margin: 0 0 0 auto; font-style: italic; font-size: 14px; line-height: 1.5; color: var(--ks-lac); text-align: right; }
[dir="rtl"] .kn-slogan { margin: 0 auto 0 0; text-align: left; }

@media (max-width: 1199px) {
  .kn-serit { flex-direction: column; align-items: flex-start; gap: 15px; }
  .kn-serit > img.kn-ayrac { display: none; }
  .kn-slogan-gorsel { margin-left: 0; }
  .kn-slogan { margin: 0; text-align: left; }
  [dir="rtl"] .kn-slogan-gorsel { margin-right: 0; }
  [dir="rtl"] .kn-slogan { text-align: right; }
}
@media (max-width: 639px) {
  .kn-ic { padding: 30px 20px 24px; }
  .kn-rakam { min-height: 176px; }
  .kn-serit-rozetler { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kn-serit-rozetler img.kn-ayrac { display: none; }
}