/* Homepage mockup — WebsitesForChildren.com */
.hp {
  --hp-blue: #1a73e8;
  --hp-blue-dark: #0a1931;
  --hp-green: #22c55e;
  --hp-green-dark: #16a34a;
  --hp-sky: #e8f4fc;
  --hp-card: #ffffff;
  --hp-shadow: 0 8px 32px rgba(30, 58, 95, 0.1);
  --hp-radius: 20px;
  --hp-accent: #ffb800;
  --hp-text-muted: #4b5563;
}

/* Hero — arka plan görseli sağ alttan */
.hp-hero {
  position: relative;
  max-height: 530px;
  min-height: 530px;
  padding: 2rem 0 2.25rem;
  overflow: hidden;
  background-color: #e0f2fe;
  background-image: var(--hp-hero-bg);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 530px;
}

.hp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.72) 46%,
    rgba(255, 255, 255, 0.18) 62%,
    transparent 76%
  );
  pointer-events: none;
}

.hp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.hp-hero-copy {
  max-width: min(820px, 62%);
  padding-inline-start: 120px;
}

/* Üst rozet — The World's Trusted */
.hp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0.45rem 0.95rem;
  background: #fff;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 18px rgba(29, 78, 216, 0.14);
  border: 1px solid rgba(191, 219, 254, 0.8);
}

.hp-badge-shield {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231d4ed8'%3E%3Cpath d='M12 2l8 3v5.5c0 4.9-3.4 9.5-8 10.5-4.6-1-8-5.6-8-10.5V5l8-3zm3.2 7.8l-4.2 4.2-2-2-1.4 1.4 3.4 3.4 5.6-5.6-1.4-1.4z'/%3E%3C/svg%3E");
}

/* Başlık — mockup tipografi */
.hp-hero-title {
  margin: 0 0 0.75rem;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hp-hero-title-line1 {
  display: block;
  font-size: clamp(1.75rem, 3.6vw, 2.65rem);
}

.hp-hero-title-line2 {
  display: block;
  position: relative;
  font-size: clamp(1.75rem, 3.6vw, 2.65rem);
  padding-top: 0.15rem;
}

.hp-title-blue {
  color: var(--hp-blue);
}

.hp-title-navy {
  color: var(--hp-blue-dark);
}

.hp-title-swoosh {
  position: absolute;
  left: 0.1rem;
  top: 0.05rem;
  width: min(220px, 72%);
  height: 11px;
  background: no-repeat left center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 9 Q70 2 140 6 T198 4' stroke='%23ffb800' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
}

.hp-hero-sub {
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--hp-text-muted);
  line-height: 1.6;
  max-width: min(680px, 100%);
  margin-bottom: 1rem;
}

.hp-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.35rem;
  margin-bottom: 1.1rem;
}

.hp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--hp-blue-dark);
}

.hp-trust-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff center/15px no-repeat;
  box-shadow: 0 2px 8px rgba(10, 25, 49, 0.08);
}

.hp-trust-icon.t1 {
  background-color: #dcfce7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316a34a'%3E%3Cpath d='M12 2l8 3v5.5c0 4.9-3.4 9.5-8 10.5-4.6-1-8-5.6-8-10.5V5l8-3zm3.2 7.8l-4.2 4.2-2-2-1.4 1.4 3.4 3.4 5.6-5.6-1.4-1.4z'/%3E%3C/svg%3E");
}

.hp-trust-icon.t2 {
  background-color: #ede9fe;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed'%3E%3Cpath d='M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zm-8 0c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3zm0 2c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4zm8 0c-.3 0-.7 0-1 .1 1.2.9 2 2.2 2 3.9v2h6v-2c0-2.7-5.3-4-8-4z'/%3E%3C/svg%3E");
}

.hp-trust-icon.t3 {
  background-color: #ffedd5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea580c'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E");
}

.hp-search-wrap {
  max-width: 100%;
  position: relative;
  z-index: 99;
}

