:root{
  --accent-yellow:#FFD700;
  --accent-navy:#131D2E;
  --bg:#ffffff;
  --soft:#f5f5f7;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius:24px;
  --radius-lg:28px;
}

/* base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 28px}

/* =========================
   NAV
========================= */
.nav{
  position:sticky; top:0; z-index:100;
  height:52px;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(20px);
  transition: height .25s ease, background .25s ease, box-shadow .25s ease;
}
.nav-inner{
  height:52px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.06em;
}
.brand-dot{
  width:10px;height:10px;border-radius:999px;background:var(--accent-yellow);
  box-shadow:0 0 0 4px rgba(255,215,0,.18);
}
.nav-links{
  display:flex;
  gap:18px;
  font-size:13px;
  color:var(--muted);
  flex-wrap:wrap;
  justify-self:center;
}
.nav-links a{padding:6px 10px;border-radius:999px}
.nav-links a.active{background:rgba(19,29,46,.06); color:var(--text)}
.nav-links a:hover{background:rgba(0,0,0,.04); color:var(--text)}

.nav.is-compact{
  height:44px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.nav.is-compact .nav-inner{height:44px}

/* Search icon button (navbar) */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.72);
  font-size:13px;
  color:var(--text);
  transition: transform .18s ease, background .18s ease;
  user-select:none;
  justify-self:end;
}
.icon-btn:hover{ background:rgba(0,0,0,.04); transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0) scale(.99); }

