/**
 * Kikii — UI Bileşenleri
 * Buton, kart, rozet, form, accordion, drawer, toast, header, footer.
 *
 * @package Kikii
 */

/* ===============================================================
   GÖRÜNÜRLÜK YARDIMCILARI
   =============================================================== */

.kikii-hide-mobile { display: none; }
@media (min-width: 768px) { .kikii-hide-mobile { display: inline-flex; } }

.kikii-hide-desktop { display: inline-flex; }
@media (min-width: 1024px) { .kikii-hide-desktop { display: none; } }

/* ===============================================================
   BUTONLAR
   =============================================================== */

.kikii-btn {
  --btn-bg: var(--kikii-primary);
  --btn-color: var(--kikii-on-primary);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kikii-space-2);
  padding: 0.875rem 1.75rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--kikii-radius-pill);
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--kikii-dur) var(--kikii-ease),
    color var(--kikii-dur) var(--kikii-ease),
    border-color var(--kikii-dur) var(--kikii-ease),
    transform var(--kikii-dur-fast) var(--kikii-ease);
}

.kikii-btn:hover { --btn-bg: var(--kikii-primary-dark); }
.kikii-btn:active { transform: translateY(1px); }

.kikii-btn[disabled],
.kikii-btn[aria-disabled="true"] {
  --btn-bg: var(--kikii-border);
  --btn-color: var(--kikii-muted);
  cursor: not-allowed;
  transform: none;
}

/* Varyantlar */
.kikii-btn--secondary {
  --btn-bg: transparent;
  --btn-color: var(--kikii-text);
  --btn-border: var(--kikii-border-strong);
}
.kikii-btn--secondary:hover {
  --btn-bg: var(--kikii-text);
  --btn-color: #fff;
  --btn-border: var(--kikii-text);
}

.kikii-btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--kikii-text);
  --btn-border: transparent;
  padding-inline: var(--kikii-space-3);
}
.kikii-btn--ghost:hover { --btn-bg: var(--kikii-surface-sunken); }

.kikii-btn--dark {
  --btn-bg: var(--kikii-text);
  --btn-color: #fff;
}
.kikii-btn--dark:hover { --btn-bg: #000; }

.kikii-btn--block { display: flex; width: 100%; }
.kikii-btn--lg { min-height: 56px; padding-inline: 2.25rem; font-size: var(--kikii-fs-base); }
.kikii-btn--sm { min-height: 44px; padding: 0.5rem 1.125rem; font-size: var(--kikii-fs-xs); }

/* Ok işareti CTA'da hafifçe kayar */
.kikii-btn__arrow { transition: transform var(--kikii-dur) var(--kikii-ease-out); }
.kikii-btn:hover .kikii-btn__arrow { transform: translateX(3px); }

/* Yükleniyor durumu */
.kikii-btn.is-loading { pointer-events: none; position: relative; color: transparent; }
.kikii-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--btn-color);
  animation: kikii-spin 0.6s linear infinite;
}

@keyframes kikii-spin { to { transform: rotate(360deg); } }

/* İkon butonu — header aksiyonları */
.kikii-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--kikii-radius-pill);
  color: var(--kikii-text);
  position: relative;
  transition: background-color var(--kikii-dur-fast) var(--kikii-ease);
}
.kikii-icon-btn:hover { background: var(--kikii-surface-sunken); }
.kikii-icon-btn svg { width: 21px; height: 21px; }
/* Oturum açıkken hesap düğmesinde küçük bir işaret */
.kikii-icon-btn.is-signed-in { position: relative; }

.kikii-icon-btn.is-signed-in::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kikii-success);
  border: 2px solid var(--kikii-background);
}


.kikii-icon-btn__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--kikii-primary);
  color: #fff;
  border-radius: var(--kikii-radius-pill);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kikii-icon-btn__count:empty,
.kikii-icon-btn__count[data-count="0"] { display: none; }

/* Metin linki — alt çizgi hover'da açılır */
.kikii-link {
  position: relative;
  font-weight: 600;
  color: var(--kikii-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--kikii-dur) var(--kikii-ease);
}
.kikii-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.kikii-link:hover { background-size: 0 1px; }

.kikii-link--primary { color: var(--kikii-primary); }

/* ===============================================================
   ROZETLER
   =============================================================== */

