/* Progressive visual polish. Existing screenshots, links and consent logic stay intact. */
:root { --petico-screen-ease: cubic-bezier(.23, 1, .32, 1); }

/* A quiet pool of light gives the real product screens a place in the film. */
#hero:has(#english-product-heading) > figure,
#product-example > figure { isolation: isolate; perspective: 1200px; }
#hero:has(#english-product-heading) > figure::before,
#product-example > figure::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 12% -5% 12%; border-radius: 50%;
  background: radial-gradient(ellipse, #9bbeb52b 0%, #72afa110 38%, transparent 70%);
}
#hero:has(#english-product-heading) > figure > a,
#product-example > figure > a {
  transform-origin: 50% 70%;
  box-shadow: 0 36px 68px -24px #000c, 0 0 0 1px #d4e6dc24, 0 0 40px -14px #9cd6c635;
  transition: transform 600ms var(--petico-screen-ease);
}
#hero:has(#english-product-heading) > figure > a:focus-visible,
#product-example > figure > a:focus-visible { outline: 2px solid #b4e1d5; outline-offset: 7px; }
#product-example > figure > a img { min-height: 0; }
#try-petico [aria-controls="product-example"] {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #hero:has(#english-product-heading) > figure > a:hover,
  #product-example > figure > a:hover { transform: translateY(-5px) rotateY(-3deg); }
}
@media (max-width: 560px) {
  /* Match the existing 170px mobile orb. Its old 260px wrapper widened
     the mobile layout viewport and displaced fixed consent controls. */
  #hero:has(#english-product-heading) > figure > div[aria-hidden="true"] { width: 170px; height: 170px; }
  #hero:has(#english-product-heading) > figure::before { inset: 0 15% 0 -12%; }
  #product-example > figure::before { inset: 0 20% 0 -10%; }
}

/* One consent system, with clear choices and comfortable touch targets.
   Stable accessible labels cover the React banner on all public page types. */
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) {
  right: max(20px, env(safe-area-inset-right)) !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  padding: 0 !important;
  max-width: calc(100vw - 40px) !important;
  border: 1px solid #d8dfd5;
  border-radius: 16px !important;
  background: #f8f5ef !important;
  color: #193e31 !important;
  box-shadow: 0 16px 50px #0003, 0 2px 8px #0002 !important;
  font-size: 14px !important; line-height: 1.55;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]):has(> p) {
  width: 380px; padding: 22px !important;
  max-height: calc(100svh - 40px); overflow-y: auto;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) > p {
  margin: 0 0 18px !important; font-size: 14px; line-height: 1.6; color: #193e31;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) > div {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) button {
  min-height: 44px; padding: 10px 18px; border: 1px solid #647e70;
  border-radius: 9px; font: inherit; font-weight: 600; line-height: 1.3;
  color: #193e31; background: transparent; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) > div > button:first-child {
  background: #193e31; color: #fff; border-color: #193e31;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) > div > a {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center;
  min-height: 24px; color: #315a49; font-size: 12px; text-decoration: underline; text-underline-offset: 3px;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) > button {
  border: 0; border-radius: 16px; font-size: 12px; font-weight: 500;
}
aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) :is(button, a):focus-visible {
  outline: 2px solid #193e31; outline-offset: 3px;
}
@media (hover: hover) {
  aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) button:hover { background: #e2e9df; }
  aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) > div > button:first-child:hover { background: #285643; }
}
@media (max-width: 600px) {
  aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]) {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 24px) !important;
  }
  aside:is([aria-label="Analytics preferences"], [aria-label="Analiz tercihleri"]):has(> p) {
    width: 360px; padding: 18px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #hero:has(#english-product-heading) > figure > a,
  #product-example > figure > a { transition: none; transform: none; }
}
@media (max-width: 360px) {
  /* Keep brand, language and download together on the narrowest phones. */
  #root > header { padding-inline: 16px; column-gap: 8px; row-gap: 10px; }
  #root > header > a:first-child { gap: 8px; font-size: 11px; letter-spacing: .04em; }
  #root > header > nav { gap: 8px; flex-wrap: nowrap; }
  #root > header [data-mobile-store-action] { font-size: 12px; padding-inline: 12px; white-space: nowrap; }
  #root > header > [data-r1-subscription] { font-size: 11px; }
  #hero:has(#english-product-heading) { padding-top: calc(var(--nav-height) + 64px); }
  #hero:has(#english-product-heading) .petico-store-badges img { height: 40px !important; }
}