/* =====================================================================
   Ürün Gezgini — Component layer (v2 — premium/custom)
   ===================================================================== */

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-weight:var(--fw-semibold); font-size:var(--fs-sm2); padding:.7rem 1.15rem;
  border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer; line-height:1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary-700); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.15) inset, var(--shadow-sm); }
.btn-primary:hover{ background:var(--primary-800); box-shadow:var(--shadow-brand); }
.btn-accent{ background:var(--accent-500); color:var(--primary-900); }
.btn-accent:hover{ background:var(--accent-400); box-shadow:var(--shadow-accent); }
.btn-cheapest{ background:var(--cheapest-solid); color:#fff; }
.btn-cheapest:hover{ filter:brightness(.94); }
.btn-outline{ background:#fff; color:var(--primary-700); border-color:var(--color-border-mid); }
.btn-outline:hover{ border-color:var(--primary-400); background:var(--primary-50); }
.btn-ghost{ background:transparent; color:var(--color-text-soft); }
.btn-ghost:hover{ background:var(--ink-100); }
.btn-lg{ padding:.95rem 1.5rem; font-size:var(--fs-base); border-radius:var(--radius-lg); }
.btn-sm{ padding:.45rem .8rem; font-size:var(--fs-xs); border-radius:var(--radius-sm); }
.btn-block{ width:100%; }

/* ---------- Price-tag brand device ---------- */
/* the ownable shape derived from the logo's tag motif */
.pricetag{ position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .7rem .28rem 1.1rem; font-size:var(--fs-xs); font-weight:var(--fw-bold);
  background:var(--cheapest-solid); color:#fff; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); letter-spacing:.01em; }
.pricetag::before{ content:""; position:absolute; left:6px; top:50%; width:5px; height:5px;
  transform:translateY(-50%); border-radius:50%; background:rgba(255,255,255,.9); }
.pricetag--accent{ background:var(--accent-500); color:var(--primary-900); }
.pricetag--accent::before{ background:var(--primary-800); }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:.3em; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  padding:.22rem .55rem; border-radius:var(--radius-pill); line-height:1.35; white-space:nowrap; }
.badge-cheapest{ background:var(--cheapest-bg); color:var(--cheapest-fg); }
.badge-drop{ background:var(--success-bg); color:var(--success-fg); }
.badge-rise{ background:var(--error-bg); color:var(--error-fg); }
.badge-neutral{ background:var(--ink-100); color:var(--ink-600); }
.badge-accent{ background:var(--accent-100); color:var(--accent-900); }
.badge-lowest30{ background:var(--primary-50); color:var(--primary-700); }
.badge-live{ background:var(--cheapest-bg); color:var(--cheapest-fg); }
.badge-live .dot{ width:6px; height:6px; border-radius:50%; background:var(--cheapest-ring); box-shadow:0 0 0 0 rgba(11,138,95,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(11,138,95,.5);} 70%{ box-shadow:0 0 0 6px rgba(11,138,95,0);} 100%{ box-shadow:0 0 0 0 rgba(11,138,95,0);} }

/* ---------- Price lockup ---------- */
.price{ font-family:var(--font-price); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  font-weight:var(--fw-extra); color:var(--ink-950); letter-spacing:-.015em; line-height:1; display:inline-flex; align-items:baseline; gap:.12em; }
.price .cur{ font-size:.62em; font-weight:var(--fw-bold); color:var(--ink-500); }
.price .dec{ font-size:.66em; font-weight:var(--fw-bold); }
.price-xl{ font-size:2rem; } .price-lg{ font-size:1.5rem; } .price-md{ font-size:1.25rem; }
.price-old{ font-size:var(--fs-sm2); color:var(--ink-400); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.save-pill{ display:inline-flex; align-items:center; gap:.25rem; font-size:var(--fs-xs); font-weight:var(--fw-bold);
  color:var(--cheapest-fg); background:var(--cheapest-bg); padding:.12rem .45rem; border-radius:var(--radius-sm); }

/* ---------- Cards ---------- */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.card-hover:hover{ box-shadow:var(--shadow-lg); border-color:var(--ink-200); transform:translateY(-3px); }

/* Product card */
.product-card{ display:flex; flex-direction:column; overflow:hidden; height:100%; position:relative; }
.product-card__media{ aspect-ratio:4/3; background:radial-gradient(120% 100% at 50% 0,#fff,var(--ink-50)); display:grid; place-items:center; padding:var(--space-5); position:relative; }
.product-card__media img{ max-height:100%; width:auto; mix-blend-mode:multiply; transition:transform var(--dur-slow) var(--ease-out); }
.card-hover:hover .product-card__media img{ transform:scale(1.05); }
.product-card__tags{ position:absolute; top:var(--space-3); left:var(--space-3); display:flex; gap:.35rem; flex-wrap:wrap; z-index:2; }
.product-card__fav{ position:absolute; top:var(--space-3); right:var(--space-3); width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(4px); display:grid; place-items:center; color:var(--ink-500); box-shadow:var(--shadow-sm); z-index:2;
  opacity:0; transform:translateY(-4px); transition:all var(--dur) var(--ease); }
.product-card:hover .product-card__fav{ opacity:1; transform:none; }
.product-card__fav:hover{ color:var(--error-solid); }
.product-card__body{ padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.product-card__brand{ font-size:var(--fs-xs); color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em; font-weight:var(--fw-bold); }
.product-card__title{ font-size:var(--fs-sm2); font-weight:var(--fw-semibold); color:var(--ink-800); line-height:var(--lh-snug);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.product-card__title a{ color:inherit; }
.product-card__title a:hover{ color:var(--primary-700); text-decoration:none; }
.product-card__spark{ height:34px; margin:.1rem 0; }
.product-card__foot{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; }
.product-card__priceline{ display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; }
.product-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.6rem; border-top:1px dashed var(--ink-200); }

/* store logo stack */
.store-stack{ display:flex; align-items:center; }
.store-stack span{ width:22px; height:22px; border-radius:50%; border:2px solid #fff; margin-left:-7px; background:var(--ink-100);
  display:grid; place-items:center; font-size:9px; font-weight:var(--fw-bold); color:var(--ink-600); box-shadow:var(--shadow-xs); }
.store-stack span:first-child{ margin-left:0; }
.store-count{ font-size:var(--fs-xs); color:var(--color-text-soft); font-weight:var(--fw-medium); }

/* ---------- Category tile ---------- */
.cat-tile{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-5); background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg); color:var(--ink-700); transition:all var(--dur) var(--ease-out); position:relative; overflow:hidden; }
.cat-tile::after{ content:""; position:absolute; inset:auto -30% -60% auto; width:120px; height:120px; border-radius:50%;
  background:var(--accent-100); opacity:0; transition:opacity var(--dur) var(--ease); }
.cat-tile:hover{ text-decoration:none; border-color:var(--primary-200); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.cat-tile:hover::after{ opacity:.6; }
.cat-tile__icon{ width:46px; height:46px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--primary-50); color:var(--primary-700); position:relative; z-index:1; }
.cat-tile:hover .cat-tile__icon{ background:var(--grad-accent); color:var(--primary-900); }
.cat-tile__name{ font-weight:var(--fw-bold); font-size:var(--fs-sm2); color:var(--ink-900); position:relative; z-index:1; }
.cat-tile__count{ font-size:var(--fs-xs); color:var(--ink-500); position:relative; z-index:1; }

/* ---------- Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:var(--radius-pill); background:#fff;
  border:1px solid var(--color-border-mid); font-size:var(--fs-sm2); color:var(--color-text-soft); font-weight:var(--fw-medium); transition:all var(--dur) var(--ease); }
.chip:hover{ border-color:var(--primary-400); color:var(--primary-700); background:var(--primary-50); text-decoration:none; }
.chip svg{ color:var(--ink-400); }

/* ---------- Search (mega) ---------- */
.search{ display:flex; align-items:center; width:100%; background:#fff; border:1.5px solid var(--color-border-mid);
  border-radius:var(--radius-pill); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); position:relative; }
.search:focus-within{ border-color:var(--primary-500); box-shadow:var(--shadow-focus); }
.search__scope{ display:flex; align-items:center; gap:.4rem; padding:0 .9rem 0 1.1rem; font-size:var(--fs-sm2); font-weight:var(--fw-semibold);
  color:var(--ink-700); border-right:1px solid var(--ink-200); white-space:nowrap; align-self:center; height:60%; }
.search input{ flex:1; border:none; outline:none; padding:.85rem 1rem; font-size:var(--fs-base); background:transparent; min-width:0; }
.search__btn{ border:none; background:var(--primary-700); color:#fff; width:46px; height:46px; margin:5px; border-radius:var(--radius-pill);
  display:grid; place-items:center; cursor:pointer; flex:none; transition:background var(--dur) var(--ease); }
.search__btn:hover{ background:var(--primary-800); }
.search-lg input{ padding:1.05rem 1.1rem; font-size:var(--fs-md); }
.search-lg .search__btn{ width:52px; height:52px; }

/* live suggestion dropdown (design detail) */
.suggest{ position:absolute; top:calc(100% + 10px); left:0; right:0; background:#fff; border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:.5rem; z-index:var(--z-dropdown); text-align:left; }
.suggest__group{ font-size:var(--fs-xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); padding:.5rem .75rem .25rem; }
.suggest__item{ display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:var(--radius-md); color:var(--ink-700); }
.suggest__item:hover, .suggest__item.is-active{ background:var(--primary-50); text-decoration:none; color:var(--primary-800); }
.suggest__item .thumb{ width:34px; height:34px; border-radius:8px; background:var(--ink-50); display:grid; place-items:center; flex:none; }
.suggest__item .from{ margin-left:auto; font-size:var(--fs-xs); color:var(--ink-500); }
.suggest__item .from b{ color:var(--cheapest-fg); font-variant-numeric:tabular-nums; }

/* ---------- Header ---------- */
.utilbar{ background:var(--primary-950); color:var(--primary-100); font-size:var(--fs-xs); }
.utilbar__row{ display:flex; align-items:center; gap:var(--space-4); height:34px; }
.utilbar a{ color:var(--primary-100); }
.utilbar a:hover{ color:#fff; }
.utilbar .spacer{ margin-left:auto; }
.utilbar strong{ color:var(--accent-400); font-variant-numeric:tabular-nums; }
.util-hide{ display:none; }

.site-header{ position:sticky; top:0; z-index:var(--z-header); background:rgba(255,255,255,.85); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--color-border); }
.site-header__row{ display:flex; align-items:center; gap:var(--space-4); height:var(--header-h); }
.brand{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-weight:800; font-size:var(--fs-lg); color:var(--primary-700); letter-spacing:-.02em; flex:none; }
.brand__mark{ display:grid; place-items:center; width:38px; height:38px; background:var(--primary-700); border-radius:11px; padding:5px; flex:none; }
.brand__mark img{ width:100%; height:auto; display:block; }
.brand:hover{ text-decoration:none; }
.header-search{ flex:1; max-width:600px; display:none; }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--space-1); flex:none; }
.icon-btn{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border-radius:var(--radius-md); color:var(--ink-700); font-size:var(--fs-sm2); font-weight:var(--fw-medium); position:relative; }
.icon-btn:hover{ background:var(--ink-100); text-decoration:none; color:var(--primary-700); }
.icon-btn .count{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; background:var(--accent-500); color:var(--primary-900); font-size:10px; font-weight:var(--fw-bold); border-radius:999px; display:grid; place-items:center; }
.lbl-hide{ display:none; }

/* category nav */
.cat-nav{ background:#fff; border-bottom:1px solid var(--color-border); }
.cat-nav__list{ display:flex; gap:var(--space-1); overflow-x:auto; padding:.4rem 0; scrollbar-width:none; }
.cat-nav__list::-webkit-scrollbar{ display:none; }
.cat-nav__list a{ white-space:nowrap; padding:.5rem .8rem; border-radius:var(--radius-md); font-size:var(--fs-sm2); font-weight:var(--fw-medium); color:var(--ink-600); }
.cat-nav__list a:hover{ background:var(--primary-50); color:var(--primary-700); text-decoration:none; }
.cat-nav__list a.all{ color:var(--primary-700); font-weight:var(--fw-bold); }

/* ---------- Hero (asymmetric editorial) ---------- */
.hero{ position:relative; background:var(--grad-hero), var(--paper); overflow:hidden; padding-block:var(--space-16) var(--space-20); }
.hero__grid{ display:grid; gap:var(--space-10); grid-template-columns:1fr; align-items:center; }
.hero__title{ font-size:var(--fs-4xl); color:var(--ink-950); }
.hero__title .hl{ position:relative; white-space:nowrap; color:var(--primary-700); }
.hero__title .hl::after{ content:""; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.34em; background:var(--accent-400); z-index:-1; border-radius:3px; transform:rotate(-1.2deg); }
.hero__lead{ margin-top:var(--space-4); font-size:var(--fs-md); color:var(--ink-600); max-width:46ch; }
.hero__search{ margin-top:var(--space-6); }
.hero__search .search{ box-shadow:var(--shadow-lg); border-color:transparent; }
.hero__chips{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); align-items:center; }
.hero__chips .k{ font-size:var(--fs-xs); color:var(--ink-500); font-weight:var(--fw-semibold); }
.hero__proof{ display:flex; gap:var(--space-6); margin-top:var(--space-8); flex-wrap:wrap; }
.hero__proof .n{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--ink-950); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.hero__proof .l{ font-size:var(--fs-xs); color:var(--ink-500); }
.hero__deco{ position:absolute; pointer-events:none; opacity:.5; }

/* live ticker card (signature element) */
.ticker{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.ticker__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border); }
.ticker__head h3{ font-size:var(--fs-base); }
.ticker__view{ height:322px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); }
.ticker__track{ display:flex; flex-direction:column; animation:tickerUp 22s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__row{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--ink-100); }
.ticker__row .th{ width:42px; height:42px; border-radius:10px; background:var(--ink-50); display:grid; place-items:center; flex:none; }
.ticker__row .nm{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink-800); line-height:1.25; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ticker__row .st{ font-size:var(--fs-xs); color:var(--ink-500); }
.ticker__row .pr{ margin-left:auto; text-align:right; flex:none; }
.ticker__row .pr .now{ font-weight:var(--fw-extra); font-variant-numeric:tabular-nums; color:var(--ink-950); }
.ticker__row .pr .chg{ font-size:var(--fs-xs); color:var(--cheapest-fg); font-weight:var(--fw-bold); }

