/* Kurs notu: indirim kuponu görünümü. Kurs listelerinin üstünde ve kurs sayfasında "Kurs detayları" bölümünün başında aynı bileşen.
   Yalnız not açıkken (Site Ayarları > Genel Ayarlar > Kurs notu) notla birlikte yüklenir. Kaynak: classes/NotBandi.php */
.kn { --kn-kocan: 92px; --kn-cent: 11px; position: relative; margin: 0 0 26px; text-align: left;
  /* Gölge ve ince dış çizgi kuponun çentikli biçimini izler */
  filter: drop-shadow(0 12px 22px rgba(28, 37, 57, .10)) drop-shadow(0 0 1px rgba(194, 86, 15, .6)); }
.kn__kupon { position: relative; display: grid; grid-template-columns: var(--kn-kocan) minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border-radius: 18px; background: linear-gradient(120deg, #FFFDFA 0%, #FFF4EA 100%); color: #1C2539;
  /* Koçan ile gövde arasında üstte ve altta yarım daire çentik */
  -webkit-mask: radial-gradient(circle var(--kn-cent) at var(--kn-kocan) 0, transparent 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle var(--kn-cent) at var(--kn-kocan) 100%, transparent 96%, #000 100%) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--kn-cent) at var(--kn-kocan) 0, transparent 96%, #000 100%) top / 100% 51% no-repeat, radial-gradient(circle var(--kn-cent) at var(--kn-kocan) 100%, transparent 96%, #000 100%) bottom / 100% 51% no-repeat; }
/* Seyrek parıltı: kuponun üzerinden ince bir ışık geçer */
.kn__kupon::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-130%) skewX(-12deg); animation: knParilti 7s ease-in-out infinite; pointer-events: none; }
@keyframes knParilti { 0%, 72% { transform: translateX(-130%) skewX(-12deg); } 100% { transform: translateX(400%) skewX(-12deg); } }

/* Koçan: turuncu dar bölüm, içinde hafifçe sallanan % etiketi; sağ kenarı kesikli (delik çizgisi) */
.kn__kocan { position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(165deg, #FD762D 0%, #EE5F14 100%); border-right: 2px dashed #FFF4EA; }
.kn__ikon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #C9500C; box-shadow: 0 6px 14px rgba(120, 44, 0, .28); transform-origin: 50% 20%; animation: knSallan 4.2s ease-in-out infinite; }
@keyframes knSallan { 0%, 58%, 100% { transform: rotate(0); } 64% { transform: rotate(-11deg); } 72% { transform: rotate(9deg); } 80% { transform: rotate(-6deg); } 88% { transform: rotate(3deg); } }

/* Gövde: küçük etiket + not yazısı */
.kn__govde { min-width: 0; padding: 18px 22px 18px 24px; align-self: center; }
.kn__etiket { display: inline-block; margin: 0 0 7px; padding: 3px 11px; border-radius: 20px; background: #1C2539; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.kn__metin { margin: 0; color: #1C2539; font-size: 15px; font-weight: 600; line-height: 1.6; letter-spacing: .005em; }
.kn__no { color: #B8480A; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
.kn__no:hover, .kn__no:focus-visible { color: #1C2539; }

/* Eylemler: telefon ve WhatsApp */
.kn__eylem { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 20px 16px 0; }
.kn__dugme { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 18px 7px 14px; border-radius: 14px; text-decoration: none; white-space: nowrap; line-height: 1.25; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.kn__dugme svg { flex: none; }
.kn__dugme-yazi { display: block; min-width: 0; }
.kn__dugme small { display: block; font-size: 11.5px; font-weight: 500; }
.kn__dugme b { display: block; font-size: 15px; font-weight: 700; }
.kn__dugme--tel { background: #1C2539; color: #fff; }
.kn__dugme--tel small { color: #D5DAE5; }
.kn__dugme--tel b { font-size: 16px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
a.kn__dugme--tel:hover, a.kn__dugme--tel:focus-visible { background: #2D3B5C; color: #fff; transform: translateY(-1px); }
.kn__dugme--wp { background: #fff; border: 1.5px solid #25D366; color: #1C2539; }
.kn__dugme--wp svg { color: #1A9F52; }
.kn__dugme--wp:hover, .kn__dugme--wp:focus-visible { background: #EFFBF4; color: #1C2539; transform: translateY(-1px); }

/* Dar ekran: koçan solda dar kalır; yazı ve düğmeler alt alta, düğmeler tam genişlikte */
@media (max-width: 767.98px) {
  .kn { --kn-kocan: 60px; --kn-cent: 9px; margin-bottom: 22px; }
  .kn__kupon { grid-template-columns: var(--kn-kocan) minmax(0, 1fr); border-radius: 16px; }
  .kn__kocan { grid-row: 1 / span 2; align-items: flex-start; padding-top: 18px; }
  .kn__ikon { width: 40px; height: 40px; }
  .kn__ikon svg { width: 21px; height: 21px; }
  .kn__govde { padding: 16px 16px 12px 16px; }
  .kn__metin { font-size: 14px; }
  .kn__eylem { grid-column: 2; padding: 0 16px 16px 16px; }
  .kn__dugme { justify-content: center; }
}
/* Kurs sayfası: "Kurs detayları" başlığının hemen altında, metin kartından önce */
.kd-blok > .kn { margin: 0 0 18px; }
@media (prefers-reduced-motion: reduce) {
  .kn__kupon::after { animation: none; display: none; }
  .kn__ikon { animation: none; }
  .kn__dugme { transition: none; }
}