.hp-filter-form {
  background: #fff;
  border-radius: 18px;
  padding: 0.85rem 1rem;
  box-shadow: 0 12px 40px rgba(30, 58, 138, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.9);
  max-width: 100%;
  position: relative;
  overflow: visible;
}

.hp-filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.5rem;
  overflow: visible;
}

.hp-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: #475569;
  flex: 1 1 0;
  min-width: 0;
}

.hp-filter-field--name {
  flex: 1.35 1 140px;
}

.hp-filter-field--lang {
  flex: 0.9 1 0;
  min-width: 7.5rem;
  position: relative;
  z-index: 99;
}

.hp-lang-select {
  position: relative;
  z-index: 99;
}

.hp-lang-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  color: #1e293b;
  background: #fff;
  cursor: pointer;
  text-align: left;
  outline: none;
  min-height: 38px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hp-lang-select-toggle:hover {
  border-color: #bfdbfe;
}

.hp-lang-select-toggle:focus,
.hp-lang-select-toggle[aria-expanded="true"] {
  border-color: var(--hp-blue);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.hp-lang-select-value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-lang-select-value .fi {
  width: 1.1rem;
  height: 0.82rem;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.hp-lang-select-chevron {
  width: 0.55rem;
  height: 0.55rem;
  flex-shrink: 0;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.15s ease;
}

.hp-lang-select-toggle[aria-expanded="true"] .hp-lang-select-chevron {
  transform: rotate(-135deg) translateY(1px);
}

.hp-lang-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 99;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
  max-height: 260px;
  overflow-y: auto;
}

.hp-lang-select-menu--wide {
  min-width: 14rem;
}

.hp-lang-select-menu.is-open,
.hp-lang-select-menu.is-portaled {
  position: fixed !important;
  z-index: 10001 !important;
}

.hp-lang-select-menu[hidden] {
  display: none !important;
}

.hp-name-suggest.is-open,
.hp-name-suggest.is-portaled {
  position: fixed !important;
  z-index: 10001 !important;
}

.hp-lang-select-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.hp-lang-select-option:hover,
.hp-lang-select-option:focus-visible {
  background: #eff6ff;
  outline: none;
}

.hp-lang-select-option .fi {
  width: 1.15rem;
  height: 0.85rem;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.hp-name-ac {
  position: relative;
}

.hp-name-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 99;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 240px;
  overflow-y: auto;
}

.hp-name-suggest-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  text-decoration: none !important;
  color: inherit;
  box-sizing: border-box;
}

.hp-name-suggest-btn:hover,
.hp-name-suggest-btn.is-active {
  background: #eff6ff;
}

.hp-name-suggest-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f2d5c;
}

.hp-name-suggest-url {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-filter-field input,
.hp-filter-field select {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 600;
  color: #1e293b;
  background: #fff;
  outline: none;
  width: 100%;
}

.hp-filter-field input:focus,
.hp-filter-field select:focus {
  border-color: var(--hp-blue);
}

.hp-filter-submit {
  flex: 0 0 auto;
  align-self: flex-end;
  border: none;
  background: var(--hp-blue);
  color: #fff;
  font-weight: 800;
  padding: 0.58rem 1.35rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  white-space: nowrap;
  min-height: 38px;
}

.hp-filter-submit:hover {
  background: #1d4ed8;
}

.hp-popular {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

.hp-popular a {
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
}

.hp-popular a:hover {
  border-color: var(--hp-blue);
  color: var(--hp-blue);
}

/* Stats bar — kompakt */
.hp-stats {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(30, 58, 95, 0.08);
  margin: -1.25rem auto 1.75rem;
  position: relative;
  z-index: 2;
  width: min(880px, 92%);
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.65rem 0.5rem;
  border: 1px solid #e8eef4;
}

.hp-stat {
  text-align: center;
  padding: 0.35rem 0.4rem;
  border-right: 1px solid #f1f5f9;
}

.hp-stat:last-child { border-right: none; }

.hp-stat-icon {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  line-height: 1;
}

.hp-stat strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hp-blue-dark);
  line-height: 1.2;
}