/* ---------- Stat band ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ink-200); border:1px solid var(--ink-200); border-radius:var(--radius-lg); overflow:hidden; }
.stats__c{ background:#fff; padding:var(--space-5) var(--space-4); text-align:center; }
.stats__n{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--primary-700); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.stats__l{ font-size:var(--fs-xs); color:var(--ink-500); margin-top:.15rem; }

/* ---------- Section head ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); }
.section-head h2{ margin:0; }
.section-head p{ margin-top:.35rem; }
.section-head a{ font-size:var(--fs-sm2); font-weight:var(--fw-semibold); white-space:nowrap; }

/* ---------- How it works ---------- */
.steps{ display:grid; grid-template-columns:1fr; gap:var(--space-5); counter-reset:step; }
.step{ background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); position:relative; }
.step__ic{ width:48px; height:48px; border-radius:var(--radius-md); background:var(--primary-50); color:var(--primary-700); display:grid; place-items:center; margin-bottom:var(--space-4); }
.step__n{ position:absolute; top:var(--space-5); right:var(--space-5); font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--ink-100); line-height:1; }
.step h3{ font-size:var(--fs-md); margin-bottom:.35rem; }

/* ---------- Alert CTA ---------- */
.cta-alert{ background:var(--grad-primary); color:#fff; border-radius:var(--radius-2xl); padding:var(--space-10); position:relative; overflow:hidden; box-shadow:var(--shadow-brand); }
.cta-alert h2{ color:#fff; }
.cta-alert p{ color:var(--primary-100); max-width:48ch; margin-top:var(--space-3); }
.cta-alert__deco{ position:absolute; right:-40px; top:-40px; width:260px; height:260px; background:radial-gradient(circle,rgba(255,190,0,.35),transparent 70%); }

/* ---------- Compare tray ---------- */
.compare-tray{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tray); transform:translateY(120%); transition:transform var(--dur) var(--ease-out); }
.compare-tray.is-open{ transform:none; }
.compare-tray__inner{ background:var(--ink-950); color:#fff; border-radius:var(--radius-lg) var(--radius-lg) 0 0; box-shadow:var(--shadow-lg); padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); }
.compare-tray__slots{ display:flex; gap:var(--space-3); flex:1; }
.compare-slot{ width:52px; height:52px; border-radius:var(--radius-md); border:1.5px dashed var(--ink-600); display:grid; place-items:center; background:var(--ink-900); }

/* ---------- Skeleton ---------- */
.skeleton{ background:linear-gradient(90deg,var(--ink-100) 25%,var(--ink-200) 37%,var(--ink-100) 63%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-sm); }

/* ---------- Grids ---------- */
.grid{ display:grid; gap:var(--space-4); }
.grid-products{ grid-template-columns:repeat(2,1fr); }
.grid-cats{ grid-template-columns:repeat(2,1fr); }

@media (min-width:560px){ .util-hide{ display:inline; } }
@media (min-width:640px){
  .grid-products{ grid-template-columns:repeat(3,1fr); }
  .grid-cats{ grid-template-columns:repeat(4,1fr); }
  .header-search{ display:block; }
  .stats{ grid-template-columns:repeat(4,1fr); }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .lbl-hide{ display:inline; }
}
@media (min-width:900px){
  .grid-products{ grid-template-columns:repeat(4,1fr); }
  .grid-cats{ grid-template-columns:repeat(6,1fr); }
  .hero__grid{ grid-template-columns:1.15fr .85fr; }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink-950); color:var(--ink-300); margin-top:var(--space-24); }
.site-footer a{ color:var(--ink-300); }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); padding-block:var(--space-16); }
.footer-grid h4{ color:#fff; margin-bottom:var(--space-4); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-body); font-weight:var(--fw-bold); }
.footer-grid ul{ display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--fs-sm2); }
.footer-bottom{ border-top:1px solid var(--ink-800); padding-block:var(--space-6); font-size:var(--fs-xs); color:var(--ink-500); display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; }
@media (min-width:760px){ .footer-grid{ grid-template-columns:2.2fr 1fr 1fr 1fr; } }