.kikii-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--kikii-radius-pill);
  background: var(--kikii-surface-sunken);
  color: var(--kikii-text-soft);
  font-size: var(--kikii-fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.kikii-badge--new { background: var(--kikii-text); color: #fff; }
.kikii-badge--sale { background: var(--kikii-primary); color: #fff; }
.kikii-badge--soft { background: var(--kikii-accent-soft); color: var(--kikii-primary-dark); }
.kikii-badge--success { background: var(--kikii-success-soft); color: var(--kikii-success); }
.kikii-badge--outline { background: transparent; border: 1px solid var(--kikii-border-strong); }

/* ===============================================================
   FİYAT
   =============================================================== */

.kikii-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--kikii-space-2);
  font-family: var(--kikii-font-body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

.kikii-price__now { color: var(--kikii-text); }
.kikii-price--accent .kikii-price__now { color: var(--kikii-primary); }

.kikii-price__was {
  color: var(--kikii-muted);
  font-weight: 500;
  text-decoration: line-through;
  font-size: 0.85em;
}

.kikii-price__unit {
  color: var(--kikii-muted);
  font-weight: 500;
  font-size: 0.8em;
}

/* ===============================================================
   FORM ELEMANLARI
   =============================================================== */

.kikii-field { margin-bottom: var(--kikii-space-4); }

.kikii-label {
  display: block;
  margin-bottom: var(--kikii-space-2);
  font-size: var(--kikii-fs-sm);
  font-weight: 700;
}

.kikii-input,
.kikii-select,
.kikii-textarea {
  width: 100%;
  padding: 0.8125rem var(--kikii-space-4);
  min-height: 48px;
  background: var(--kikii-surface);
  border: 1px solid var(--kikii-border-strong);
  border-radius: var(--kikii-radius-sm);
  font-size: var(--kikii-fs-base);
  color: var(--kikii-text);
  transition: border-color var(--kikii-dur-fast) var(--kikii-ease), box-shadow var(--kikii-dur-fast) var(--kikii-ease);
}

.kikii-input::placeholder { color: var(--kikii-muted); }

.kikii-input:focus,
.kikii-select:focus,
.kikii-textarea:focus {
  outline: none;
  border-color: var(--kikii-primary);
  box-shadow: 0 0 0 3px var(--kikii-primary-soft);
}

.kikii-textarea { min-height: 120px; resize: vertical; }

.kikii-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236f6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--kikii-space-4) center;
  padding-right: var(--kikii-space-7);
}

.kikii-field__hint { margin-top: var(--kikii-space-2); font-size: var(--kikii-fs-xs); color: var(--kikii-muted); }
.kikii-field__error { margin-top: var(--kikii-space-2); font-size: var(--kikii-fs-xs); color: var(--kikii-danger); font-weight: 600; }

/* Adet sayacı */
.kikii-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--kikii-border-strong);
  border-radius: var(--kikii-radius-pill);
  overflow: hidden;
  background: var(--kikii-surface);
}

.kikii-qty__btn {
  width: 44px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--kikii-text);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--kikii-dur-fast) var(--kikii-ease);
}
.kikii-qty__btn:hover:not([disabled]) { background: var(--kikii-surface-sunken); }

/* Salt okunur adet (or. tek adetlik urun) — sayac yok, cerceve de gereksiz */
.kikii-qty--static { border: 0; background: none; }
.kikii-qty--static .kikii-qty__input { width: auto; min-width: 2ch; height: auto; font-size: var(--kikii-fs-sm); }
.kikii-qty__btn[disabled] { color: var(--kikii-border-strong); cursor: not-allowed; }

.kikii-qty__input {
  width: 44px;
  height: 46px;
  border: 0;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: transparent;
  -moz-appearance: textfield;
}
.kikii-qty__input::-webkit-outer-spin-button,
.kikii-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===============================================================
   KART
   =============================================================== */

.kikii-card {
  background: var(--kikii-surface);
  border: 1px solid var(--kikii-border);
  border-radius: var(--kikii-radius-lg);
  overflow: hidden;
}

.kikii-card__body { padding: var(--kikii-space-5); }

/* ===============================================================
   ACCORDION
   =============================================================== */

.kikii-accordion { border-top: 1px solid var(--kikii-border); }

.kikii-accordion__item { border-bottom: 1px solid var(--kikii-border); }

.kikii-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kikii-space-4);
  width: 100%;
  padding: var(--kikii-space-5) 0;
  text-align: left;
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-base);
  font-weight: 700;
  color: var(--kikii-text);
  transition: color var(--kikii-dur-fast) var(--kikii-ease);
}

.kikii-accordion__trigger:hover { color: var(--kikii-primary); }