.hp-stat span {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1.25;
}

/* Explore */
.hp-section {
  padding: 2rem 0 2.5rem;
}

.hp-section .container {
  max-width: 1100px;
}

.hp-explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.hp-block-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--hp-blue-dark);
  margin-bottom: 1.15rem;
}

.hp-age-block {
  margin-bottom: 2.25rem;
}

.hp-age-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.hp-age-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 0.3rem;
  padding: 0.65rem 0.5rem 0.55rem;
  border-radius: 18px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(10, 25, 49, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.85);
  min-height: 110px;
}

.hp-age-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(10, 25, 49, 0.1);
}

.hp-age-card.tone-preschool {
  background: #fff7ed;
}
.hp-age-card.tone-preschool .hp-age-range,
.hp-age-card.tone-preschool .hp-age-label { color: #ea580c; }

.hp-age-card.tone-elementary {
  background: #ecfdf5;
}
.hp-age-card.tone-elementary .hp-age-range,
.hp-age-card.tone-elementary .hp-age-label { color: #15803d; }

.hp-age-card.tone-upper {
  background: #eff6ff;
}
.hp-age-card.tone-upper .hp-age-range,
.hp-age-card.tone-upper .hp-age-label { color: #2563eb; }

.hp-age-card.tone-middle {
  background: #f5f3ff;
}
.hp-age-card.tone-middle .hp-age-range,
.hp-age-card.tone-middle .hp-age-label { color: #7c3aed; }

.hp-age-card.tone-tiny {
  background: #fef2f2;
}
.hp-age-card.tone-tiny .hp-age-range,
.hp-age-card.tone-tiny .hp-age-label { color: #e11d48; }

.hp-age-card.tone-teen {
  background: #fdf4ff;
}
.hp-age-card.tone-teen .hp-age-range,
.hp-age-card.tone-teen .hp-age-label { color: #c026d3; }

.hp-age-avatar {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.hp-age-avatar img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 3px solid #fff;
}

.hp-age-range {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hp-age-label {
  grid-column: 1 / -1;
  grid-row: 2;
  text-align: center;
  padding-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
}

.hp .ws-categories {
  padding-top: 0.5rem;
  padding-bottom: 2.5rem;
}

/* Homepage: category row matches centered "Explore by Age" grid (not left-aligned carousel) */
.hp .ws-categories .ws-scroll-btn {
  display: none !important;
}

.hp .ws-categories .ws-scroll-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
}

.hp .ws-categories .ws-cat-card {
  flex: none;
  width: auto;
  min-width: 0;
  scroll-snap-align: unset;
}

.hp .ws-categories .ws-section-head h2 {
  font-size: 1.25rem;
}

.hp-explore-categories {
  max-width: 100%;
}

.hp-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
}

.hp-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  padding: 1.15rem 0.65rem 1rem;
  text-align: center;
  text-decoration: none !important;
  color: var(--hp-blue-dark);
  box-shadow: 0 6px 20px rgba(10, 25, 49, 0.06);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 168px;
}

.hp-cat-item:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 12px 28px rgba(10, 25, 49, 0.1);
}

.hp-cat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  margin-bottom: 0.55rem;
  border-radius: 50%;
  position: relative;
}

.hp-cat-icon-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(0.5px);
  opacity: 0.55;
}

.hp-cat-item.tone-blue .hp-cat-icon-wrap::before {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, rgba(191, 219, 254, 0.25) 55%, transparent 72%);
}
.hp-cat-item.tone-green .hp-cat-icon-wrap::before {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.45) 0%, rgba(187, 247, 208, 0.25) 55%, transparent 72%);
}
.hp-cat-item.tone-pink .hp-cat-icon-wrap::before {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.42) 0%, rgba(251, 207, 232, 0.28) 55%, transparent 72%);
}
.hp-cat-item.tone-orange .hp-cat-icon-wrap::before {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.45) 0%, rgba(254, 215, 170, 0.28) 55%, transparent 72%);
}
.hp-cat-item.tone-purple .hp-cat-icon-wrap::before {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.45) 0%, rgba(221, 214, 254, 0.28) 55%, transparent 72%);
}
.hp-cat-item.tone-rose .hp-cat-icon-wrap::before {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.42) 0%, rgba(254, 205, 211, 0.28) 55%, transparent 72%);
}

