/*
 * Arayüz katmanı: bildirimler, perde, çerez bandı, WhatsApp düğmesi ve
 * hareket kuralları.
 *
 * Hareket bütçesi burada tanımlı ve dardır. Üç gösteri hareketi var
 * (giriş dizisi, numune şeridi, plaka döngüsü); geri kalan her hareket
 * kullanıcının bir eylemine cevaptır ve neyin değiştiğini gösterir.
 */

/* ======================================================================
   GİRİŞ DİZİSİ
   ====================================================================== */

/*
 * Sayfa yüklenirken TEK orkestre edilmiş an. Okuma sırasıyla açılıyor:
 * etiket, başlık, açıklama, düğmeler, numune. Her bölümün kaydırmayla
 * ayrı ayrı belirmesi değil; o dağınık kalıp sayfayı yapay gösteriyor.
 */
@media (prefers-reduced-motion: no-preference) {
  .js [data-enter] {
    opacity: 0;
    transform: translateY(12px);
    animation: enter-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--enter, 0) * 90ms + 60ms);
  }

  .js [data-enter="shot"] {
    transform: translateY(20px) scale(0.985);
    animation-name: enter-shot;
    animation-duration: 900ms;
  }
}

@keyframes enter-rise {
  to { opacity: 1; transform: none; }
}

@keyframes enter-shot {
  to { opacity: 1; transform: none; }
}

/* ======================================================================
   KAYDIRMAYLA BELİRME
   ====================================================================== */

/*
 * Ölçülü: 14 piksel ve solma, bir kez. Daha uzun bir yol ya da ölçek
 * değişimi, sayfayı kaydırırken içeriğin zıpladığı hissini veriyordu.
 * Yalnızca bölüm başlıklarında ve ızgara ögelerinde kullanılıyor.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-enter] { opacity: 1; transform: none; transition: none; animation: none; }
}

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

.toasts {
  position: fixed;
  inset-block-start: var(--s5);
  inset-inline-end: var(--s5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s2);
  width: min(360px, calc(100vw - var(--s8)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: start;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  font-size: var(--t-small);
  pointer-events: auto;
  animation: toast-in 280ms var(--ease-out) both;
}

.toast::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--muted);
}

.toast--success::before { background: var(--ok); }
.toast--warning::before { background: var(--warn); }
.toast--error::before   { background: var(--err); }
.toast--info::before    { background: var(--accent); }

.toast__body { flex: 1 1 auto; display: grid; gap: 2px; }
.toast__title { font-weight: 600; }
.toast__text { color: var(--ink-soft); }

.toast__close {
  flex: none;
  padding: 0 var(--s1);
  border: 0;
  background: none;
  color: var(--faint);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.toast__close:hover { color: var(--ink); }
.toast.is-leaving { animation: toast-out 200ms var(--ease) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(16px); }
}

@media (max-width: 559px) {
  .toasts { inset-inline: var(--s4); width: auto; }
}

/* ======================================================================
   BEKLEME
   ====================================================================== */

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--rule-strong);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.spinner--lg { width: 26px; height: 26px; border-width: 2px; }

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

.veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  background: rgb(16 18 21 / 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.veil[hidden] { display: none !important; }

.veil__box {
  display: grid;
  gap: var(--s3);
  justify-items: center;
  width: min(320px, calc(100vw - var(--s8)));
  padding: var(--s6);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.veil__title { font-weight: 600; }
.veil__note { font-size: var(--t-small); color: var(--muted); }

.veil__bar {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--wash);
}

.veil__bar::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 40%;
  background: var(--accent);
  animation: veil-slide 1.2s var(--ease) infinite;
}

@keyframes veil-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(280%); }
}

/* Gönderilen form düğmesi: eylemin alındığını gösteren geri bildirim. */
.btn[data-busy] { pointer-events: none; opacity: 0.65; }

/* ======================================================================
   ÇEREZ BANDI
   ====================================================================== */

.cookiebar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-drawer);
  border-block-start: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: bar-up 320ms var(--ease-out) both;
  animation-delay: 900ms;
}

.cookiebar[hidden] { display: none !important; }

.cookiebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  max-width: var(--paper-width);
  margin-inline: auto;
  padding: var(--s4) var(--gutter);
}

.cookiebar__text { max-width: 68ch; font-size: var(--t-small); color: var(--ink-soft); }
.cookiebar__text a { color: var(--accent); }
.cookiebar__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

@keyframes bar-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* ======================================================================
   WHATSAPP
   ====================================================================== */

.wa {
  position: fixed;
  inset-block-end: var(--s5);
  inset-inline-end: var(--s5);
  z-index: var(--z-drawer);
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
}

.wa__tip {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-touch);
  background: var(--ink);
  color: #fff;
  font-size: var(--t-caption);
  font-variation-settings: "wdth" var(--w-narrow);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}

.wa:hover .wa__tip,
.wa:focus-visible .wa__tip { opacity: 1; transform: none; }

.wa__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /*
   * WhatsApp yeşili yerine marka rengi: sayfada markayla uyuşmayan tek renk
   * buydu. Tanınırlığı logo taşıyor. Beyaz ikon bu zeminde 5.3:1.
   */
  background: var(--brand-deep);
  color: #fff;
  box-shadow: var(--shadow-float);
  transition: transform var(--t-normal) var(--ease-out), background var(--t-micro) var(--ease);
}

.wa:hover .wa__dot { background: var(--brand-darker); transform: scale(1.06); }
.wa:active .wa__dot { transform: scale(0.98); }

/*
 * Kırmızı zeminde sık ve belirgin titreşim alarm gibi okunuyor; halka daha
 * şeffaf ve daha yavaş.
 */