.kikii-accordion__icon {
  flex: none;
  width: 20px;
  height: 20px;
  position: relative;
}
.kikii-accordion__icon::before,
.kikii-accordion__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform var(--kikii-dur) var(--kikii-ease-out), opacity var(--kikii-dur) var(--kikii-ease);
}
.kikii-accordion__icon::before { width: 14px; height: 1.5px; }
.kikii-accordion__icon::after { width: 1.5px; height: 14px; }

.kikii-accordion__trigger[aria-expanded="true"] .kikii-accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Yükseklik animasyonu JS ile max-height üzerinden yapılır */
.kikii-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--kikii-dur-slow) var(--kikii-ease-out);
}

.kikii-accordion__content {
  padding-bottom: var(--kikii-space-5);
  color: var(--kikii-text-soft);
  font-size: var(--kikii-fs-sm);
  line-height: 1.7;
}

.kikii-accordion__content ul { padding-left: 1.1rem; }
.kikii-accordion__content li { margin-bottom: var(--kikii-space-2); }

/* Tanım listesi — içindekiler/besin değeri için */
.kikii-deflist { display: grid; gap: var(--kikii-space-2); margin: 0; }
.kikii-deflist__row {
  display: flex;
  justify-content: space-between;
  gap: var(--kikii-space-4);
  padding-block: var(--kikii-space-2);
  border-bottom: 1px dashed var(--kikii-border);
}
.kikii-deflist__row:last-child { border-bottom: 0; }
.kikii-deflist__key { color: var(--kikii-muted); }
.kikii-deflist__val { font-weight: 700; text-align: right; }

/* ===============================================================
   HEADER
   =============================================================== */

/*
 * Zemin yavaşça kayan bir gradyan: markanın kırmızısı içinde ton
 * değişimi. GIF yerine CSS — bant genişliği yok, keskin kalır, tema
 * rengi değişince kendiliğinden uyar.
 */
.kikii-announcement {
  position: relative;
  overflow: hidden;
  background: var(--kikii-primary);
  background-image: linear-gradient(
    100deg,
    var(--kikii-primary-dark) 0%,
    var(--kikii-primary) 28%,
    #ef3049 50%,
    var(--kikii-primary) 72%,
    var(--kikii-primary-dark) 100%
  );
  background-size: 250% 100%;
  color: var(--kikii-on-primary);
  font-size: var(--kikii-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  animation: kikii-announce-drift 18s linear infinite;
}

@keyframes kikii-announce-drift {
  from { background-position: 0% 50%; }
  to   { background-position: -250% 50%; }
}

/* Üzerinden geçen ince parlama */
.kikii-announcement::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 45%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.16) 55%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: kikii-announce-shine 7s ease-in-out infinite;
}

@keyframes kikii-announce-shine {
  0%        { background-position: 160% 50%; }
  55%, 100% { background-position: -60% 50%; }
}

/* Hareketi azalt: zemin sabit kalır, mesajlar yine döner */
@media (prefers-reduced-motion: reduce) {
  .kikii-announcement { animation: none; background-image: none; }
  .kikii-announcement::after { display: none; }
}

.kikii-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kikii-space-4);
  min-height: var(--kikii-announcement-h);
  padding-block: 0.5rem;
  text-align: center;
}

/*
 * Mobilde tek mesaj görünür ve app.js sırayla değiştirir.
 * Masaüstünde dizi kalp ayraçlarıyla tekrarlanarak şeridi doldurur.
 */
/*
 * Mobilde tek mesaj görünür. display swap yerine üst üste bindirilip
 * yumuşak geçilir; şeridin yüksekliği sabit kalır.
 */
.kikii-announcement__item {
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--kikii-dur-slow) var(--kikii-ease),
              transform var(--kikii-dur-slow) var(--kikii-ease-out);
  grid-area: 1 / 1;
}

.kikii-announcement__item.is-active { opacity: 1; transform: none; }

@media (max-width: 767px) {
  .kikii-announcement__inner { display: grid; place-items: center; }
  .kikii-announcement__heart { display: none; }
}

.kikii-announcement__heart {
  display: none;
  color: var(--kikii-heart);
  line-height: 0;
  animation: kikii-heartbeat 3.2s var(--kikii-ease) infinite;
}

