/* kioksoftware — koyu temada unutulmus acik renkler (sablondan kalan beyaz kutular, koyu yazilar, mor linkler).
   app.css'ten sonra yuklenir; renkler kiok.css token'larindan gelir. */

/* Form alanlari */
body.site-body input.form-input,
body.site-body select.form-input,
body.site-body textarea.form-textarea,
body.site-body select.form-select,
body.site-body .form-input,
body.site-body .form-textarea,
body.site-body .form-select {
  background: var(--surface-2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--rr);
}
.site-body .form-input::placeholder,
.site-body .form-textarea::placeholder { color: var(--fg-dim); }
body.site-body input.form-input:focus,
body.site-body select.form-input:focus,
body.site-body textarea.form-textarea:focus,
body.site-body .form-select:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-wash) !important;
  background: var(--surface-3) !important;
}
.site-body .form-input:-webkit-autofill { -webkit-text-fill-color: var(--fg); transition: background-color 9999s; }
.site-body input[type="checkbox"], .site-body input[type="radio"] { accent-color: var(--brand); }

/* Sayfa alt basliklari ("Get in touch" gibi) */
.site-body .section__subtitle { color: var(--fg-mid); }

/* Uyari kutulari */
.site-body .alert { border-radius: var(--rr); border: 1px solid var(--line); background: var(--surface-2); color: var(--fg); }
.site-body .alert--info    { background: var(--brand-wash); border-color: rgba(44, 123, 242, .35); color: #cfe0fb; }
.site-body .alert--success { background: rgba(63, 191, 143, .12); border-color: rgba(63, 191, 143, .35); color: #bfeedd; }
.site-body .alert--warning { background: rgba(226, 163, 60, .12); border-color: rgba(226, 163, 60, .35); color: #f4dcb0; }
.site-body .alert--danger  { background: rgba(226, 87, 76, .12); border-color: rgba(226, 87, 76, .35); color: #f6c2bd; }

/* Sepet ve odeme ozeti */
.site-body .cart-summary__total span,
.site-body .checkout-summary__total span,
.site-body .checkout-summary__info,
.site-body .checkout-summary__info > div { color: var(--fg); }

/* Sablonun mor linkleri -> marka mavisi */
.site-body a[href*="forgot-password"],
.site-body .auth-box a { color: var(--brand); }
.site-body a[href*="forgot-password"]:hover,
.site-body .auth-box a:hover { color: #6aa5ff; }

/* Yorum yildizlari (pasif) koyu zeminde gorunsun */
.site-body .star-off { color: #3a5677; }
.site-body .star-off:hover { color: var(--fg-dim); }

/* Iletisim kutusu ikonlari */
.site-body .contact-info__icon { background: var(--brand-wash); border: 1px solid rgba(44, 123, 242, .25); }

/* Gorseli olmayan urunler icin kapak (urun sayfasi) */
.kk-cover {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--rr-lg);
  border: 1px solid var(--line); background: linear-gradient(150deg, #0d1b31 0%, #08111f 60%, #060d18 100%);
  display: flex; align-items: flex-end; isolation: isolate;
  --c1: #2C7BF2; --c2: #5ee7ff;
}
.kk-cover--t2 { --c1: #7c5cff; --c2: #2C7BF2; }
.kk-cover--t3 { --c1: #e2a33c; --c2: #ff7a59; }
.kk-cover--t4 { --c1: #3FBF8F; --c2: #5ee7ff; }
.kk-cover__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(ellipse at 70% 20%, #000 10%, transparent 70%);
}
.kk-cover__glow {
  position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; top: -30%; border-radius: 50%;
  background: radial-gradient(circle, var(--c1) 0%, transparent 65%); opacity: .45; filter: blur(10px);
}
.kk-cover__glow::after {
  content: ''; position: absolute; width: 60%; aspect-ratio: 1; left: -40%; top: 70%; border-radius: 50%;
  background: radial-gradient(circle, var(--c2) 0%, transparent 65%); opacity: .6;
}
.kk-cover__body { padding: clamp(20px, 4vw, 36px); display: grid; gap: 10px; }
.kk-cover__eyebrow { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c2); }
.kk-cover__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.03em; color: #fff; }
.kk-cover__sub { font-size: 15px; color: var(--fg-mid); }
.kk-cover__stack { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kk-cover__stack span { font-family: var(--f-mono); font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--fg-mid); }
.kk-cover__mark { position: absolute; top: clamp(16px, 3vw, 26px); left: clamp(20px, 4vw, 36px); font-family: var(--f-display); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.02em; opacity: .8; }
.kk-cover__mark em { font-style: normal; color: var(--brand); }

/* Ust menu: sigmadigi genislikte (tablet, kucuk laptop) linkler gizlenir, menu dugmesi acilir */
@media (max-width: 1100px) {
  .site-body .site-nav { display: none !important; }
  .site-body .site-hamburger { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; }
}
@media (min-width: 1101px) {
  .site-body .site-hamburger { display: none !important; }
}

/* Urun kapagi galeri kutusunu tam doldursun */
.site-body .pd__main .kk-cover { height: 100%; aspect-ratio: auto; border: 0; border-radius: inherit; }

/* Telefon: ust barda sadece logo, arama, sepet ve menu; diger ikonlar menude */
@media (max-width: 640px) {
  .site-body .site-header__inner { gap: 10px; }
  .site-body .site-header__actions { gap: 6px; }
  .site-body .site-header__actions .kk-cur,
  .site-body .site-header__actions .site-icon-btn[aria-label="Saved"],
  .site-body .site-header__actions .site-icon-btn[aria-label="Compare"],
  .site-body .site-header__actions .site-icon-btn[aria-label="Account"],
  .site-body .site-header__actions .site-icon-btn[aria-label="Sign in"] { display: none !important; }
  .site-body .site-logo, .site-body .site-logo img { width: auto !important; max-width: 140px; height: auto; }
  .site-body .site-logo img { max-height: 28px; }
  .site-body .site-container { padding-inline: 16px; }
}