/* =========================
   HERO (dark)
========================= */
.hero-dark{
  position: relative;
  padding: 110px 0 90px;
  background: radial-gradient(
    900px 420px at 50% 32%,
    rgba(255,255,255,0.035),
    rgba(0,0,0,0.94)
  );
  overflow: hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background-image: url("./images/hero-hivis.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 520px at 60% 40%, rgba(255,215,0,.18), transparent 55%),
    radial-gradient(900px 420px at 35% 55%, rgba(255,120,0,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
}
.hero-dark-inner{
  position: relative;
  z-index: 2;
  display:flex;
  justify-content:center;
}
.hero-copy{
  max-width: 760px;
  color: #fff;
  text-align:center;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-dark h1{
  margin-top: 16px;
  font-size: 58px;
  letter-spacing: -.02em;
  font-weight: 650;
}
.hero-dark p{
  margin-top: 12px;
  font-size: 19px;
  color: rgba(255,255,255,.78);
  max-width: 720px;
  margin-left:auto;
  margin-right:auto;
}
.hero-actions{
  margin-top:26px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn{
  border-radius:999px;
  padding:12px 18px;
  font-size:15px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{ transform: translateY(0) scale(.99); }

.hero-dark .btn{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.hero-dark .btn:hover{ background: rgba(255,255,255,.10); }
.hero-dark .btn.primary{
  background: var(--accent-yellow);
  color: #0b0b0e;
  border-color: transparent;
}
.hero-dark .btn.primary:hover{ filter: brightness(0.95); }
.hero-dark .btn.ghost{ background: transparent; border-color: rgba(255,255,255,.18); }
.hero-dark .btn.ghost .underline{
  display:inline-block;
  border-bottom:2px solid var(--accent-yellow);
  padding-bottom:2px;
}

@media (max-width: 980px){
  .hero-dark{ padding: 82px 0 64px; }
  .hero-dark h1{ font-size: 46px; }
}
@media (max-width: 640px){
  .hero-dark{ padding: 74px 0 54px; }
  .hero-dark h1{ font-size: 40px; }
  .hero-dark p{ font-size: 16px; }
  .container{padding:0 18px}
}

/* =========================
   HOME FEATURE (hf-*)
========================= */
.home-feature{ padding: 86px 0; background:#fff; }

.hf-media{
  position: relative;
  display: block;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(0,0,0,.22);
  isolation: isolate;
}
.hf-img{ width:100%; height:auto; display:block; }

.hf-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  pointer-events:none;
}
.hf-text{
  margin-top: 28px;
  text-align:center;
  color:#fff;
  width: min(900px, calc(100% - 32px));
  pointer-events:none;
}
.hf-kicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.85;
}
.hf-title{
  margin-top: 6px;
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height:1.05;
  text-transform:uppercase;
}
.hf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 14px;
  padding: 10px 20px;
  font-size: 14px;
  background: #fff;
  color:#000;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  pointer-events:auto;
  cursor:pointer;
}
.hf-btn:hover{ background:#f2f2f2; }

@media (max-width: 980px){
  .hf-title{ font-size: 34px; }
  .hf-media{ width: calc(100% - 24px); border-radius: 26px; }
}
@media (max-width: 640px){
  .hf-text{ margin-top: 20px; }
  .hf-title{ font-size: 30px; }
}

/* =========================
   SECTIONS + GRID + CARDS
========================= */
.section{padding:72px 0}
.section-title{
  font-size:34px;
  font-weight:650;
  letter-spacing:-.015em;
}
.section-sub{
  margin-top:8px;
  color:var(--muted);
  font-size:16px;
}

.grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  min-height:160px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.08)}
.card h3{font-size:18px;font-weight:650; letter-spacing:-.01em}
.card p{margin-top:6px;color:var(--muted); font-size:14px}
.card .meta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  background:rgba(0,0,0,.04);
  color:var(--text);
  border:1px solid rgba(0,0,0,.06);
}
.pill.active{
  background:rgba(255,215,0,.18);
  border-color:rgba(255,215,0,.35);
}

/* =========================
   PRODUCT PAGE
========================= */
.product-hero{
  padding:64px 0;
  background:linear-gradient(180deg, rgba(255,215,0,.08), rgba(245,245,247,1));
}
.product-wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:18px;
}
.media{
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
  min-height:360px;
  position:relative;
  overflow:hidden;
}
.media::before{
  content:"";
  position:absolute; inset:-30%;
  background:radial-gradient(circle at 30% 30%, rgba(255,215,0,.28), transparent 55%),
             radial-gradient(circle at 70% 60%, rgba(19,29,46,.12), transparent 60%);
}
.product-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:28px;
  position:relative;
  z-index:2;
}
.panel{
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
  padding:22px;
}
.panel h2{
  font-size:22px;
  font-weight:650;
  letter-spacing:-.01em;
}
.price{margin-top:10px;font-size:26px;font-weight:700}
.small{margin-top:6px;color:var(--muted); font-size:13px}

@media (max-width: 980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .product-wrap{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
}

/* =========================
   FOOTER
========================= */
.footer{
  padding:48px 0;
  background:var(--accent-navy);
  color:#fff;
}
.footer p{opacity:.75; font-size:13px}

/* =========================
   MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
}
.reveal{
  transition-delay: var(--reveal-delay, 0ms);
  opacity:0;
  transform: translateY(18px);
  transition:
    opacity 1.6s cubic-bezier(.2,.8,.2,1),
    transform 1.6s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   SEARCH SHEET + BACKDROP (FINAL)
========================= */
body.search-open{ overflow:hidden; }

.search-sheet{
  position:fixed;
  top:10px;
  left:50%;
  width:min(860px, calc(100% - 24px));
  z-index:999;

  background:rgba(255,255,255,.86);
  backdrop-filter: blur(22px);
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  box-shadow: 0 22px 80px rgba(0,0,0,.14);
  padding:14px;

  opacity:0;
  pointer-events:none;
  transform: translate(-50%, -12px) scale(.985);
  transition:
    opacity .6s ease,
    transform .6s cubic-bezier(.2,.8,.2,1);
}
.search-sheet.open{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%, 0) scale(1);
}
.search-row{display:flex; gap:10px; align-items:center}
.search-input{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  padding:10px 14px;
}
.search-input input{
  border:none; outline:none; width:100%;
  font-size:14px; background:transparent;
}
.search-hint{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:13px;
}

.backdrop{
  position:fixed;
  inset:0;
  z-index:998;
  opacity:0;
  pointer-events:none;
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(18px) saturate(1.25);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1);
}
.backdrop.open{
  opacity:1;
  pointer-events:auto;
}