@keyframes kikii-heartbeat {
  0%, 88%, 100% { transform: scale(1); }
  92%           { transform: scale(1.22); }
  96%           { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .kikii-announcement__heart { animation: none; }
}

@media (min-width: 768px) {
  .kikii-announcement__item {
    opacity: 1;
    transform: none;
    grid-area: auto;
  }

  .kikii-announcement__heart { display: inline-flex; }
}

.kikii-header {
  position: relative;
  z-index: var(--kikii-z-header);
  background: var(--kikii-surface);
  border-bottom: 1px solid var(--kikii-border);
}

.kikii-header--sticky {
  position: sticky;
  top: 0;
}

.kikii-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--kikii-space-4);
  min-height: var(--kikii-header-h);
}

.kikii-header__nav { justify-self: start; }
.kikii-header__brand { justify-self: center; }
.kikii-header__actions { justify-self: end; display: flex; align-items: center; gap: 2px; }

.kikii-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--kikii-space-2);
  font-family: var(--kikii-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variation-settings: var(--kikii-display-axes);
  color: var(--kikii-text);
  line-height: 1;
}

/*
 * Logo 1063x472 (yaklasik 2.25:1). Yukseklik sabit, genislik oranla
 * gelir; boylece baslik yuksekligi logo degisse de kaymaz.
 */
.kikii-brand__logo { height: 26px; width: auto; }

@media (min-width: 768px) {
  .kikii-brand__logo { height: 30px; }
}


/* Ana menü */
.kikii-menu {
  display: none;
  align-items: center;
  gap: var(--kikii-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) { .kikii-menu { display: flex; } }

.kikii-menu > li { position: relative; }

.kikii-menu a {
  display: block;
  padding-block: var(--kikii-space-3);
  font-size: var(--kikii-fs-sm);
  font-weight: 600;
  color: var(--kikii-text);
}

.kikii-menu a:hover { color: var(--kikii-primary); }

/* Aktif bölüm kırmızı alt çizgiyle işaretlenir */
.kikii-menu .current-menu-item > a,
.kikii-menu .current-menu-ancestor > a {
  color: var(--kikii-text);
  box-shadow: inset 0 -2px 0 var(--kikii-primary);
}

/* Alt menü */
.kikii-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 220px;
  padding: var(--kikii-space-3);
  margin: 0;
  list-style: none;
  background: var(--kikii-surface);
  border: 1px solid var(--kikii-border);
  border-radius: var(--kikii-radius);
  box-shadow: var(--kikii-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--kikii-dur) var(--kikii-ease), transform var(--kikii-dur) var(--kikii-ease), visibility var(--kikii-dur);
}

.kikii-menu > li:hover > .sub-menu,
.kikii-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.kikii-menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--kikii-space-2) var(--kikii-space-3);
  border-radius: var(--kikii-radius-sm);
}
.kikii-menu .sub-menu a:hover { background: var(--kikii-surface-sunken); }

.kikii-burger { display: inline-flex; }
@media (min-width: 1024px) { .kikii-burger { display: none; } }

/* ===============================================================
   MOBİL MENÜ (drawer, soldan)
   =============================================================== */

.kikii-overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 20, 19, 0.42);
  opacity: 0;
  visibility: hidden;
  z-index: var(--kikii-z-overlay);
  transition: opacity var(--kikii-dur) var(--kikii-ease), visibility var(--kikii-dur);
}
.kikii-overlay.is-open { opacity: 1; visibility: visible; }

.kikii-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: var(--kikii-surface);
  z-index: var(--kikii-z-drawer);
  display: flex;
  flex-direction: column;
  transition: transform var(--kikii-dur-slow) var(--kikii-ease-out);
  box-shadow: var(--kikii-shadow-lg);
}

.kikii-drawer--left { left: 0; transform: translateX(-102%); }
.kikii-drawer--right { right: 0; transform: translateX(102%); }
.kikii-drawer.is-open { transform: translateX(0); }

.kikii-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kikii-space-4);
  padding: var(--kikii-space-4) var(--kikii-space-5);
  border-bottom: 1px solid var(--kikii-border);
  flex: none;
}

.kikii-drawer__title {
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-base);
  font-weight: 800;
  margin: 0;
}

.kikii-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--kikii-space-5);
}

.kikii-drawer__foot {
  flex: none;
  padding: var(--kikii-space-5);
  border-top: 1px solid var(--kikii-border);
  background: var(--kikii-surface);
}