/* ---------- Form controls ---------- */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.label{ font-size:var(--fs-sm2); font-weight:var(--fw-semibold); color:var(--ink-800); }
.field__hint{ font-size:var(--fs-xs); color:var(--ink-500); }
.field__error{ font-size:var(--fs-xs); color:var(--error-fg); font-weight:var(--fw-medium); }

.input, .select, textarea.input{
  width:100%; font-family:inherit; font-size:var(--fs-base); color:var(--ink-900);
  background:var(--surface-2); border:1.5px solid var(--ink-200); border-radius:var(--radius-md);
  padding:.72rem .9rem; line-height:1.4; -webkit-appearance:none; appearance:none;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder, textarea.input::placeholder{ color:var(--ink-400); }
.input:hover, .select:hover, textarea.input:hover{ border-color:var(--ink-300); }
.input:focus, .select:focus, textarea.input:focus{
  outline:none; border-color:var(--primary-500); background:#fff;
  box-shadow:0 0 0 3px rgba(75,0,129,.14);
}
.input[aria-invalid="true"], .input.is-invalid{ border-color:var(--error-solid); }
textarea.input{ resize:vertical; min-height:104px; line-height:1.6; }
.select{
  padding-right:2.4rem; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .85rem center;
}

/* input with a leading icon */
.input-icon{ position:relative; }
.input-icon > svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--ink-400); pointer-events:none; }
.input-icon .input{ padding-left:2.5rem; }

