/* =========================================================
   KISA KEMER — Tailwind'in kapsamadığı özel stiller
   Tailwind ana yükü index.html'deki CDN'den geliyor.
   Buraya yalnızca utility ile yazılamayan şeyler girer.
   ========================================================= */

/* --- Yazı tipi netliği + yumuşak kaydırma ---
   Menü ve footer bağlantılarına tıklanınca sayfa sert
   zıplamak yerine kayarak gider. Tarayıcının kendi
   kaydırması kullanılır; alttaki "hareketi azalt"
   kuralı bunu gerektiğinde kapatır. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   TAM GENİŞLİK BÖLÜMLER
   Bölümlerin zemin rengi ekranın iki ucuna kadar uzanır,
   içerik ise 1440px'lik kolonda ortalanmış kalır.

   Hesap: ekran 1440'tan genişse, fazlalığın yarısı kadar
   iç boşluk eklenir; darsa normal 16/60px boşluk kullanılır.
   (720px = 1440'ın yarısı)
   ========================================================= */

.kk-wide > section {
  padding-left:  max(1rem, calc(50% - 720px + 1rem));
  padding-right: max(1rem, calc(50% - 720px + 1rem));
}

@media (min-width: 1024px) {
  .kk-wide > section {
    padding-left:  max(60px, calc(50% - 720px + 60px));
    padding-right: max(60px, calc(50% - 720px + 60px));
  }
}

/* --- Çıpa hedefleri sabit menünün altında kalmasın --- */
[id^="kk-"] {
  scroll-margin-top: 78px;
}
@media (min-width: 1024px) {
  [id^="kk-"] { scroll-margin-top: 96px; }
}

/* --- JavaScript ile gizlenen bloklar ---
   Tailwind'in `hidden` sınıfı, `lg:grid` gibi kırılım kurallarıyla
   çakışıyor (medya sorgusu sonra geldiği için kazanıyor).
   Bu sınıf her durumda gizler. --- */
.kk-gizli { display: none !important; }

/* --- Menü açıkken arka plan kaymasın --- */
body.kk-locked {
  overflow: hidden;
}

/* --- Yatay kaydırma şeritlerinde scrollbar gizle (galeri thumbnail'leri) --- */
.kk-scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.kk-scroll-x::-webkit-scrollbar {
  display: none;
}

/* Yatay şeritlerin ortak davranışı: bilgisayarda fareyle
   sürüklenebilir olduğu imleçten anlaşılsın.
   Yalnızca gerçekten taşan şeritlerde anlamlı; taşmayan
   ızgaraya dönüşen şeritlerde (geniş ekranda kk-thumbs)
   sürükleme zaten iş yapmaz. */
.kk-scroll-x { cursor: grab; }
.kk-scroll-x.kk-surukleniyor { cursor: grabbing; }

/* =========================================================
   GALERİ
   ========================================================= */