.kikii-mobile-menu { list-style: none; margin: 0; padding: 0; }
.kikii-mobile-menu li { border-bottom: 1px solid var(--kikii-border); }
.kikii-mobile-menu a {
  display: block;
  padding: var(--kikii-space-4) 0;
  font-family: var(--kikii-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  font-variation-settings: var(--kikii-display-axes);
}
.kikii-mobile-menu .sub-menu { list-style: none; padding: 0 0 var(--kikii-space-3) var(--kikii-space-4); margin: 0; }
.kikii-mobile-menu .sub-menu li { border: 0; }
.kikii-mobile-menu .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-sm);
  padding-block: var(--kikii-space-2);
}

/* ===============================================================
   MİNİ SEPET
   =============================================================== */

.kikii-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--kikii-space-4);
  padding-block: var(--kikii-space-4);
  border-bottom: 1px solid var(--kikii-border);
}
.kikii-cart-item:first-child { padding-top: 0; }

.kikii-cart-item__media {
  border-radius: var(--kikii-radius-sm);
  overflow: hidden;
  background: var(--kikii-surface-sunken);
  aspect-ratio: 1;
}

.kikii-cart-item__name {
  font-size: var(--kikii-fs-sm);
  font-weight: 700;
  margin-bottom: 2px;
  display: block;
}

.kikii-cart-item__meta {
  font-size: var(--kikii-fs-xs);
  color: var(--kikii-muted);
  line-height: 1.5;
  margin-bottom: var(--kikii-space-3);
}

.kikii-cart-item__meta strong { font-weight: 600; color: var(--kikii-text-soft); }

.kikii-cart-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kikii-space-3);
}

.kikii-cart-item__remove {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: var(--kikii-fs-xs);
  color: var(--kikii-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kikii-cart-item__remove:hover { color: var(--kikii-danger); }

/* Ücretsiz teslimat ilerleme çubuğu */
.kikii-shipping-bar { margin-bottom: var(--kikii-space-5); }

.kikii-shipping-bar__text {
  font-size: var(--kikii-fs-xs);
  margin-bottom: var(--kikii-space-2);
  color: var(--kikii-text-soft);
}
.kikii-shipping-bar__text strong { color: var(--kikii-primary); font-weight: 800; }

.kikii-shipping-bar__track {
  height: 6px;
  background: var(--kikii-surface-sunken);
  border-radius: var(--kikii-radius-pill);
  overflow: hidden;
}

.kikii-shipping-bar__fill {
  height: 100%;
  width: 0;
  background: var(--kikii-primary);
  border-radius: inherit;
  transition: width var(--kikii-dur-slow) var(--kikii-ease-out);
}

.kikii-shipping-bar.is-complete .kikii-shipping-bar__fill { background: var(--kikii-success); }

.kikii-cart-totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--kikii-space-4);
}
.kikii-cart-totals__label { font-size: var(--kikii-fs-sm); color: var(--kikii-muted); }
.kikii-cart-totals__value { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.kikii-cart-empty { text-align: center; padding-block: var(--kikii-space-8); }
.kikii-cart-empty svg { margin: 0 auto var(--kikii-space-4); color: var(--kikii-border-strong); }

/* ===============================================================
   TOAST — seçim ve sepet geri bildirimi
   =============================================================== */

.kikii-toasts {
  position: fixed;
  bottom: var(--kikii-space-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--kikii-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--kikii-space-2);
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

@media (min-width: 768px) {
  .kikii-toasts { left: auto; right: var(--kikii-space-5); transform: none; }
}

.kikii-toast {
  display: flex;
  align-items: center;
  gap: var(--kikii-space-3);
  padding: var(--kikii-space-3) var(--kikii-space-4);
  background: var(--kikii-text);
  color: #fff;
  border-radius: var(--kikii-radius);
  font-size: var(--kikii-fs-sm);
  font-weight: 600;
  box-shadow: var(--kikii-shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--kikii-dur) var(--kikii-ease), transform var(--kikii-dur) var(--kikii-ease-out);
  pointer-events: auto;
}

.kikii-toast.is-visible { opacity: 1; transform: translateY(0); }
.kikii-toast__icon { flex: none; color: var(--kikii-accent); }
.kikii-toast--success .kikii-toast__icon { color: #7fd4ab; }
.kikii-toast--error { background: var(--kikii-danger); }

/*
 * Altbilgi. Koyu zeminde markanın kırmızısı bir ışık halesi olarak
 * durur — düz siyah bir blok yerine derinliği olan bir yüzey.
 */
.kikii-footer {
  position: relative;
  overflow: hidden;
  background: var(--kikii-text);
  color: #efe8e0;
  padding-block: var(--kikii-space-8) var(--kikii-space-5);
  margin-top: auto;
}

/* Sol üstten sızan marka ışığı */
.kikii-footer::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 60%;
  height: 130%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--kikii-primary) 26%, transparent) 0%,
    transparent 62%
  );
}