.wa__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.25;
  animation: wa-ping 4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/*
 * İkon artık SVG değil, Font Awesome yazı tipi glifi. Genişlik ve yükseklik
 * vermek onu 28x28 bir kutuya oturtuyor ama glifin kendisi 16px kalıp
 * kutunun sol üstüne yaslanıyordu; simge merkezden kayık görünüyordu.
 * Yazı tipi gliflerinin ölçüsü font-size ile verilir.
 */
.wa__icon {
  position: relative;
  z-index: 1;
  font-size: 27px;
  line-height: 1;
}

@keyframes wa-ping {
  75%, 100% { transform: scale(1.7); opacity: 0; }
}

@media (max-width: 639px) {
  .wa { inset-block-end: var(--s4); inset-inline-end: var(--s4); }
  .wa__tip { display: none; }
  .wa__dot { width: 48px; height: 48px; }
  .wa__icon { font-size: 24px; }
}

/* Çerez bandı açıkken WhatsApp düğmesi bandın üstüne çıkıyor. */
body:has(.cookiebar:not([hidden])) .wa { inset-block-end: calc(var(--s5) + 96px); }

@media (prefers-reduced-motion: reduce) {
  .toast, .cookiebar { animation: none; }
  .spinner, .veil__bar::after { animation-duration: 2s; }
  .wa__dot, .wa__tip { transition: none; }
  .wa__ping { animation: none; opacity: 0; }
}


/* --- Tema düğmesi ve koyu tema ince ayarları --------------------------- */

.theme-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: var(--r-touch);
  background: none; color: var(--ink-soft); cursor: pointer;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.theme-btn:hover { background: var(--wash); color: var(--ink); }
.theme-btn__sun, [data-theme="dark"] .theme-btn__moon { display: none; }
[data-theme="dark"] .theme-btn__sun { display: inline; }

/* Açık temaya göre yazılmış sabit kenar renkleri. */
[data-theme="dark"] .notice--bad,
[data-theme="dark"] .state--cancelled,
[data-theme="dark"] .state--rejected { border-color: #5a2d33; }
[data-theme="dark"] .notice--good,
[data-theme="dark"] .state--delivered,
[data-theme="dark"] .state--rev-done { border-color: #2c4a37; }
[data-theme="dark"] .notice--warn,
[data-theme="dark"] .state--building,
[data-theme="dark"] .state--rev-awaiting_payment,
[data-theme="dark"] .state--rev-requested { border-color: #5a4523; }
[data-theme="dark"] .btn--soft:hover { background: #47292d; }
/* Ürün ekran görüntüleri açık sitelerin; koyu tuvalde kenarsız parlamasınlar. */
[data-theme="dark"] .plate img, [data-theme="dark"] .show img { outline: 1px solid var(--rule); outline-offset: -1px; }
/* Açık temada koyu kırmızı ya da koyu dolgu olan küçük yerler. */
[data-theme="dark"] .worth__n,
[data-theme="dark"] .numbers b { color: var(--brand); }
[data-theme="dark"] .wa__tip { background: var(--wash); color: var(--ink); box-shadow: var(--shadow-card); }

/* Panelde e-posta doğrulama uyarısı. */
.verify-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-start: var(--s5); }
.verify-note span { flex: 1 1 32ch; }

/* --- Telefon menüsü (767 px ve altı) ------------------------------------ */

.menu-btn, .nav-only-phone { display: none; }

@media (max-width: 767px) {
  .menu-btn {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--r-touch);
    background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.125rem;
  }
  .menu-btn__close, .is-menu-open .menu-btn__open { display: none; }
  .is-menu-open .menu-btn__close { display: inline; }

  .masthead__inner { row-gap: 0; }
  .masthead__inner::after { display: none; }
  .masthead__end { gap: var(--s1); }
  .masthead__end .btn--text { padding-inline: var(--s2); }
  /* Logo + tema + menü düğmesi tek satıra sığsın: giriş menünün içinde. */
  .masthead__login, .who__name, .who__caret { display: none; }
  .is-menu-open .nav-only-phone { display: flex; }

  /* Kapalıyken menü yok; açılınca tam genişlik dikey liste. */
  .masthead__nav { display: none; }
  .is-menu-open .masthead__nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    overflow: visible; padding-block: var(--s2) var(--s4);
    border-block-start: 1px solid var(--rule);
    font-size: 1rem;
  }
  .is-menu-open .masthead__nav a,
  .is-menu-open .navdrop__btn { display: flex; align-items: center; min-height: 44px; padding-inline: var(--s3); width: 100%; }
  .is-menu-open .navdrop { display: block; }
  .is-menu-open .navdrop__btn { justify-content: space-between; }
  .is-menu-open .navdrop__menu { position: static; width: 100%; box-shadow: none; margin-block: var(--s1); }
}

/* Dokunma hedefi: dar ekranda tek başına duran küçük bağlantılar 44 piksel. */
.tiers dt a { display: inline-flex; align-items: center; min-height: 44px; }
/* Cümle içindeki bağlantı düzeni bozmadan daha geniş tıklanır. */
.waitlist__note a { padding-block: 10px; }

/* Uzun kelime, e-posta ya da alan adı dar ekranda kutudan taşmasın. */
p, li, dt, dd, td, th, h1, h2, h3, h4, blockquote, figcaption, label { overflow-wrap: break-word; }

/* En dar telefonlar (320 px): logo ve iki düğme tek satıra sığsın. */
@media (max-width: 359px) {
  .masthead__inner { column-gap: var(--s2); }
  .mark__title { font-size: 0.95em; }
  .masthead__end .theme-btn { width: 36px; }
}

/* Sipariş sayfasında yenileme uyarısı. */
.renew-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-start: var(--s4); }
.renew-note span { flex: 1 1 30ch; }
[data-theme="dark"] .notice > i:first-child { color: var(--brand); }