/* Küçük resim — seçili olan */
.kk-thumb {
  border-radius: 8px;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .kk-thumb { border-radius: 10px; }
}
.kk-thumb-on {
  outline: 2px solid var(--kk-accent, #17A34A);
  outline-offset: -2px;
}

/* Nokta göstergeleri */
.kk-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #D8D8D8;
  cursor: pointer;
  transition: width .2s, background-color .2s;
}
.kk-dot-on {
  width: 22px;
  background: var(--kk-accent, #17A34A);
}

/* =========================================================
   ÜST MENÜ
   Sayfa en üstteyken düz durur; kaydırılınca alt kenarına
   hafif bir gölge biner, böylece içerikten ayrışır.
   ========================================================= */

.kk-header {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.kk-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(10, 10, 10, .05), 0 6px 18px rgba(10, 10, 10, .06);
}

/* =========================================================
   SEPET DÜĞMESİ — doluysa yeşil, boşsa gri
   ========================================================= */

.kk-cartbtn {
  border-color: var(--kk-accent, #17A34A);
}
.kk-cartbtn:hover {
  background: var(--kk-accent-soft, #F1FBF4);
}
.kk-cartbtn.is-empty {
  border-color: #ECECEC;
  color: #6A6A6A;
}
.kk-cartbtn.is-empty:hover {
  background: transparent;
  border-color: var(--kk-ink, #0A0A0A);
  color: var(--kk-ink, #0A0A0A);
}

/* Adet rozeti */
.kk-badge {
  background: var(--kk-accent, #17A34A);
}
/* Sepet boşken rozet soluk duruyor ama içindeki beyaz "0"
   okunmuyordu (kontrast 1,74). Aynı soluk his, okunur ton. */
.kk-badge.is-empty {
  background: #6F6F6F;
}

/* =========================================================
   UYUM TESTİ — soru şıkları
   ========================================================= */

.kk-fitopt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 15px;
  border: 1.5px solid #ECECEC;
  border-radius: 11px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s;
}
.kk-fitopt:hover {
  border-color: #D8D8D8;
}
.kk-fitopt b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.kk-fitopt small {
  font-size: 12px;
  color: #6F6F6F;
}
.kk-fitopt.is-on::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 11px;
  border: 2px solid var(--kk-accent, #17A34A);
  pointer-events: none;
}

/* =========================================================
   VİDEO BÖLÜMLERİ
   ========================================================= */

.kk-chapter {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FAFAFA;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.kk-chapter:hover {
  background: #F4F4F4;
}
.kk-chapter.is-on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  outline: 2px solid var(--kk-accent, #17A34A);
  pointer-events: none;
}
.kk-chapter-time {
  flex: none;
  padding-top: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #6F6F6F;
}
.kk-chapter b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.kk-chapter small {
  display: block;
  padding-top: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: #6A6A6A;
}

/* =========================================================
   INSTAGRAM — kayan galeri (marquee)
   Track iki özdeş kopyadan oluşur; %50 kaydırınca ikinci
   kopya tam olarak birincinin yerine gelir, ek yeri belli olmaz.
   ========================================================= */

/* ŞERİT — fareyle sürüklenir, parmakla kaydırılır.
   Eskiden CSS animasyonuyla kayıyordu, kullanıcı müdahale
   edemiyordu. Artık gerçek kaydırma kabı: otomatik akış
   JavaScript ile yürüyor, dokunulunca duruyor. */
.kk-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.kk-marquee::-webkit-scrollbar { display: none; }
.kk-marquee.kk-surukleniyor { cursor: grabbing; }

.kk-marquee-track {
  display: flex;
  width: max-content;
}

.kk-marquee-set {
  display: flex;
  gap: 10px;
  padding-right: 10px;
}

/* =========================================================
   ÜRÜN KARELERİ ŞERİDİ
   ---------------------------------------------------------
   YÜKSEKLİK sabit, GENİŞLİK oranla geliyor. Dikey ve yatay
   fotoğraflar yan yana aynı boyda durur, HİÇBİRİ kırpılmaz.
   Kare (1/1) ve dikey (4/5) kutu denendi; ikisinde de farklı
   orandaki fotoğraflar kırpılıyordu.
   ========================================================= */
.kk-insta-img {
  height: 200px;
  width: auto;
  min-width: 90px;      /* yüklenene kadar yer tutar */
  flex: none;
  border-radius: 10px;
  background: #F4F4F4;
  object-fit: cover;
  cursor: zoom-in;
}

@media (min-width: 1024px) {
  .kk-marquee-set { gap: 12px; padding-right: 12px; }
  .kk-insta-img   { height: 280px; width: auto; border-radius: 12px; }
}

@keyframes kk-kaydir {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hareketi azaltma tercihi açıksa kaydırma durur, şerit
   elle kaydırılabilir kalır. */
@media (prefers-reduced-motion: reduce) {
  .kk-marquee       { overflow-x: auto; }
  .kk-marquee-track { animation: none; }
}

/* =========================================================
   YASAL METİN SEKMELERİ
   ========================================================= */

.kk-legaltab {
  position: relative;
  flex: none;
  padding: 11px 18px;
  border: 1.5px solid #ECECEC;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #3A3A3A;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.kk-legaltab:hover {
  border-color: var(--kk-ink, #0A0A0A);
}
/* Seçili sekme DOLU gösteriliyor.
   Eskiden hem kenarlığı renkleniyor hem de dışına 2 piksel
   ayrı bir halka çiziliyordu (::after) — iç içe iki çember
   çıkıyor, seçili sekme bozuk gibi duruyordu. Turuncuya
   geçince daha da göze battı.
   Turuncu YAZI kullanılmadı: beyaz zeminde turuncu metnin
   kontrastı 3,17, okuma eşiği 4,5. Dolu siyah hem net
   seçili duruyor hem de kontrastı 19,5. */
.kk-legaltab.is-on {
  border-color: var(--kk-ink, #0A0A0A);
  background: var(--kk-ink, #0A0A0A);
  color: #FFFFFF;
}
.kk-legaltab.is-on:hover {
  border-color: var(--kk-ink, #0A0A0A);
}

/* =========================================================
   CANLI DESTEK — yüzen düğme
   Masaüstünde "● Canlı destek", mobilde "● Destek".
   Her iki ekranda da yazılı; ikon yok, kalabalık yapmıyor.
   ========================================================= */

.kk-chat-btn {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--kk-ink, #0A0A0A);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  transition: background-color .15s;
}
.kk-chat-btn:hover {
  background: var(--kk-accent, #17A34A);
}

/* Nokta MARKA RENGİNDEN bağımsız: "çevrimiçi" demek.
   Marka yeşilken tesadüfen doğru görünüyordu; turuncuya
   geçince "destek kapalı / uyarı" gibi okunmaya başladı.
   Yeşil burada bir durum rengi, süs değil — marka rengi
   değişse bile yeşil kalmalı. */
.kk-chat-nokta {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #22C55E;
}
.kk-chat-btn:hover .kk-chat-nokta {
  background: #fff;
}

/* Dar ekranda kısa yazı, geniş ekranda tam yazı */
.kk-chat-yazi { display: none; }
.kk-chat-kisa { display: inline; }

@media (min-width: 640px) {
  .kk-chat-btn  { gap: 11px; padding: 13px 20px; }
  .kk-chat-yazi { display: inline; }
  .kk-chat-kisa { display: none; }
}

@media (min-width: 1024px) {
  .kk-chat-btn { right: 28px; bottom: 112px; }
}

/* =========================================================
   CANLI DESTEK — hazır soru çipleri
   ========================================================= */

.kk-chip {
  padding: 9px 14px;
  border: 1.5px solid #ECECEC;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #3A3A3A;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.kk-chip:hover {
  border-color: var(--kk-accent, #17A34A);
  color: var(--kk-ink, #0A0A0A);
}

/* =========================================================
   KOYU ZEMİNDEKİ FORM ALANLARI (bayilik)
   ========================================================= */

.kk-input-dark {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 13px 16px;
  font: inherit;
  font-size: 14px;
  color: #fff;
  transition: border-color .15s;
}
.kk-input-dark::placeholder {
  color: rgba(255, 255, 255, .4);
}
.kk-input-dark:hover {
  border-color: rgba(255, 255, 255, .3);
}
.kk-input-dark:focus {
  outline: none;
  border-color: var(--kk-accent, #17A34A);
}
.kk-input-dark option {
  background: var(--kk-ink-2, #151515);
  color: #fff;
}

/* Paket kartları tıklanabilir */
.kk-darkpack,
.kk-lightpack {
  cursor: pointer;
}

/* =========================================================
   FORM ALANLARI (ödeme adımları)
   ========================================================= */

.kk-input {
  width: 100%;
  border: 1.5px solid #ECECEC;
  border-radius: 10px;
  padding: 13px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--kk-ink, #0A0A0A);
  background: #fff;
  transition: border-color .15s;
}
.kk-input::placeholder {
  color: #A9A9A9;
}
.kk-input:hover {
  border-color: #D8D8D8;
}
.kk-input:focus {
  outline: none;
  border-color: var(--kk-accent, #17A34A);
}

/* =========================================================
   LIGHTBOX
   ========================================================= */

/* Büyütülmüş görsel — ölçülü kalsın, ekranı doldurmasın.
   width/height auto olduğu için görsel kendi doğal
   boyutundan BÜYÜK gösterilmez, yalnızca gerekirse küçülür. */
.kk-lb-img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 66vh;
  object-fit: contain;
  border-radius: 12px;
  transition: opacity .2s ease, transform .25s ease;
  -webkit-user-drag: none;
  user-select: none;
}

/* Sürükleme alanı */
#kk-lb-stage {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
#kk-lb-stage.kk-lb-dragging {
  cursor: grabbing;
}
/* Sürüklerken görsel imleci gecikmesiz takip etsin */
#kk-lb-stage.kk-lb-dragging .kk-lb-img {
  transition: none;
}
@media (min-width: 1024px) {
  .kk-lb-img {
    max-width: 560px;
    max-height: 74vh;
  }
}

/* Şerit: sığdığında ortalanır, sığmadığında baştan başlar
   ve tamamı kaydırılarak gezilebilir (hiçbir küçük resim
   erişilemez hâle gelmez). */
.kk-lb-strip::before,
.kk-lb-strip::after {
  content: "";
  margin: auto;
}

.kk-lb-thumb {
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s;
}
.kk-lb-thumb:hover {
  opacity: .8;
}
.kk-lb-thumb-on {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* =========================================================
   RENK SEÇİMİ
   ========================================================= */

.kk-swatch {
  cursor: pointer;
}
.kk-swatch-on::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--kk-accent, #17A34A);
  border-radius: 10px;
  pointer-events: none;
}

/* --- Klavye ile gezinenler için görünür odak halkası --- */
:focus-visible {
  outline: 2px solid var(--kk-accent, #17A34A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Bağlantıyla gidilen bölümlere odak programla taşınıyor.
   Bu tıklamayla olduğunda çerçeve göstermeye gerek yok. */
[tabindex="-1"]:focus {
  outline: none;
}

/* --- Klavye ile gezinenler için atlama bağlantısı --- */
.kk-skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  background: var(--kk-ink, #0A0A0A);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.kk-skip:focus {
  left: 0;
  top: 0;
}

/* --- Hareket azaltma tercihi --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------
   BOT TUZAĞI
   Formda görünmeyen bir alan. İnsan göremediği için boş
   kalır; otomatik doldurma yapan botlar doldurur ve
   sunucu o isteği reddeder.
   ------------------------------------------------------- */

.kk-tuzak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Eksik doldurulan form alanı */
.kk-input-hata {
  border-color: var(--kk-warn, #E4572E) !important;
}

/* Ödeme adımındaki hata mesajı kutusu.
   Renkler burada duruyor çünkü derlenmiş Tailwind dosyasında
   bu iki renk yok — sade CSS ile yazmak daha güvenli. */
.kk-hata {
  background: #FDEEE9;
  color: #C2431F;
}

/* -------------------------------------------------------
   HERO: RENK VE ADET SEÇİMİ
   Aşağıdaki beş kural aslında Tailwind sınıflarının
   karşılığı; derlenmiş css/tailwind.css içinde olmadıkları
   için burada sade CSS olarak yazıldılar.
   ------------------------------------------------------- */

.h-3 { height: .75rem; }
.w-3 { width: .75rem; }
.tracking-normal { letter-spacing: 0; }

button:disabled.disabled\:opacity-30 { opacity: .3; }

@media (min-width: 1024px) {
  .lg\:text-\[25px\] { font-size: 25px; }
}

/* Renk kutucuğu — seçili olan yeşil halkayla belirir */
.kk-renk {
  transition: transform .15s ease, box-shadow .15s ease;
}

.kk-renk:hover {
  transform: translateY(-1px);
}

.kk-renk-secili {
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .18),
              0 0 0 2px #fff,
              0 0 0 4px var(--kk-accent, #17A34A);
}

/* =========================================================
   İSTATİSTİK ŞERİDİ — sütun sayısı panele bağlı
   ---------------------------------------------------------
   Kutu sayısı panelden değiştirilebildiği için sütun sayısı
   sabit yazılamıyor. --kk-sutun değişkenini JavaScript
   yerleştiriyor; dar ekranda her zaman 2 sütun kalır.
   ========================================================= */
.kk-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .kk-serit { grid-template-columns: repeat(var(--kk-sutun, 4), minmax(0, 1fr)); }
}

/* =========================================================
   PAYTR ÖDEME ÇERÇEVESİ
   ---------------------------------------------------------
   Kart formu PayTR'den geliyor; yüksekliği kart/taksit
   seçimine göre değişiyor. Sabit yükseklik verip içeride
   kaydırma bırakıyoruz — dar ekranda da tam görünür.
   ========================================================= */
.kk-paytr-cerceve {
  width: 100%;
  min-height: 420px;
  height: 62vh;
  max-height: 640px;
  border: 0;
  border-radius: 12px;
  background: #fff;
}

/* =========================================================
   TÜKENMİŞ RENK
   ---------------------------------------------------------
   Renk kutucuğu soluklaşır ve üzerine çapraz çizgi çekilir.
   Yalnızca renkle anlatmıyoruz — renk körü ziyaretçi de
   ayırt edebilsin diye çizgi ve tıklanamazlık da var.
   ========================================================= */
.kk-renk-bitti {
  opacity: .35;
  cursor: not-allowed;
}
.kk-renk-bitti::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    #FFF calc(50% - 1px),
    #FFF calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  mix-blend-mode: difference;
}


/* =========================================================
   OKUNABİLİRLİK — açık zeminde soluk yazılar
   ---------------------------------------------------------
   Ölçümde 48 yazının kontrastı okuma eşiğinin (4,5) altında
   çıktı. Hepsi aynı üç renkten geliyordu:
     #9A9A9A (text-faint)   → 2,81
     #7A7A7A (text-muted-3) → 4,29
     #FF570C (text-accent)  → 3,17  küçük yazıda
   Tailwind YENİDEN ÜRETİLMİYOR (bir kez denendi, 17 kural
   kayboldu) — bu yüzden düzeltme burada, üzerine yazarak.

   Griler tek bir değere indi: beyaz zeminde 4,9 · gri zeminde
   4,6 veriyor. Tasarımın soluk-yazı hissi korunuyor, sadece
   birkaç ton koyu.
   ========================================================= */
.text-faint,
.text-muted-3,
.placeholder\:text-faint::placeholder {
  color: #6F6F6F;
}

/* Turuncu YAZI ayrı bir tondan geliyor (--kk-accent-text).
   Marka rengi #FF570C zemin/çerçeve olarak aynen kalıyor;
   yalnızca küçük yazıda okunmadığı için koyusu kullanılıyor. */
.text-accent {
  color: var(--kk-accent-text, #AD3B08);
}

/* KARANLIK zeminde tam tersi: orada koyu turuncu kaybolur,
   parlak marka rengi doğrudur. */
.bg-ink .text-accent,
.bg-ink-2 .text-accent,
.bg-accent .text-accent,
[class*="bg-ink"] .text-accent {
  color: var(--kk-accent, #FF570C);
}

/* ...ama ÜCRETSİZ KARGO orada da yeşil kalmalı.
   Yukarıdaki kural iki sınıflı olduğu için tek sınıflı yeşil
   kuralımı eziyordu; aynı güçte yazıp sırayı sonraya aldım.
   (27 Ağustos 2026 — ölçtüm, üst bantta hâlâ turuncu çıkıyordu.) */
.bg-ink .kk-kargo-yesil-koyu,
.bg-ink-2 .kk-kargo-yesil-koyu,
[class*="bg-ink"] .kk-kargo-yesil-koyu {
  color: #22C55E;
}

/* Karşılaştırma listesindeki ✕ işaretleri.
   Simge olduğu için eşik 3; 1,74 idi, artık 3,03. */
.text-\[\#C4C4C4\] {
  color: #767676;
}

/* =========================================================
   TURUNCU ZEMİN ÜSTÜNDEKİ YAZI
   ---------------------------------------------------------
   Yeşilde beyaz yazı okunuyordu; #FF570C'de kontrast 3,17'ye
   düştü (eşik 4,5). Marka rengini değiştirmemek için yazıyı
   koyulaştırıyoruz → kontrast 6,24.
   Bileşik seçici Tailwind'in tek sınıflı .text-white kuralından
   güçlü olduğu için !important gerekmiyor.

   ⚠ :not([class*="bg-"]) NEDEN VAR
   Kural önce turuncunun ÜSTÜNDEKİ öğeleri de yakalıyordu.
   Kapanış bandındaki siyah "Sepete Ekle" düğmesinin yazısı da
   siyaha çevriliyor, düğme okunamaz hâle geliyordu — siyah
   üstünde siyah. Kendi zemini olan öğeler artık dışarıda:
   onların yazısı kendi zeminine göre kalmalı.
   İlk satır hariç tutulmuyor, çünkü orada turuncu zeminin
   kendisi söz konusu (aynı öğede hem bg-accent hem text-white).
   ========================================================= */
.bg-accent.text-white,
.bg-accent .text-white:not([class*="bg-"]),
.bg-accent .text-white\/85:not([class*="bg-"]),
.bg-accent .text-white\/90:not([class*="bg-"]) {
  color: #0A0A0A;
}

/* =========================================================
   ÜST MENÜ LOGOSU
   ---------------------------------------------------------
   Yükseklikten kurulur, genişlik oranla gelir; logo dosyası
   farklı oranda olsa da menü bozulmaz.
   Logo koyu renkli + saydam zeminli: yalnızca AÇIK zeminde.
   Alt bilgi karanlık olduğu için orada açık sürümü kullanılıyor.
   ========================================================= */
.kk-logo {
  height: 30px;
  width: auto;
  flex: none;
  display: block;
}
@media (min-width: 1024px) {
  .kk-logo { height: 40px; }
}

/* =========================================================
   KARŞILAŞTIRMA — iki kutunun fotoğrafları
   ---------------------------------------------------------
   Hafif dikey (4/5). Önceden 16/9 idi ve kare çekilmiş
   Hızlı Kemer fotoğrafının %44'ü kesiliyordu.
   ⚠ İki fotoğraf da AYNI oranda olmalı.
   ========================================================= */
.kk-karsilastirma-gorsel {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* =========================================================
   NASIL KULLANILIR — adım kartlarının çizimleri
   ---------------------------------------------------------
   Kutunun oranı = adım çizimlerinin oranı (539 × 496).
   Fotoğraf kutuyu tam doldurur: ne gri bant kalır, ne de
   üstündeki yazılar kesilir.
   ⚠ Bütün adım fotoğrafları AYNI oranda olmalı.
   Not: Tailwind'in bu oran sınıfı üretilmiş dosyada yok;
   Tailwind'i yeniden üretmek kural kaybına yol açtığı için
   kural burada tanımlanıyor.
   ========================================================= */
.kk-adim-gorsel {
  width: 100%;
  aspect-ratio: 539 / 496;
  flex: none;
  border-radius: 8px;
  background: #F4F4F4;
  object-fit: cover;
}

/* Açıklama için iki satırlık yer ayrılır: açıklaması kısa ya da
   hiç yazılmamış kart da diğerleriyle aynı boyda dursun.
   box-sizing: border-box olduğu için üstteki boşluk min-height'in
   içinde kalıyor; calc ile ekleniyor. */
.kk-adim-aciklama {
  min-height: calc(3.1em + 6px);
}
/* =========================================================
   DOKUNMA HEDEFİ — parmakla ıskalanmasın
   ---------------------------------------------------------
   Ölçümde 18 düğme/bağlantı 44 pikselin altında çıktı.

   ⚠ İLK DENEMEM YANLIŞTI. Yazı bağlantılarının üstüne
   görünmez 44 piksellik bir alan koymuştum; alt alta duran
   alt bilgi bağlantılarında bu alanlar ÜST ÜSTE BİNDİ.
   Sonuç daha kötü olurdu: bir bağlantıya basarken alttakinin
   alanına denk gelirsiniz. Ölçüm bunu yakaladı.

   Doğrusu iki farklı çözüm:
   · Simge düğmeleri (menü, sepet, büyütme, adet) → 44×44.
     Tek başlarına duruyorlar, büyümeleri düzeni bozmuyor.
   · Alt alta duran yazı bağlantıları → dikey boşluk eklendi.
     Üst üste binmeden 24 piksele çıkıyorlar; erişilebilirlik
     ölçütünün (WCAG 2.2 AA) istediği en az bu. 44 piksel
     yapmak alt bilgiyi iki katına çıkarırdı.

   Yalnızca dokunmatik ekranlarda. Farede gereksiz.
   ========================================================= */

@media (pointer: coarse) {

  /* --- Tek başına duran simge düğmeleri --- */
  #kk-menu-open,
  [data-kk-open-cart],
  [data-kk-eksi],
  [data-kk-arti],
  [data-kk-lb-close],
  [data-kk-lb-prev],
  [data-kk-lb-next] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Büyütme düğmesi de 44. Ölçüm bunu "sıradaki görsel"
     düğmesiyle çakışıyor diye işaretliyor ama YANLIŞ ALARM:
     o düğme galerinin TAMAMINI kaplayan bir dokunma katmanı
     (inset-0), büyütme düğmesi de onun üstünde duruyor.
     Tasarım böyle; üst üste binmesi gerekiyor. */
  [data-kk-open-lightbox] {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- Alt alta duran yazı bağlantıları ---
     Çakışma olmasın diye alanları büyütmüyoruz, aralarını
     açıyoruz. Yazının kendisi aynı boyutta kalıyor. */
  footer a[data-kk-m],
  nav a[data-kk-m] {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Satır içi bağlantılar (telefon, "Detaylı bilgi",
     ürün altındaki iade bağlantısı) tek başlarına duruyor,
     komşusu yok — güvenle büyütülebilir. */
  [data-kk-open-info],
  [data-kk-href],
  a[data-kk-m="kk-urun.44"],
  a[data-kk-m="kk-urun.32"] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }

  /* Atlama bağlantısı ekran dışında; büyütülmesi anlamsız. */
  a.kk-skip { padding: 0; min-height: 0; }
}

/* =========================================================
   TURUNCU DÜĞMELER — beyaz yazı
   ---------------------------------------------------------
   Marka rengi #FF570C üstünde beyaz yazının kontrastı 3,17;
   okuma eşiği 4,5. Bir süre siyah yazı kullanıldı (6,24) ama
   ölçüm şunu gösterdi: fareyle ÜZERİNE GELİNCE zemin
   koyulaşıyor, siyah yazı 4,02'ye düşüyordu — düğme tam
   tıklanacakken en okunmaz hâline geliyordu.

   Beyaz yazıda mantık kendiliğinden tutarlı: düğme
   koyulaştıkça yazı DAHA okunur oluyor.
     normal          4,93
     üzerine gelince 6,49

   Renk elle yazılmıyor: paneldeki marka renginden türetiliyor
   (color-mix). Marka rengini değiştirirseniz düğmeler de
   kendiliğinden uyum sağlar. Eski tarayıcılar için üstteki
   düz değer yedek olarak duruyor.

   ⚠ Yalnızca DÜĞMELER. Turuncu zeminli bölümler (kapanış
   bandı), ilerleme çubukları ve rozetler parlak marka
   renginde kalıyor.
   ========================================================= */

button.bg-accent,
a.bg-accent,
button.bg-accent.text-white,
a.bg-accent.text-white {
  background: #C74409;
  background: color-mix(in srgb, var(--kk-accent, #FF570C) 78%, #000000);
  color: #FFFFFF;
}

button.bg-accent:hover,
a.bg-accent:hover,
button.bg-accent.text-white:hover,
a.bg-accent.text-white:hover {
  background: #A63908;
  background: color-mix(in srgb, var(--kk-accent, #FF570C) 65%, #000000);
  color: #FFFFFF;
}

/* Bazı düğmeler üzerine gelince TERS çeviriyor (beyaz zemin,
   koyu yazı). Üstteki kural onları da beyaz yazıya zorlardı —
   beyaz üstünde beyaz. Bu ikisi ayrıca yazılıyor. */
button.bg-accent.hover\:bg-white:hover,
a.bg-accent.hover\:bg-white:hover {
  background: #FFFFFF;
  color: var(--kk-ink, #0A0A0A);
}
button.bg-accent.hover\:bg-ink:hover,
a.bg-accent.hover\:bg-ink:hover {
  background: var(--kk-ink, #0A0A0A);
  color: #FFFFFF;
}

/* =========================================================
   FOTOĞRAF YÜKLENİRKEN — yumuşak geçiş
   ---------------------------------------------------------
   Sayfanın kaynağındaki yedek fotoğraflar artık gerçek
   galeriyle aynı; eski karelerin bir an görünmesi sorunu
   kökten çözüldü.

   Yine de fotoğraf inene kadar boş bir kutu duruyor. Buraya
   hafif bir parıltı konuyor: kutunun dolacağı belli oluyor,
   sayfa "bozuk" hissi vermiyor.

   `background-image` kullanılıyor, ayrı bir öğe DEĞİL:
   fotoğraf yüklenince üstünü kapatıyor, temizlemek için
   JavaScript gerekmiyor.
   ========================================================= */

.kk-yukleniyor {
  background-color: #F1F1F1;
  background-image: linear-gradient(
    100deg,
    #F1F1F1 30%,
    #E4E4E4 45%,
    #F1F1F1 60%
  );
  background-size: 260% 100%;
  animation: kk-parilti 1.4s ease-in-out infinite;
}

@keyframes kk-parilti {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* Hareketi azaltmayı seçmiş kullanıcıda parıltı durur,
   düz gri kalır — hareket rahatsız edebiliyor. */
@media (prefers-reduced-motion: reduce) {
  .kk-yukleniyor { animation: none; }
}

/* Fotoğraf yüklendiğinde yumuşakça belirir. Galeri
   slaytlarının kendi geçiş kuralı var, onlara karışmıyor. */
img.kk-belir {
  opacity: 0;
  transition: opacity .35s ease;
}
img.kk-belir.kk-geldi { opacity: 1; }

/* =========================================================
   ALT SABİT BARDA TRENDYOL DÜĞMESİ
   ---------------------------------------------------------
   Panelden Trendyol açıldığında alt barda iki düğme olur.
   Dar ekranda soldaki ürün bilgisi (fotoğraf + ad) sığmaz:
   gizlenir ve iki düğme genişliği eşit paylaşır. Geniş
   ekranda bilgi görünmeye devam eder, düğmeler yan yana.

   Sınıfı JavaScript koyuyor (js/kk.js → trendyolUygula).
   ========================================================= */
@media (max-width: 639px) {
  #kk-stickybar.kk-tr-acik .kk-bar-bilgi { display: none; }

  #kk-stickybar.kk-tr-acik .kk-bar-dugmeler {
    flex: 1 1 auto;
    min-width: 0;
  }
  #kk-stickybar.kk-tr-acik .kk-bar-dugmeler > * {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
    white-space: nowrap;
  }
  /* Uzun bir düğme yazısı barı taşırmasın */
  #kk-stickybar.kk-tr-acik #kk-trendyol-bar span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* NOT: alt bar telefonda sürekli açık ama sayfaya ek boşluk GEREKMİYOR —
   alt bilgi zaten pb-32 (128px) boşluk bırakıyor, bar 70px. Buraya
   body{padding-bottom} eklenirse koyu alt bilginin altında beyaz bir
   şerit oluşuyor. (23 Ağustos 2026'da eklenip geri alındı.) */

/* =========================================================
   YÜZEN DÜĞMELER — Trendyol · Sepete Ekle · Destek
   ---------------------------------------------------------
   23 Ağustos 2026. Sahibi telefonda satın alma düğmelerinin
   Destek düğmesinin yanında, yüzen hâlde durmasını istedi.
   Üçü tek bir sütunda: kap alttan sabitlenmiş, düğmeler
   yukarı doğru diziliyor. Aynı kapta oldukları için biri
   büyüse bile üst üste binmezler.

   Satın alma düğmeleri YALNIZ telefonda. Geniş ekranda
   alttaki sabit şerit aynı işi yapıyor, ikisi birden
   olursa ekran kalabalıklaşıyor.
   ========================================================= */
.kk-yuzen {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

@media (min-width: 1024px) {
  .kk-yuzen { right: 28px; bottom: 112px; }
}

/* Telefonda Destek SOL alta geçiyor: sağ alt köşe satın alma
   düğmelerinin. Geniş ekranda eski yerinde (sağda) kalıyor —
   orada yüzen satın alma düğmesi zaten yok. */
@media (max-width: 1023px) {
  .kk-chat-btn { left: 16px; right: auto; }
}

.kk-yuzen-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
  transition: background-color .15s, border-color .15s;
}

.kk-yuzen-sepet {
  border: 0;
  background: var(--kk-accent, #FF570C);
  color: #fff;
}
.kk-yuzen-sepet:hover { background: var(--kk-accent-hover, #C74409); }
.kk-yuzen-ayrac { opacity: .6; }

/* Trendyol ikinci seçenek: beyaz zemin, MARKA RENGİNDE yazı.
   Sahibi "en azından metin turuncu olsun" dedi — düğme ana
   eylemle yarışmasın ama fark edilsin. */
.kk-yuzen-tr {
  border: 1.5px solid var(--kk-accent-line, #FFDDCE);
  background: #fff;
  color: var(--kk-accent, #FF570C);
}
.kk-yuzen-tr:hover {
  border-color: var(--kk-accent, #FF570C);
  background: var(--kk-accent-soft, #FFF3EE);
}

/* Geniş ekranda yalnız Destek kalır */
@media (min-width: 1024px) {
  .kk-yuzen-btn { display: none; }
}

/* Telefonda alttaki sabit şerit KAPALI — yerini yüzen düğmeler aldı */
@media (max-width: 1023px) {
  #kk-stickybar { display: none; }
}

/* Telefonda düğmeler ekranın ALTINA yapışır (26 Ağustos 2026).
   ---------------------------------------------------------
   Eskiden 96px yukarıdaydılar. O boşluk, Trendyol düğmesi de
   görünürken iki düğmenin sığması için verilmişti; Trendyol
   kapatılınca altta kocaman bir boşluk kalıyor, düğmeler
   ekranın ortasında asılı duruyordu.

   env(safe-area-inset-bottom): iPhone'ların alt çentik payı.
   Desteklemeyen tarayıcıda 0 sayılır, ölçü 16px olur. */
@media (max-width: 1023px) {
  .kk-chat-btn,
  .kk-yuzen { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Sayfa başına dön oku sağdaki düğmelerin hemen üstünde durur.
   Sağdaki sütun Trendyol açıkken bir düğme daha uzun oluyor;
   :has() ile ok kendiliğinden yukarı kayıyor. Eskiden bu ölçü
   sabitti ve Trendyol kapalıyken ok havada kalıyordu. */
@media (max-width: 1023px) {
  #kk-yukari { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

  body:has(#kk-trendyol-yuzen:not(.kk-gizli)) #kk-yukari {
    bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }
}

/* Ürün bölümündeki ve alt şeritteki Trendyol düğmesinin yazısı da
   turuncu. Tailwind'in text-[#3A3A3A] sınıfını kimlik seçicisiyle
   eziyoruz; kk.css tailwind.css'ten SONRA yükleniyor. */
#kk-trendyol,
#kk-trendyol-bar {
  color: var(--kk-accent, #FF570C);
}
#kk-trendyol:hover,
#kk-trendyol-bar:hover {
  color: var(--kk-accent-hover, #C74409);
  border-color: var(--kk-accent, #FF570C);
}

/* =========================================================
   GALERİDEKİ VİDEO (YEREL DENEME)
   ---------------------------------------------------------
   Video 16:9, galeri kutusu 4:3. `contain` ile kırpılmadan
   sığdırılıyor; üstte ve altta kalan boşluk sitenin açık gri
   zemin rengiyle dolduruluyor — siyah bant kadar göze batmaz.
   ========================================================= */
.kk-galeri-video {
  object-fit: contain;
  background: #F4F4F4;
}

/* =========================================================
   "ŞU ANDA N KİŞİ İNCELİYOR" ROZETİ
   ---------------------------------------------------------
   5 Eylül 2026. Sayı UYDURMA DEĞİL: sitenin kendi çerezsiz
   sayacından geliyor, son 5 dakikada haber vermiş gerçek
   ziyaretçiler (js/kk.js -> canliSayiUygula).

   Eşiğin altında rozet hiç görünmüyor. Sahibi böyle istedi:
   "ziyaretçi yokken görünmesin". Sayı düşük diye sahte rakam
   YAZILMAZ — daha önce sahte yorum/puan/stok bu yüzden
   temizlenmişti.

   Yeşil nokta canlılık işareti; ücretsiz kargo yeşiliyle aynı
   aileden ama bu bir DURUM rengi, marka rengine bağlı değil.
   ========================================================= */
.kk-canli {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1px solid #E1F0E7;
  background: #F3FBF6;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #0F7A38;
}

.kk-canli-nokta {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: #17A34A;
  animation: kk-canli-nabiz 2.2s ease-in-out infinite;
}

@keyframes kk-canli-nabiz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Hareketi rahatsız edici bulanlar için kapat */
@media (prefers-reduced-motion: reduce) {
  .kk-canli-nokta { animation: none; }
}

/* =========================================================
   ÇEREZ İZNİ ŞERİDİ
   ---------------------------------------------------------
   4 Eylül 2026. Facebook Pixel takip çerezi bırakıyor, KVKK
   önceden izin istiyor.

   Şerit YALNIZ panelde Pixel kimliği doluyken görünür
   (js/kk.js -> cerezKurulumu). Reklam verilmeyen dönemde
   ortada takip çerezi yok, o yüzden izin istemenin de anlamı
   yok - ziyaretçinin önüne gereksiz engel çıkmasın.

   "Kabul et" siyah (asıl eylem), "Sadece zorunlu" çerçeveli.
   Marka turuncusu KULLANILMADI: turuncu satın alma
   düğmelerinin rengi, izin sorusu onunla yarışmasın.
   ========================================================= */
.kk-cerez {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 17px;
  border: 1.5px solid var(--kk-line, #E6E6E6);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

@media (min-width: 1024px) {
  .kk-cerez { left: auto; right: 28px; bottom: 28px; width: 400px; }
}

.kk-cerez-yazi {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--kk-muted, #5A5A5A);
}
.kk-cerez-bag {
  font-weight: 700;
  color: var(--kk-ink, #0A0A0A);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kk-cerez-dugmeler { display: flex; gap: 9px; }
.kk-cerez-btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.kk-cerez-kabul {
  border: 0;
  background: var(--kk-ink, #0A0A0A);
  color: #fff;
}
.kk-cerez-kabul:hover { background: #2A2A2A; }
.kk-cerez-ret {
  border: 1.5px solid var(--kk-line, #E6E6E6);
  background: #fff;
  color: var(--kk-ink, #0A0A0A);
}
.kk-cerez-ret:hover { background: var(--kk-surface-2, #F4F4F4); }

/* Şerit açıkken yüzen düğmeleri yukarı it - üst üste binmesinler.
   Şeridin GERÇEK yüksekliğini JS ölçüp --kk-cerez-h'ye yazıyor;
   metin sarınca da doğru kalsın diye sabit sayı kullanmadım.

   !important şart: "yukarı çık" okunun Trendyol kuralı
   body:has(#kk-trendyol-yuzen...) biçiminde ve iki kimlik
   taşıdığı için buradaki kuralı normalde eziyor. */
body.kk-cerez-acik .kk-chat-btn,
body.kk-cerez-acik .kk-yuzen {
  bottom: calc(var(--kk-cerez-h, 150px) + 26px + env(safe-area-inset-bottom, 0px)) !important;
}
body.kk-cerez-acik #kk-yukari {
  bottom: calc(var(--kk-cerez-h, 150px) + 82px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ÜCRETSİZ KARGO — SİTENİN HER YERİNDE YEŞİL
   ---------------------------------------------------------
   27 Ağustos 2026. Sahibi önce ürün sayfasındaki şeridi, sonra
   "her yerde" yeşil olmasını istedi. Turuncu kutu uyarı/hata
   kutusuna benziyordu; oysa ücretsiz kargo İYİ bir haber.

   İKİ AYRI YEŞİL VAR, karıştırma:
     · Açık zeminde  #0F7A38  (yazı)  / #17A34A (nokta)
     · Siyah zeminde #22C55E  — koyu yeşil siyahta okunmuyor

   Ölçüldü: siyah zeminde #22C55E kontrastı 8,69 (eski turuncu
   6,24), açık zeminde #0F7A38 kontrastı 5,44 (sınır 4,5).

   ⚠️ Marka rengine BAĞLANMADI. Marka turuncusu değişse bile
   bunlar yeşil kalmalı — buradaki yeşil bir DURUM rengi
   ("iyi haber"), süs değil.

   ⚠️ Turuncu KALANLAR (bilinçli): "Sepete Ekle" düğmesi,
   "24 saat"/"ORTALAMA 1–2 GÜN" vurguları, listelerdeki ✓
   işaretleri, kapanış bandı ve kargo geri sayımı. Onlar
   ücretsiz kargoyla ilgili değil. */

/* Açık zeminde: yazı ve nokta */
.kk-kargo-yesil {
  color: #0F7A38;
}
.kk-kargo-nokta {
  background: #17A34A;
}

/* Siyah zeminde (üst duyuru bandı) */
.kk-kargo-yesil-koyu {
  color: #22C55E;
}
.kk-kargo-nokta-koyu {
  background: #22C55E;
}

/* Sepet panelindeki kargo şeridi */
.kk-kargo-kutu {
  border-color: #B9E3C9;
  background: #EEFAF2;
  color: #0F7A38;
}

/* ÜCRETSİZ KARGO ŞERİDİ — YEŞİL, marka turuncusu değil
   ---------------------------------------------------------
   27 Ağustos 2026. Sahibi: "kırmızı olumsuzluk çağrıştırıyor".
   Haklı: kesik çizgili turuncu kutu uyarı/hata kutusuna
   benziyordu, oysa müşteriye İYİ bir haber veriyor.

   Yeşil sitede zaten var (SSL rozeti, canlı destek noktası),
   yani yeni bir renk uydurmuyoruz.

   Renkler ölçüldü — yazı 5,07 kontrast (sınır 4,5; eski turuncu
   4,53'tü), çerçeve 3,29 (eski turuncu 3,17). Yani hem daha
   okunur hem de görünürlüğü aynı.

   ⚠️ Marka rengine bağlamadım: marka turuncusu değişse bile bu
   şerit yeşil kalmalı — buradaki yeşil bir DURUM rengi ("iyi
   haber"), süs değil. */
.kk-kargo-serit {
  border-color: #17A34A;
  background: #EEFAF2;
  color: #0F7A38;
}

/* Ödeme seçimi kutusu, teslimat alanlarına yapışıyordu.
   Sebebi: bot tuzağı yüzünden bu kutu alanların ızgarasının
   DIŞINDA duruyor (tuzak bilerek ızgaradan uzakta), o yüzden
   ızgaranın kendi aralığı buraya uygulanmıyordu.
   27 Ağustos 2026: ölçtüm, aradaki boşluk 0 pikseldi. */
.kk-odeme-secim {
  margin-top: 22px;
}

/* =========================================================
   ÖDEME ROZETLERİ (VISA / MASTERCARD / TROY / PayTR / SSL / 3D)
   ---------------------------------------------------------
   26 Ağustos 2026. Altı rozet de aynı gri kutuydu ve aynı gri
   kart çizimini kullanıyordu; hiçbiri fark edilmiyordu.
   Sahibi "renkli olsun, dikkat çeksin, orijinal renkleri
   kullan" dedi.

   RENKLER UYDURULMADI — markaların kendi kaynaklarından ölçüldü:
     Visa        #1434CB   cdn.visa.com'daki resmî logo dosyası
     Mastercard  #EB001B + #F79E1B   resmî logo (SVG)
     troy        #24B8C9   troyodeme.com'un kendi stil dosyası
     PayTR       #0060D9   paytr.com'daki logo dosyası
   SSL ve 3D Secure'ün marka rengi yoktur: SSL güvenlik yeşili,
   3D Secure sitenin kendi turuncusu.

   ⚠️ YAZI RENGİ = MARKA RENGİNİN KOYULAŞTIRILMIŞI.
   troy'un turkuazı (#24B8C9) ve düz yeşil, açık zeminde 11px
   kalın yazı için fazla açık kalıyordu (kontrast 2,26 ve 3,10 —
   okunabilirlik sınırı 4,5). Ölçüp koyulaştırdım; hepsi 4,5'in
   üstünde. Simgeler daha canlı tonu kullanabiliyor çünkü çizim
   için sınır 3,0.

   ⚠️ Bunlar markaların RESMÎ LOGOLARI DEĞİL, marka renklerinde
   sade çizimlerdir. Resmî logolar gerekirse marka dosyaları
   alınmalı.

   Her rozet rengini üç değişkenden alır; yeni rozet eklemek
   için tek satır yeter.
   ========================================================= */
/* Rozet kabi: her satirda 3 rozet, iki satir.
   Eskiden serbest sarmaydi; ekran genisligine gore 4+2 ya da 3+3
   oluyordu ve 4+2'de alt satir bos bos duruyordu. Kap zaten dar
   (masaustunde 512px), altisi tek satira hic sigmiyor - o yuzden
   duzeni sabitledim. Sutunlar icerige gore olculuyor, ayni
   sutundaki iki rozet ayni genislikte oluyor. */
.kk-odeme-cipler {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 8px;
  padding-top: 2px;
}

.kk-odeme-cip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1.5px solid var(--cip-cizgi, #E6E6E6);
  background: var(--cip-zemin, #fff);
  color: var(--cip, #5A5A5A);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

/* Simge kendi rengini alabilsin: SVG'ler currentColor kullanıyor,
   o yüzden rengi burada değiştirmek yetiyor. Tanımlı değilse
   yazının rengini alır. */
.kk-odeme-cip .kk-cip-sim {
  height: 15px;
  width: 21px;
  flex: none;
  color: var(--cip-sim, currentColor);
}

.kk-cip-visa  { --cip: #1434CB; --cip-zemin: #F2F4FF; --cip-cizgi: #C5CFF6; }
.kk-cip-mc    { --cip: #1A1A1A; --cip-zemin: #FFF6EE; --cip-cizgi: #F8D5B4; }
.kk-cip-troy  { --cip: #0B7280; --cip-zemin: #EDFAFC; --cip-cizgi: #B4E4EA; --cip-sim: #0E8A99; }
.kk-cip-paytr { --cip: #0060D9; --cip-zemin: #EEF5FF; --cip-cizgi: #BDD7F7; }
.kk-cip-ssl   { --cip: #0F7A38; --cip-zemin: #EEFAF2; --cip-cizgi: #B9E3C9; --cip-sim: #17A34A; }
.kk-cip-3ds   { --cip: #C74409; --cip-zemin: #FFF3EE; --cip-cizgi: #FFD2BC; }

/* Dar telefonlarda altı rozet iki satıra sığsın */
@media (max-width: 400px) {
  .kk-odeme-cip { padding: 8px 10px; gap: 6px; letter-spacing: .04em; }
  .kk-odeme-cip .kk-cip-sim { height: 13px; width: 18px; }
}

/* Çok dar telefonlarda (iPhone SE gibi, 344px altı) üçlü satır
   kabına sığmayıp kenarlardan kesiliyordu. Ölçtüm: sınır 344px.
   O ekranlarda ikişerli üç satıra düşüyor. */
@media (max-width: 343px) {
  .kk-odeme-cipler { grid-template-columns: repeat(2, auto); }
}

/* =========================================================
   YILDIZ RENGİ — tek yerden
   ---------------------------------------------------------
   24 Ağustos 2026. Yıldızlar üç ayrı yerde çiziliyordu ve
   renkleri tutmuyordu: bazıları siyah, bazıları koyu turuncu.
   Hepsi artık bu sınıfı kullanıyor.

   Renk marka renginden TÜRETİLİYOR: panelden marka rengi
   değişirse yıldızlar da uyar. Marka turuncusu (#FF570C)
   yıldız için fazla koyu kalıyordu; beyazla karıştırılıp
   daha açık ve canlı bir tona getiriliyor.

   İlk satır yedek: color-mix'i anlamayan eski tarayıcılar
   onu kullanır, yenileri ikinci satırla üzerine yazar.
   ========================================================= */
.kk-yildiz {
  color: #FF7C41;
  color: color-mix(in srgb, var(--kk-accent, #FF570C) 76%, #ffffff);
}