/* Sağ altta ikinci, daha sessiz bir hale */
.kikii-footer::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -46%;
  width: 46%;
  height: 110%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--kikii-accent) 12%, transparent) 0%,
    transparent 64%
  );
}

/* İçerik halelerin üstünde kalsın */
.kikii-footer > * { position: relative; z-index: 1; }

.kikii-footer a { color: #efe8e0; }
.kikii-footer a:hover { color: var(--kikii-accent); }

.kikii-footer__grid {
  display: grid;
  gap: var(--kikii-space-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--kikii-space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) { .kikii-footer__grid { grid-template-columns: 1.6fr repeat(2, 1fr); } }

@media (min-width: 1100px) {
  .kikii-footer__grid {
    grid-template-columns: 1.7fr repeat(3, 0.85fr) 1.05fr;
    gap: var(--kikii-space-7) var(--kikii-space-6);
  }
}

.kikii-footer .kikii-brand { color: #fff; font-size: 1.75rem; }
.kikii-footer .kikii-brand__logo { height: 56px; }

.kikii-footer__tagline {
  margin-top: var(--kikii-space-4);
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--kikii-fs-sm);
  max-width: 34ch;
}

/* -------- Sosyal ikonlar -------- */

.kikii-footer__social {
  display: flex;
  gap: var(--kikii-space-2);
  list-style: none;
  margin: var(--kikii-space-5) 0 0;
  padding: 0;
}

.kikii-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #efe8e0;
  transition: background var(--kikii-dur-fast) var(--kikii-ease),
              border-color var(--kikii-dur-fast) var(--kikii-ease),
              color var(--kikii-dur-fast) var(--kikii-ease),
              transform var(--kikii-dur-fast) var(--kikii-ease);
}

.kikii-footer__social a:hover {
  background: var(--kikii-primary);
  border-color: var(--kikii-primary);
  color: #fff;
  transform: translateY(-2px);
}

/* -------- Atölye bilgisi -------- */

.kikii-footer__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--kikii-space-3);
  margin-bottom: var(--kikii-space-3);
  font-size: var(--kikii-fs-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

.kikii-footer__fact svg {
  flex: none;
  margin-top: 3px;
  color: var(--kikii-accent);
}

.kikii-footer__fact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.kikii-footer__heading {
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kikii-tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--kikii-space-4);
}

.kikii-footer__list { list-style: none; margin: 0; padding: 0; display: grid; }

/*
 * Altbilgi bağlantıları bir cümlenin içinde değil, tıklanmak için duran
 * bir liste. Dokunma hedefi 44px olsun diye yükseklik satır aralığından
 * değil dolgudan gelir — görsel ritim değişmez.
 */
.kikii-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--kikii-fs-sm);
}

.kikii-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kikii-space-4);
  padding-top: var(--kikii-space-5);
  font-size: var(--kikii-fs-xs);
  color: rgba(255, 255, 255, 0.5);
}

.kikii-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kikii-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.kikii-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.kikii-payment-icons { display: flex; align-items: center; gap: var(--kikii-space-3); opacity: 0.75; }
.kikii-payment-icons svg { height: 22px; width: auto; }

/* Bülten formu */
.kikii-newsletter { display: flex; gap: var(--kikii-space-2); margin-top: var(--kikii-space-4); }
.kikii-newsletter .kikii-input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.kikii-newsletter .kikii-input::placeholder { color: rgba(255, 255, 255, 0.45); }

/* ===============================================================
   BREADCRUMB
   =============================================================== */

.kikii-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kikii-space-2);
  font-size: var(--kikii-fs-xs);
  color: var(--kikii-muted);
  padding-block: var(--kikii-space-4);
}
.kikii-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.kikii-breadcrumb a:hover { color: var(--kikii-primary); }
.kikii-breadcrumb .kikii-breadcrumb__sep { opacity: 0.5; }

/* ===============================================================
   SAYFALAMA
   =============================================================== */

.kikii-pagination {
  display: flex;
  justify-content: center;
  gap: var(--kikii-space-2);
  margin-top: var(--kikii-space-8);
  list-style: none;
  padding: 0;
}