.hp-cat-icon-wrap img {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.12));
}

.hp-cat-label {
  display: block;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.25;
  color: #0f2d5c;
  letter-spacing: -0.01em;
}

/* Dual cards — mockup: pastel fill, deco, illustration right */
.hp-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  padding: 1rem 0 2.5rem;
}

.hp-dual-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 28px rgba(10, 25, 49, 0.06);
  display: block;
}

.hp-dual-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.35) 38%,
    transparent 62%
  );
}

.hp-dual-card.parents::after {
  background: linear-gradient(
    90deg,
    rgba(240, 253, 244, 0.95) 0%,
    rgba(240, 253, 244, 0.55) 42%,
    transparent 68%
  );
}

.hp-dual-card.owners::after {
  background: linear-gradient(
    90deg,
    rgba(239, 246, 255, 0.95) 0%,
    rgba(239, 246, 255, 0.55) 42%,
    transparent 68%
  );
}

.hp-dual-card.parents {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 55%, #dcfce7 100%);
  border-color: #bbf7d0;
}

.hp-dual-card.owners {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #e0f2fe 100%);
  border-color: #bfdbfe;
}

.hp-dual-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hp-dual-card.parents .hp-dual-deco {
  background:
    radial-gradient(ellipse 120px 80px at 8% 92%, rgba(34, 197, 94, 0.14), transparent 70%),
    radial-gradient(ellipse 90px 70px at 92% 12%, rgba(74, 222, 128, 0.12), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%2322c55e' opacity='0.12'%3E%3Cpath d='M24 4c-2 8-10 14-10 22a10 10 0 1 0 20 0c0-8-8-14-10-22z'/%3E%3C/svg%3E") 4% 8% / 56px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%2316a34a' opacity='0.1'%3E%3Cpath d='M24 4c-2 8-10 14-10 22a10 10 0 1 0 20 0c0-8-8-14-10-22z'/%3E%3C/svg%3E") 88% 78% / 48px no-repeat;
}

.hp-dual-card.owners .hp-dual-deco {
  background:
    radial-gradient(circle 6px at 12% 18%, rgba(59, 130, 246, 0.35), transparent),
    radial-gradient(circle 5px at 78% 22%, rgba(250, 204, 21, 0.45), transparent),
    radial-gradient(circle 4px at 24% 72%, rgba(59, 130, 246, 0.3), transparent),
    radial-gradient(circle 5px at 65% 65%, rgba(249, 115, 22, 0.35), transparent),
    radial-gradient(circle 4px at 90% 45%, rgba(59, 130, 246, 0.28), transparent),
    radial-gradient(circle 3px at 42% 28%, rgba(234, 179, 8, 0.4), transparent),
    radial-gradient(ellipse 100px 60px at 95% 8%, rgba(59, 130, 246, 0.1), transparent 70%);
}

.hp-dual-body {
  position: relative;
  z-index: 2;
  padding: 1.65rem;
  padding-right: 38%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.hp-dual-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.hp-dual-card.parents h3 { color: #166534; }
.hp-dual-card.owners h3 { color: #1d4ed8; }

.hp-dual-card .sub {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #475569;
  margin-bottom: 1rem;
  max-width: 28rem;
}

.hp-dual-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.hp-dual-card li {
  padding: 0.4rem 0 0.4rem 1.65rem;
  position: relative;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #334155;
}

.hp-dual-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.hp-dual-card.parents li::before {
  background: linear-gradient(145deg, #22c55e, #15803d);
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.35);
}

.hp-dual-card.owners li::before {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.hp-dual-card .hp-dual-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 1.1rem;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.hp-dual-card.parents .hp-dual-btn {
  background: linear-gradient(145deg, #16a34a, #15803d);
}

.hp-dual-card.owners .hp-dual-btn {
  background: linear-gradient(145deg, #3b82f6, #2563eb);
}

.hp-dual-card .hp-dual-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}

.hp-dual-illus {
  position: absolute;
  right: -6%;
  bottom: -2%;
  z-index: 0;
  width: min(78%, 380px);
  height: 92%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

.hp-dual-illus img {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 300px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.1));
}

/* Trust trio — mockup: renkli kart, sol metin, sağ illüstrasyon */
.hp-trust-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  padding-bottom: 2.5rem;
}

.hp-trust-box {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 210px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 28px rgba(10, 25, 49, 0.07);
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}

.hp-trust-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(10, 25, 49, 0.1);
}

.hp-trust-box--cert {
  background: linear-gradient(135deg, #fff 0%, #faf5ff 55%, #f5f3ff 100%);
  border-color: #e9d5ff;
}

.hp-trust-box--age {
  background: linear-gradient(135deg, #fff 0%, #f0fdfa 55%, #ecfeff 100%);
  border-color: #99f6e4;
}

.hp-trust-box--mission {
  background: linear-gradient(135deg, #fff 0%, #fff7ed 55%, #ffedd5 100%);
  border-color: #fed7aa;
}

.hp-trust-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hp-trust-box--cert .hp-trust-deco {
  background:
    radial-gradient(circle 5px at 88% 18%, rgba(168, 85, 247, 0.35), transparent),
    radial-gradient(circle 4px at 72% 28%, rgba(59, 130, 246, 0.3), transparent),
    radial-gradient(ellipse 80px 50px at 100% 50%, rgba(167, 139, 250, 0.12), transparent 70%);
}

.hp-trust-box--age .hp-trust-deco {
  background:
    radial-gradient(circle 4px at 90% 25%, rgba(20, 184, 166, 0.35), transparent),
    radial-gradient(circle 3px at 78% 40%, rgba(59, 130, 246, 0.28), transparent);
}

.hp-trust-box--mission .hp-trust-deco {
  background:
    radial-gradient(circle 5px at 85% 15%, rgba(251, 191, 36, 0.45), transparent),
    radial-gradient(circle 4px at 92% 35%, rgba(249, 115, 22, 0.3), transparent);
}

.hp-trust-body {
  position: relative;
  z-index: 2;
  padding: 1.35rem 42% 1.35rem 1.35rem;
  text-align: left;
}

.hp-trust-head {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.hp-trust-ico {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}

.hp-trust-ico--purple {
  background-color: #f3e8ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed'%3E%3Cpath d='M12 2l8 3v5.5c0 4.9-3.4 9.5-8 10.5-4.6-1-8-5.6-8-10.5V5l8-3zm3.2 7.8l-4.2 4.2-2-2-1.4 1.4 3.4 3.4 5.6-5.6-1.4-1.4z'/%3E%3C/svg%3E");
}

.hp-trust-ico--teal {
  background-color: #ccfbf1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230d9488'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

.hp-trust-ico--orange {
  background-color: #ffedd5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ea580c'%3E%3Cpath d='M12 2l8 3v5.5c0 4.9-3.4 9.5-8 10.5-4.6-1-8-5.6-8-10.5V5l8-3zm-1 6.5c-1.1 0-2 .9-2 2 0 .74.4 1.38 1 1.73V17h2v-4.77c.6-.35 1-.99 1-1.73 0-1.1-.9-2-2-2z'/%3E%3Cpath d='M12 10.5c.55 0 1-.45 1-1s-.45-1-1-1-1 .45-1 1 .45 1 1 1z' fill='%23fff'/%3E%3C/svg%3E");
}

.hp-trust-box h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--hp-blue-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.hp-trust-box p {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 0.85rem;
}

.hp-trust-link {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--hp-blue) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}

.hp-trust-link:hover {
  color: #1d4ed8 !important;
}

.hp-trust-illus {
  position: absolute;
  right: 0.35rem;
  bottom: 0.25rem;
  top: 0.5rem;
  z-index: 1;
  width: 46%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hp-trust-illus img {
  width: 100%;
  max-width: 150px;
  height: auto;
  max-height: 155px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.1));
}

/* Testimonials */
.hp-testimonials {
  background: #f8fafc;
  padding: 2.5rem 0;
}

.hp-recent-sites-wrap .ws-section.ws-featured {
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}

.hp-recent-sites-wrap + .container {
  padding-top: 0.5rem;
}

.hp-testimonials h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hp-blue-dark);
  margin-bottom: 1.75rem;
}

.hp-test-empty {
  text-align: center;
  color: #64748b;
  font-size: 0.92rem;
  max-width: 36rem;
  margin: 0 auto;
}

.hp-test-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.hp-test-viewport {
  overflow: hidden;
}

.hp-test-track {
  display: flex;
  transition: transform 0.35s ease;
}

.hp-test-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.hp-test-nav {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: var(--hp-blue-dark);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.hp-test-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.hp-test-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-test-stars .on {
  color: #22c55e;
}

.hp-test-stars .dim {
  color: #d1fae5;
}

.hp-test-site {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  text-decoration: none;
}

.hp-test-site:hover {
  color: var(--hp-blue);
  text-decoration: underline;
}

.hp-test-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.hp-test-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.35rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8eef4;
}

.hp-test-card .quote {
  color: var(--hp-blue);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.hp-test-card p {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  min-height: 4.5em;
}

.hp-test-stars {
  color: #22c55e;
  margin-bottom: 0.65rem;
  letter-spacing: 1px;
}

.hp-test-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hp-blue-dark);
}

.hp-test-author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* Bottom */
.hp-bottom-ribbon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem 0;
  font-weight: 700;
  color: #475569;
  font-size: 0.9rem;
}

.hp-newsletter {
  background: linear-gradient(135deg, #1e5bb8, #2563eb);
  border-radius: var(--hp-radius);
  padding: 2rem 2.5rem;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.hp-newsletter h3 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.hp-newsletter p {
  font-size: 0.9rem;
  opacity: 0.9;
}

.hp-news-form {
  display: flex;
  gap: 0.5rem;
  min-width: 320px;
}

.hp-news-form input {
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-family: inherit;
}

.hp-news-form button {
  border: none;
  background: var(--hp-green);
  color: #fff;
  font-weight: 800;
  padding: 0.85rem 1.35rem;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}

.hp-heart-line {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  padding: 1rem 0 2rem;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .hp-filter-row {
    flex-wrap: wrap;
  }
  .hp-filter-field {
    flex: 1 1 calc(33.333% - 0.5rem);
  }
  .hp-filter-field--name {
    flex: 1 1 100%;
  }
  .hp-filter-submit {
    width: 100%;
    margin-top: 0.25rem;
  }
}

@media (max-width: 960px) {
  .hp-hero {
    max-height: none;
    min-height: 0;
    padding: 1.75rem 0 2rem;
  }
  .hp-hero {
    background-position: right bottom;
    background-size: auto min(320px, 85%);
  }
  .hp-hero-copy {
    max-width: 100%;
    padding-inline-start: 0;
  }
  .hp-explore-grid,
  .hp-dual,
  .hp-trust-trio,
  .hp-test-grid {
    grid-template-columns: 1fr;
  }
  .hp-test-slide {
    grid-template-columns: repeat(2, 1fr);
  }
  .hp-trust-body {
    padding-right: 38%;
  }
  .hp-trust-illus {
    width: 42%;
  }
  .hp-trust-illus img {
    max-width: 130px;
  }
  .hp-dual-card {
    min-height: 0;
  }
  .hp-dual-body {
    padding: 1.35rem;
    padding-bottom: 9.5rem;
    padding-right: 1.35rem;
  }
  .hp-dual-illus {
    right: 50%;
    bottom: 0;
    width: min(92%, 300px);
    height: auto;
    transform: translateX(50%);
    justify-content: center;
  }
  .hp-dual-illus img {
    max-height: 200px;
    object-position: center bottom;
  }
  .hp-dual-card::after {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      transparent 35%,
      transparent 55%,
      rgba(255, 255, 255, 0.75) 100%
    );
  }
  .hp-dual-card.parents::after {
    background: linear-gradient(
      180deg,
      rgba(240, 253, 244, 0.9) 0%,
      transparent 40%,
      rgba(240, 253, 244, 0.85) 100%
    );
  }
  .hp-dual-card.owners::after {
    background: linear-gradient(
      180deg,
      rgba(239, 246, 255, 0.9) 0%,
      transparent 40%,
      rgba(239, 246, 255, 0.85) 100%
    );
  }
  .hp-filter-field {
    flex: 1 1 100%;
  }
  .hp-stats { grid-template-columns: repeat(2, 1fr); }
  .hp-stat:nth-child(2) { border-right: none; }
  .hp-newsletter { grid-template-columns: 1fr; }
  .hp-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .hp .ws-categories .ws-scroll-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hp-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .hp .ws-categories .ws-scroll-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats { grid-template-columns: 1fr; margin-top: -1rem; }
  .hp-stat { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .hp-age-cards { grid-template-columns: repeat(2, 1fr); }
  .hp-test-slide { grid-template-columns: 1fr; }
}

@media (max-width: 900px) and (min-width: 561px) {
  .hp-age-cards { grid-template-columns: repeat(3, 1fr); }
  .hp .ws-categories .ws-scroll-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* RTL (Arapça vb.) — hero görseli solda, metin sağda */
body.rtl .hp-hero {
  background-position: left bottom;
}

body.rtl .hp-hero-overlay {
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.7) 42%,
    rgba(255, 255, 255, 0.15) 58%,
    transparent 72%
  );
}

body.rtl .hp-title-swoosh {
  left: auto;
  right: 0.1rem;
  transform: scaleX(-1);
}

body.rtl .hp-dual-card li {
  padding: 0.4rem 1.65rem 0.4rem 0;
}

body.rtl .hp-dual-card li::before {
  left: auto;
  right: 0;
}

body.rtl .hp-dual-illus {
  right: auto;
  left: -6%;
  justify-content: flex-start;
}

body.rtl .hp-dual-body {
  padding: 1.65rem;
  padding-inline-start: 1.65rem;
  padding-inline-end: 38%;
}

body.rtl .hp-dual-card.parents::after {
  background: linear-gradient(
    270deg,
    rgba(240, 253, 244, 0.95) 0%,
    rgba(240, 253, 244, 0.55) 42%,
    transparent 68%
  );
}

body.rtl .hp-dual-card.owners::after {
  background: linear-gradient(
    270deg,
    rgba(239, 246, 255, 0.95) 0%,
    rgba(239, 246, 255, 0.55) 42%,
    transparent 68%
  );
}

body.rtl .hp-trust-body {
  padding: 1.35rem;
  padding-inline-start: 1.35rem;
  padding-inline-end: 42%;
}

body.rtl .hp-trust-illus {
  right: auto;
  left: 0.35rem;
}

@media (max-width: 960px) {
  body.rtl .hp-hero {
    background-position: left bottom;
  }
  body.rtl .hp-dual-body {
    padding-inline-end: 1.35rem;
    padding-bottom: 9.5rem;
  }
  body.rtl .hp-dual-illus {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}