/* V2 ripple: tek parça, daha ince, yumuşak */
.backdrop::before,
.backdrop::after{
  content:"";
  position:absolute;
  inset:-45%;
  opacity:0;
  transform: scale(.10);
  transform-origin: var(--rx, 50%) var(--ry, 20%);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

.backdrop::before{
  filter:none;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 20%),
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,.92) 64%,
    rgba(255,255,255,.92) 68%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  );

  -webkit-mask-image:
    radial-gradient(circle at var(--rx, 50%) var(--ry, 20%),
      #000 0%,
      #000 74%,
      transparent 78%,
      transparent 100%
    ),
    conic-gradient(
      from var(--rrot, 0deg),
      rgba(0,0,0,0) 0deg,
      rgba(0,0,0,0.35) 6deg,
      rgba(0,0,0,1) 12deg,
      rgba(0,0,0,0.35) 18deg,
      rgba(0,0,0,0) 24deg,
      rgba(0,0,0,0) 360deg
    );

  mask-image:
    radial-gradient(circle at var(--rx, 50%) var(--ry, 20%),
      #000 0%,
      #000 74%,
      transparent 78%,
      transparent 100%
    ),
    conic-gradient(
      from var(--rrot, 0deg),
      rgba(0,0,0,0) 0deg,
      rgba(0,0,0,0.35) 6deg,
      rgba(0,0,0,1) 12deg,
      rgba(0,0,0,0.35) 18deg,
      rgba(0,0,0,0) 24deg,
      rgba(0,0,0,0) 360deg
    );
}

.backdrop::after{
  filter: blur(18px);
  transform: scale(.08);
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 20%),
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.14) 26%,
    rgba(255,255,255,0) 62%
  );
}

.backdrop.ripple::before{
  animation: ringExpandV2 2.10s cubic-bezier(.16,1,.3,1) forwards;
}
.backdrop.ripple::after{
  animation: glowExpandV2 2.50s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: .08s;
}

@keyframes ringExpandV2{
  0%   { opacity:0; transform: scale(.10) scaleX(calc(1 + var(--rskew, 0))); }
  12%  { opacity:1; transform: scale(.12) scaleX(calc(1 + var(--rskew, 0))); }
  70%  { opacity:.55; transform: scale(1.55) scaleX(calc(1 + var(--rskew, 0))); }
  100% { opacity:0; transform: scale(2.05) scaleX(calc(1 + var(--rskew, 0))); }
}
@keyframes glowExpandV2{
  0%   { opacity:0; transform: scale(.08); }
  18%  { opacity:.85; transform: scale(.12); }
  75%  { opacity:.22; transform: scale(1.65); }
  100% { opacity:0; transform: scale(2.25); }
}

/* =========================
   SHOWCASE (edge-to-edge)
========================= */
.showcase{
  padding: 78px 0;
  background: #fff;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.showcase > .container{
  max-width: none;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

/* tile base */
.tile{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:28px;
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  background: #fff;
  min-height: 280px;
}
.tile-wide{
  width:100%;
  min-height: 360px;
  margin-bottom: 18px;
}
.tile-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 18px 0;
}
.tile-rect{
  width:100%;
  aspect-ratio: 4 / 3;
  min-height: 320px;
}

/* copy */
.tile-copy{ max-width: 70%; }
.tile-kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile-title{
  margin-top: 10px;
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.tile-sub{
  margin-top: 8px;
  font-size: 15px;
  color: var(--muted);
}
.tile-cta{
  font-size: 14px;
  font-weight: 650;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  color: var(--text);
  white-space: nowrap;
}

/* hover (anında) */
.tile{
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.35s cubic-bezier(.2,.8,.2,1);
}
.tile:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 28px 80px rgba(0,0,0,.12);
}

/* rect tile image layout (only if you use .tile-media inside the tile) */
.showcase .tile-rect{ position:relative; overflow:hidden; }
.showcase .tile-media{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:0;
}
.showcase .tile-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.showcase .tile-copy,
.showcase .tile-cta{
  position:relative;
  z-index:2;
}

/* black product tile */
.tile-black{
  background:#000;
  color:#fff;
}
.tile-black .tile-kicker{ color: rgba(255,255,255,0.6); }
.tile-black .tile-sub{ color: rgba(255,255,255,0.75); }

