/* ACE · cila katmanı: butonlar, yazı, ürün sahnesi, arka plan dokuları. Son yüklenir. */

/* ---------- yazı ---------- */
.sc-display { font-stretch: 78%; font-weight: 780; letter-spacing: -.014em; font-optical-sizing: auto; }
.sc-display--lg { line-height: 1.02; }
.sc-lede { font-weight: 350; color: color-mix(in oklab, var(--sc-ink) 92%, transparent); letter-spacing: -.005em; }
.sc-body { font-weight: 400; }
.label { display: inline-flex; align-items: center; gap: .7rem; letter-spacing: .26em; }
.label::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; opacity: .8; }
.spec dd { font-feature-settings: "tnum"; font-weight: 500; }
.hero__kicker, .label, .spec dt, .pcard__cat, .pcard__more { font-stretch: 92%; }

/* ---------- butonlar ---------- */
.cta {
  --ar: 2.1rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: .55rem .55rem .55rem 1.5rem;
  border: 1.5px solid color-mix(in oklab, var(--sc-accent) 70%, transparent);
  border-radius: 1.7rem .4rem 1.7rem .4rem;
  color: var(--sc-ink); background: rgba(6,16,11,.55); backdrop-filter: blur(10px);
  font: 700 .86rem/1 var(--sc-font-display); font-stretch: 92%; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: color .35s, border-color .35s, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sc-accent); transform: translateX(-101%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.cta::after {
  content: ""; flex: none; width: var(--ar); height: var(--ar); border-radius: 50%;
  background: var(--sc-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2304140E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 55% no-repeat;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s;
}
.cta:hover { color: var(--sc-accent-ink); border-color: var(--sc-accent); transform: translateY(-2px); box-shadow: 0 14px 30px -14px color-mix(in oklab, var(--sc-accent) 70%, black); }
.cta:hover::before { transform: none; }
.cta:hover::after { transform: translateX(3px); background-color: var(--sc-accent-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2335E0B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.cta:active { transform: translateY(0) scale(.98); }
.cta--solid { color: var(--sc-accent-ink); border-color: transparent; background: linear-gradient(135deg, #5DF0C4, #2FD6A6); box-shadow: 0 12px 28px -12px rgba(53,224,176,.55); }
.cta--solid::before { background: #fff; }
.cta--solid::after { background-color: var(--sc-accent-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235DF0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.cta--solid:hover { border-color: transparent; }
.cta--ghost { border-color: var(--line); color: var(--sc-ink); background: rgba(255,255,255,.03); }
.cta--ghost::after { background-color: rgba(255,255,255,.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23EAF1E6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }
.cta--bar { --ar: 1.7rem; padding: .4rem .4rem .4rem 1.2rem; font-size: .78rem; }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 520px) { .cta { padding-left: 1.2rem; font-size: .8rem; } }

.chip { font-stretch: 92%; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; padding: .7rem 1.1rem; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.chip:hover { transform: translateY(-1px); }
.bar__menu a { position: relative; border-bottom: 0; }
.bar__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.bar__menu a:hover::after, .bar__menu a[aria-current="page"]::after { transform: scaleX(1); }
.play span { box-shadow: 0 0 0 10px rgba(53,224,176,.18), 0 14px 30px rgba(0,0,0,.45); }
.form input, .form select, .form textarea { transition: border-color .25s, background .25s; }
.form input:hover, .form select:hover, .form textarea:hover { background: rgba(255,255,255,.07); }

/* ---------- ürün sahnesi ---------- */
.pcard__ph {
  position: relative; display: grid; place-items: center; padding: 9% 12% 13%;
  background:
    radial-gradient(70% 55% at 50% 42%, color-mix(in oklab, var(--glow) 46%, #0B1A12) 0%, transparent 72%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 60%),
    linear-gradient(180deg, #0F2218, #08130D);
  border: 1px solid color-mix(in oklab, var(--glow) 22%, var(--line));
}
.pcard__ph img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 22px rgba(0,0,0,.55)); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s; }
.pcard__floor { position: absolute; left: 18%; right: 18%; bottom: 9%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); filter: blur(7px); transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s; }
.pcard__btn:hover .pcard__ph img { transform: translateY(-12px) scale(1.045); filter: drop-shadow(0 38px 28px rgba(0,0,0,.5)); }
.pcard__btn:hover .pcard__floor { transform: scale(.82); opacity: .7; }
.pcard__more::after { content: " →"; }
.pmodal__imgs { background: none; border-radius: 0; gap: .8rem; }
.pmodal__stage { display: grid; place-items: center; aspect-ratio: 4/5; padding: 8% 12%; border-radius: 1.4rem .3rem 1.4rem .3rem; background: radial-gradient(70% 55% at 50% 42%, color-mix(in oklab, var(--glow) 50%, #0B1A12), transparent 74%), linear-gradient(180deg, #112619, #08130D); border: 1px solid color-mix(in oklab, var(--glow) 25%, var(--line)); }
.pmodal__stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 26px 22px rgba(0,0,0,.55)); }
.pmodal__back { border-radius: .8rem; }

/* ana sayfa ürün */
.product__photo { background: radial-gradient(70% 55% at 50% 45%, rgba(242,163,58,.32), transparent 72%), linear-gradient(180deg, #112619, #08130D); border: 1px solid rgba(242,163,58,.2); padding: 8% 12%; }
.product__photo img { background: none; aspect-ratio: 4/5; object-fit: contain; filter: drop-shadow(0 28px 24px rgba(0,0,0,.55)); }

/* ---------- arka plan dokuları ---------- */
.plist, .news, .videos, .pcta, .phead { position: relative; isolation: isolate; overflow-x: clip; }
.plist::before, .news::before, .videos::before, .phead::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(assets/topo.svg) center / 1400px auto repeat-y; opacity: .075; mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.plist::after, .phead::after {
  content: ""; position: absolute; right: -6%; top: -4%; width: min(60vw, 60rem); aspect-ratio: 3/4; z-index: -1; pointer-events: none;
  background: url(assets/isik.png) center / contain no-repeat; opacity: .16; filter: blur(2px);
  mask-image: radial-gradient(closest-side, #000 40%, transparent);
  animation: isik 26s ease-in-out infinite alternate;
}
@keyframes isik { from { transform: translate(0, 0) rotate(-3deg) scale(1); } to { transform: translate(-4%, 3%) rotate(2deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .plist::after, .phead::after { animation: none; } }
.plist { background: linear-gradient(180deg, #08130D, #0A1A12 40%, #08130D); }
.news { background: linear-gradient(180deg, #0C1A12, #0A150F); }
.videos { background: linear-gradient(180deg, #09130D, #0B1A12); }
.pcta { background: radial-gradient(90% 80% at 80% 100%, rgba(0,92,131,.35), transparent 60%), #07110C; }
.contact { background: radial-gradient(70% 60% at 85% 20%, rgba(0,167,129,.16), transparent 60%), radial-gradient(60% 60% at 10% 90%, rgba(0,92,131,.22), transparent 65%), #07110C; }
.product { background: radial-gradient(60% 70% at 25% 40%, rgba(242,163,58,.10), transparent 65%), #0A140E; }