.kikii-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--kikii-space-3);
  border: 1px solid var(--kikii-border);
  border-radius: var(--kikii-radius-pill);
  font-size: var(--kikii-fs-sm);
  font-weight: 700;
  background: var(--kikii-surface);
  transition: all var(--kikii-dur-fast) var(--kikii-ease);
}

.kikii-pagination .page-numbers:hover { border-color: var(--kikii-text); }
.kikii-pagination .page-numbers.current {
  background: var(--kikii-text);
  border-color: var(--kikii-text);
  color: #fff;
}

/* ===============================================================
   ŞABLONLARDAN ÇIKARILAN KURALLAR

   Bu sınıflar daha önce şablonlarda satır içi stil olarak duruyordu.
   Tasarım kararı tek yerde toplansın diye buraya taşındı; şablon artık
   yalnızca yapı kurar.
   =============================================================== */

/* Kap — kendi iç boşluğu olan bir bölümün içinde tekrar boşluk vermez */
.kikii-container--flush { padding-inline: 0; }

/* Yazı ve sayfa görseli */
.kikii-entry-media { margin-bottom: var(--kikii-space-6); }

/* 404 */
.kikii-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--kikii-space-3);
}

/* Alt bilgi künyesi */
.kikii-footer__fineprint { margin-top: var(--kikii-space-2); color: rgba(255, 255, 255, 0.45); }

/* Ödeme rozetleri — çekmecede ortalanır */
.kikii-payment-icons--center { justify-content: center; margin-top: var(--kikii-space-4); }

/* Yumuşak köşeli düğme — geniş bloklarda hap yerine kare köşe */
.kikii-btn--soft { border-radius: var(--kikii-radius-sm); }

/* Akordeon başlıkları düğmeyi sarar; kendi boşluğu olmamalı */
.kikii-accordion__heading { margin: 0; }

/* Ürün künyesi satırı */
.kikii-spec { margin-bottom: var(--kikii-space-3); }
.kikii-spec__value { color: var(--kikii-muted); }

/* Yapımcı imzası — en altta, sessiz */
.kikii-footer__credit {
  margin-top: var(--kikii-space-5);
  padding-top: var(--kikii-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: var(--kikii-fs-xs);
}

.kikii-footer__credit a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.04em;
  transition: color var(--kikii-dur-fast) var(--kikii-ease);
}

.kikii-footer__credit a:hover { color: rgba(255, 255, 255, 0.8); }
.kikii-footer__credit strong { font-weight: 700; }

/* Birden çok telefon numarası alt alta */
.kikii-footer__phones { display: grid; gap: 2px; }

/* ===============================================================
   ÇEREZ ONAYI
   =============================================================== */

.kikii-consent-bar {
  position: fixed;
  left: var(--kikii-space-4);
  right: var(--kikii-space-4);
  bottom: var(--kikii-space-4);
  z-index: var(--kikii-z-toast);
  display: grid;
  gap: var(--kikii-space-4);
  max-width: 720px;
  margin-inline: auto;
  padding: var(--kikii-space-5);
  background: var(--kikii-surface);
  border: 1px solid var(--kikii-border);
  border-radius: var(--kikii-radius-lg);
  box-shadow: var(--kikii-shadow-lg);
  animation: kikii-consent-in var(--kikii-dur-slow) var(--kikii-ease-out) both;
}

@media (min-width: 720px) {
  .kikii-consent-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@keyframes kikii-consent-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kikii-consent-bar { animation: none; }
}

.kikii-consent-bar.is-gone {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--kikii-dur) var(--kikii-ease), transform var(--kikii-dur) var(--kikii-ease);
  pointer-events: none;
}

.kikii-consent-bar__text strong {
  display: block;
  font-size: var(--kikii-fs-sm);
  font-weight: 800;
  margin-bottom: 4px;
}

.kikii-consent-bar__text p {
  margin: 0;
  font-size: var(--kikii-fs-xs);
  color: var(--kikii-text-soft);
  line-height: 1.6;
}

.kikii-consent-bar__text a { color: var(--kikii-primary); font-weight: 700; text-decoration: underline; }

.kikii-consent-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kikii-space-2);
}

.kikii-consent-bar__actions .kikii-btn { flex: 1; white-space: nowrap; }

@media (min-width: 720px) {
  .kikii-consent-bar__actions .kikii-btn { flex: none; }
}

/* Yapışkan alt çubukla çakışmasın */
body.kikii-has-sticky-bar .kikii-consent-bar { bottom: calc(76px + var(--kikii-space-3)); }