.check{ display:inline-flex; align-items:center; gap:.55rem; font-size:var(--fs-sm2); color:var(--ink-700); cursor:pointer; user-select:none; }
.check input[type="checkbox"]{ width:1.15em; height:1.15em; accent-color:var(--primary-700); cursor:pointer; flex:none; }

/* ---------- Alert / inline message ---------- */
.alert{ display:flex; gap:.6rem; align-items:flex-start; padding:.8rem 1rem; border-radius:var(--radius-md); font-size:var(--fs-sm2); font-weight:var(--fw-medium); line-height:1.45; }
.alert--error{ background:var(--error-bg); color:var(--error-fg); }
.alert--ok{ background:var(--success-bg); color:var(--success-fg); }
.alert--info{ background:var(--info-bg); color:var(--info-fg); }

/* ---------- Auth card ---------- */
.auth{ min-height:calc(100vh - var(--header-h) - 120px); display:grid; place-items:center; padding:var(--space-10) var(--space-4); background:var(--grad-hero), var(--paper); }
.auth-card{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:var(--space-8); }
.auth-card__brand{ display:flex; align-items:center; gap:.6rem; justify-content:center; margin-bottom:var(--space-6); font-family:var(--font-display); font-weight:800; color:var(--primary-700); font-size:var(--fs-lg); }
.auth-card h1{ font-size:var(--fs-xl); text-align:center; }
.auth-card__sub{ color:var(--ink-500); text-align:center; margin:.4rem 0 var(--space-6); font-size:var(--fs-sm2); }
.auth-card__foot{ text-align:center; margin-top:var(--space-6); font-size:var(--fs-sm2); color:var(--ink-500); }
.auth-card__foot a{ font-weight:var(--fw-semibold); }