.tile-black .tile-head{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  max-width: calc(100% - 48px);
  text-align:center;
  font-size:28px;
  font-weight:700;
  z-index:2;
  text-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.tile-black .tile-copy{
  position:absolute;
  left:24px;
  bottom:24px;
  right:24px;
  z-index:2;
}
.tile-black .tile-cta{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:3;
  color:#fff;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
}
.tile-black .tile-cta:hover{ background: rgba(255,255,255,0.10); }

@media (max-width: 980px){
  .tile-copy{ max-width: 100%; }
  .tile-grid{ grid-template-columns: 1fr; }
  .tile-wide{ min-height: 320px; }
  .tile-rect{ min-height: 260px; }
  .tile-title{ font-size: 30px; }
}
@media (max-width: 768px){
  .showcase .tile-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .showcase{ padding: 64px 0; }
  .tile{ padding: 22px; }
  .tile-title{ font-size: 28px; }
}
/* =========================
   P1-4 UI UTILITIES (toolbar/breadcrumb/specs)
   Paste at END of styles.css
========================= */

/* Breadcrumb */
.breadcrumb{
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.breadcrumb a{
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.breadcrumb a:hover{
  color: var(--text);
  border-color: rgba(0,0,0,.18);
}

/* Toolbar (products page + product page tags) */
.toolbar{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Inline search (urunler.html) */
.search{
  flex: 1;
  min-width: 240px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  transition: border-color .2s ease, background .2s ease;
}
.search:focus-within{
  background: rgba(255,255,255,.8);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.search input{
  width:100%;
  border:none;
  outline:none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}
.kbd{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
}

/* Global primary button (for filters, etc.) */
.btn.primary{
  background: var(--accent-yellow);
  color: #0b0b0e;
  border-color: transparent;
}
.btn.primary:hover{
  filter: brightness(.96);
}

/* Specs list (urun.html right panel) */
.specs{
  margin-top: 16px;
  display:grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.spec{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:baseline;
}
.spec strong{
  font-size: 13px;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: -.01em;
}
.spec span{
  font-size: 13px;
  color: var(--text);
  text-align:right;
}

/* Small dot (used in pills like EN/CE) */
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-yellow);
  box-shadow: 0 0 0 4px rgba(255,215,0,.18);
  display:inline-block;
}

/* Placeholder (image fallback in urun.html) */
.placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.06));
}
.product-title{
  font-size: 46px;
  font-weight: 650;
  letter-spacing: -.02em;
}
@media (max-width:640px){
  .product-title{ font-size: 36px; }
}
.product-desc{
  margin-top: 10px;
  color: var(--muted);
  max-width: 820px;
}
.product-toolbar{
  margin-top: 16px;
}
.grid-spaced{
  margin-top: 18px;
}
/* Studio product media (white/black) */
.product-media{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
  isolation: isolate;
}

.product-media.is-dark{
  background: #000;
  border-color: rgba(255,255,255,.12);
}

.product-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 520px at 50% 45%, rgba(255,255,255,.06), transparent 55%);
  opacity:.8;
}

.product-media.is-dark::after{
  background: radial-gradient(900px 520px at 50% 45%, rgba(255,255,255,.10), transparent 55%);
}

.product-media img{
  width:100%;
  height:100%;
  object-fit: contain;
  padding: 24px;
  display:block;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.25));
}

.product-media.is-dark img{
  filter: drop-shadow(0 30px 90px rgba(0,0,0,.55));
}
/* Centered white tile (homepage) */
.tile-center{
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tile-center .tile-copy{
  align-items: center;
  text-align: center;
}

.tile-center .tile-title{
  margin-top: 8px;
}

.tile-center .tile-sub{
  margin-top: 6px;
}
/* White hero tile (same layout as black, white theme) */
.tile-white-hero{
  position: relative;
}

.tile-white-hero .tile-head{
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 48px);
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  z-index: 2;
  color: var(--text);
}

.tile-white-hero .tile-copy{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
}

.tile-white-hero .tile-cta{
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
}
.hero-dark .btn.ghost .underline{
  border-bottom: none;
}