.kikii-footer__consent {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--kikii-fs-xs);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kikii-footer__consent:hover { color: #efe8e0; }

/* ===============================================================
   ONAY KUTUSU

   Hesap, ödeme ve yasal onay formlarının ortak öğesi. Sayfa kümesine
   bağlı olmadığı için burada durur.
   =============================================================== */

/* Onay kutusu — hesap, ödeme ve yorum formlarının ortak öğesi */
.kikii-check {
  display: inline-flex;
  align-items: center;
  gap: var(--kikii-space-2);
  min-height: 44px;
  font-size: var(--kikii-fs-sm);
  cursor: pointer;
}

.kikii-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--kikii-primary);
  cursor: pointer;
}

.kikii-form .required { color: var(--kikii-primary); text-decoration: none; }

/* ===============================================================
   SEPET ÇEKMECESİ İÇERİĞİ

   Çekmece site başlığında, yani her sayfada basılır. Kuralları
   mağaza katmanında bırakmak yasal metin ya da blog sayfasında
   stilsiz bir liste bırakıyordu.
   =============================================================== */

/* Mini sepet */
.kikii-mini-cart-list { list-style: none; margin: 0; padding: 0; }
.kikii-mini-cart__warning { color: var(--kikii-danger); font-weight: 600; margin-bottom: var(--kikii-space-3); }
.kikii-mini-cart__note { margin-bottom: var(--kikii-space-4); }
.kikii-mini-cart__cart-link { margin-top: var(--kikii-space-2); }

.kikii-cart-empty__title {
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-base);
  font-weight: 800;
  margin-bottom: var(--kikii-space-2);
}

.kikii-cart-empty__text { margin-bottom: var(--kikii-space-5); }

/* ===============================================================
   WOOCOMMERCE BİLDİRİMLERİ

   Giriş hatası, kupon mesajı, yorum onayı — bildirimler herhangi bir
   sayfada çıkabilir, bu yüzden kurallar sayfa kümesine bağlı değil.
   =============================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  padding: var(--kikii-space-4) var(--kikii-space-5);
  margin: 0 0 var(--kikii-space-5);
  border-radius: var(--kikii-radius);
  font-size: var(--kikii-fs-sm);
  background: var(--kikii-surface-sunken);
  border-left: 3px solid var(--kikii-text);
}

.woocommerce-message { background: var(--kikii-success-soft); border-left-color: var(--kikii-success); }
.woocommerce-error { background: #fdecec; border-left-color: var(--kikii-danger); }

/* Liste rolü şablonda korunduğu için işaretler burada sıfırlanır. */
.woocommerce-error__list { list-style: none; margin: 0; padding: 0; }
.woocommerce-error__list li + li { margin-top: var(--kikii-space-2); }

/* ===============================================================
   KURUMSAL TALEP FORMU

   Kısa kodla herhangi bir sayfaya konabildiği için stiller genel
   katmanda durur, sayfaya bağlı bir dosyada değil.
   =============================================================== */

.kikii-inquiry {
  max-width: 760px;
}

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

@media (min-width: 640px) {
  .kikii-inquiry__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kikii-inquiry__form > .kikii-field,
.kikii-inquiry__form > .kikii-check {
  margin-top: var(--kikii-space-4);
}

/*
 * Bal küpü. `display: none` bazı botlar tarafından okunup atlanıyor;
 * ekran dışına almak hem insanı hem ekran okuyucuyu rahatsız etmez
 * (alan ayrıca aria-hidden ve tabindex="-1").
 */
.kikii-inquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kikii-inquiry__submit {
  margin-top: var(--kikii-space-6);
}

.kikii-inquiry__note {
  margin-top: var(--kikii-space-3);
  font-size: var(--kikii-fs-xs);
  color: var(--kikii-muted);
}

.kikii-inquiry__done,
.kikii-inquiry__error {
  padding: var(--kikii-space-5);
  margin-bottom: var(--kikii-space-6);
  border-radius: var(--kikii-radius);
  border-left: 3px solid var(--kikii-success);
  background: var(--kikii-success-soft);
}

.kikii-inquiry__error {
  border-left-color: var(--kikii-danger);
  background: #fdecec;
  font-weight: 600;
}

.kikii-inquiry__done-title {
  margin: 0 0 var(--kikii-space-2);
  font-family: var(--kikii-font-body);
  font-size: var(--kikii-fs-lg);
  font-weight: 800;
}

.kikii-inquiry__done p {
  margin: 0;
  font-size: var(--kikii-fs-sm);
  color: var(--kikii-text-soft);
}