/* ---------- Cookie consent ---------- */
.cookie-consent{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-toast); background:var(--ink-950); color:var(--ink-200); box-shadow:0 -4px 24px rgba(0,0,0,.25); }
.cookie-consent__inner{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-5); flex-wrap:wrap; }
.cookie-consent p{ font-size:var(--fs-sm2); margin:0; flex:1; min-width:220px; line-height:1.5; }
.cookie-consent a{ color:var(--accent-400); text-decoration:underline; }
.cookie-consent__actions{ flex:none; display:flex; gap:var(--space-2); }

/* ---------- Mobile menu drawer ---------- */
.nav-toggle{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:var(--radius-md); color:var(--ink-700); flex:none; }
.nav-toggle:hover{ background:var(--ink-100); }
@media (min-width:640px){ .nav-toggle{ display:none; } }

.drawer{ position:fixed; inset:0; z-index:var(--z-modal); visibility:hidden; }
.drawer.is-open{ visibility:visible; }
.drawer__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.5); opacity:0; transition:opacity var(--dur) var(--ease); }
.drawer.is-open .drawer__overlay{ opacity:1; }
.drawer__panel{ position:absolute; top:0; left:0; bottom:0; width:min(86vw, 340px); background:#fff; box-shadow:var(--shadow-lg);
  transform:translateX(-100%); transition:transform var(--dur) var(--ease-out); display:flex; flex-direction:column; overflow-y:auto; }
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--color-border); }
.drawer__body{ padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; }
.drawer__link{ display:flex; align-items:center; gap:.7rem; padding:.7rem .2rem; color:var(--ink-800); font-weight:var(--fw-medium); }
.drawer__link:hover{ color:var(--primary-700); text-decoration:none; }
.drawer__sec{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); font-weight:var(--fw-bold); margin:var(--space-5) 0 .2rem; }

/* ---------- FAQ accordion (native details/summary) ---------- */
.faq{ max-width:760px; }
.faq details{ border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--surface); margin-bottom:var(--space-3); overflow:hidden; }
.faq summary{ cursor:pointer; padding:var(--space-4) var(--space-5); font-weight:var(--fw-semibold); color:var(--ink-900); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; line-height:1; color:var(--primary-500); flex:none; }
.faq details[open] summary::after{ content:"\2212"; }
.faq details[open] summary{ border-bottom:1px solid var(--color-border); }
.faq__body{ padding:var(--space-4) var(--space-5); color:var(--ink-700); line-height:1.7; }
.faq__body a{ color:var(--primary-700); text-decoration:underline; }