/* Ortak kabuk. Kurulum sayfalarının dili, daha küçük ölçüyle. */
:root {
  --family-bg: #f2f5f4;
  --family-ink: #0f172a;
  --family-muted: #64748b;
  --family-line: #e2e8f0;
  --family-brand: #15803d;
  --family-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .28);
}
html, body {
  background: #f3f6f4 !important;
  color: var(--family-ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}
body.arif-app {
  background: #fffaf6 !important;
}
.page > .topbar,
.topbar,
header.top {
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(226, 232, 240, .95) !important;
  border-radius: 16px !important;
  box-shadow: var(--family-shadow) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar .brand img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}
.topbar .brand strong { font-size: 17px !important; }
.home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d7dee6;
  border-radius: 12px;
  background: #fff;
  color: #166534 !important;
  font-size: 0;
  line-height: 0;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.home-link svg { width: 18px; height: 18px; display: block; }
.home-link:hover { background: #f0fdf4; border-color: #86efac; }
body.arif-app .home-link { color: #c2410c !important; }
body.arif-app .home-link:hover { background: #fff7ed; border-color: #fdba74; }
.links { gap: 12px !important; }
.links .link,
.search-area,
.filters,
.store-card,
.login,
.hero,
.product,
.panel,
#setup,
.card {
  border-radius: 14px !important;
  border-color: var(--family-line) !important;
  background: #fff !important;
  box-shadow: var(--family-shadow) !important;
}
.hero::before,
.welcome::before {
  content: none !important;
  display: none !important;
}
.links .link {
  padding: 16px !important;
  gap: 10px !important;
  border-top-width: 1px !important;
}
.links .link:hover { transform: translateY(-2px); }
.links .link .icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
}
.links h2 { font-size: 17px !important; margin: 6px 0 4px !important; }
.links .link p { font-size: 13.5px !important; line-height: 1.45 !important; margin: 0 0 10px !important; }
.links .action { padding-top: 10px !important; font-size: 13px !important; }
.links .category {
  display: inline-flex;
  width: max-content;
  margin: 0 0 2px;
  padding: 2px 8px;
  border: 1px solid var(--family-line);
  border-radius: 999px;
  background: #f8fafc;
  font-size: 10px !important;
  letter-spacing: .06em;
}
.links .share-link { margin-top: 8px !important; padding: 4px 10px !important; font-size: 12px !important; }
#search-panel { padding: 16px !important; }
.login { padding: 20px 18px 16px !important; }
.login h2 { font-size: 18px !important; text-align: center; margin: 0 0 14px !important; letter-spacing: -.02em; }
.login-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border: 1px solid #d1fae5;
  border-radius: 12px;
  background: #f0fdf4;
  color: #15803d;
}
.login-mark svg { width: 18px; height: 18px; display: block; }
.login label { text-align: left; }
.login-field { position: relative; display: block; }
.login-field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: #64748b;
  pointer-events: none;
}
.login-hint {
  margin: 0;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.login-kicker,
.login-lead { display: none !important; }
.login-notes {
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.search-box button[type="submit"],
#login-submit,
#search-submit,
.btn-primary,
button.primary,
#start,
#again {
  border-radius: 12px !important;
  min-height: 44px;
  font-size: 15px !important;
}
#login-submit,
#search-form .search-box button[type="submit"],
.btn-primary,
.btn-primary.btn-primary--spectrum,
.topbar .install-button,
.topbar .btn-install,
.install {
  background: #15803d !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
}
#login-submit:hover,
.btn-primary:hover,
.btn-primary.btn-primary--spectrum:hover,
.topbar .install-button:hover,
.topbar .btn-install:hover {
  background: #166534 !important;
  background-image: none !important;
}
body.arif-app button.primary,
body.arif-app #start,
body.arif-app #again {
  background: #ea580c !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.arif-app button.primary:hover { background: #c2410c !important; }
body.arif-app button.primary:disabled {
  background: #f3efe8 !important;
  color: #8a5a12 !important;
}
header.top h1 { font-size: 18px !important; letter-spacing: -.02em; }
header.top .face { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
.page > footer,
footer.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  padding-top: 16px;
  border: 0;
  border-top: 1px solid #dbe3df;
  text-align: center;
  background: transparent;
}
.credit { margin: 0; text-align: center; }
.credit a {
  display: inline-block;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-decoration: none !important;
  background-image: linear-gradient(90deg, #166534, #22c55e, #facc15, #166534);
  background-size: 200% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: family-shine 3s linear infinite;
}
body.arif-app .credit a {
  background-image: linear-gradient(90deg, #c2410c, #fb923c, #facc15, #c2410c);
}
@keyframes family-shine {
  to { background-position: 200% center; }
}
.credit span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: #334155;
}
.site-notice {
  margin: 2px 0 0;
  max-width: 34em;
  color: var(--family-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
@media (prefers-reduced-motion: reduce) {
  .credit a, .links .link, .btn-primary { animation: none; transition: none; }
}
.links { align-items: start !important; }
.tabs {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 10px 10px 0 !important;
  gap: 8px !important;
}
.tabs button {
  border-radius: 12px !important;
  min-height: 40px;
  font-weight: 700 !important;
}
.tabs button[aria-selected="false"] {
  background: #fff !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}
.input-wrap input,
.search-box input,
.login input,
#query,
textarea,
select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background-color: #fff;
}
.login input {
  min-height: 44px !important;
  padding: 10px 12px 10px 40px !important;
  font-size: 16px !important;
}
#login-submit {
  min-height: 44px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}
input:focus,
textarea:focus,
select:focus,
.login input:focus {
  outline: none;
  border-color: #15803d !important;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .14) !important;
}
body.arif-app select:focus,
body.arif-app textarea:focus {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .16) !important;
}
#search-form .search-box button[type="submit"],
#scan-open {
  border-radius: 12px !important;
  min-height: 44px;
}
.product,
.store-card { padding: 14px !important; }
.main-code,
.extra-code { border-radius: 12px !important; }
.code-button { font-size: 22px !important; letter-spacing: 0 !important; }
.results-heading h2 { font-size: 16px !important; letter-spacing: -.02em; }
#status { color: #64748b !important; font-size: 13.5px !important; }
.store-code { border-radius: 8px !important; font-size: 16px !important; }
.region-badge { border-radius: 999px !important; }
.dropzone { border-radius: 16px !important; padding: 28px 16px !important; }
@media (max-width: 700px) {
  .links .link .icon { width: 46px !important; height: 46px !important; }
  .credit a { font-size: 17px; }
}
.topbar .install-button,
.topbar .btn-install,
.topbar .install,
header.top .install-button,
#install-app.install,
#install-app.install-button,
#installBtn,
#installBtn.btn.btn-install {
  box-sizing: border-box !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 0 !important;
}
.topbar .install-button[hidden],
.topbar .btn-install[hidden],
.topbar .install[hidden],
header.top .install-button[hidden],
#install-app[hidden],
#installBtn[hidden] {
  display: none !important;
}
.topbar .install-button svg,
.topbar .btn-install svg,
.topbar .install svg,
header.top .install-button svg,
#install-app svg,
#installBtn svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
}
.topbar .install-label,
header.top .install-label,
#install-app .install-label,
#installBtn .install-label,
.btn-install .install-label,
.install-button .install-label {
  display: none !important;
}
#filters.filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
#filters.filters > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 36px;
  padding: 6px 2px !important;
  border-radius: 12px;
  font-size: 12px !important;
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}