/* Livaros görsel vitrin katmanı — gerçek portföy görselleri ve marka dokusu. */

.manifesto-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 14px);
    margin-bottom: clamp(48px, 6vw, 76px);
    padding: clamp(8px, 1vw, 14px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
}

.manifesto-shot { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; border-radius: 6px; background: #0b3033; }
.manifesto-shot img { width: 100%; height: 100%; object-fit: contain; transition: filter .5s var(--ease); }
.manifesto-shot:hover img { filter: saturate(1.08); }

.why-card { padding: 0; gap: 0; overflow: hidden; background: #fff; }
.why-card:first-child { padding-left: 0; }
.why-card-visual {
    position: relative; isolation: isolate; display: grid; place-items: center; margin: 0;
    aspect-ratio: 4 / 3; overflow: hidden; color: var(--brand); background: var(--brand-soft);
}
.why-card-visual::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 52%, rgba(255,255,255,.72), transparent 60%); }
.why-visual-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(5,35,38,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(5,35,38,.08) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(circle, #000 0 44%, transparent 78%); }
.why-visual-icon { position: relative; z-index: 4; display: grid; place-items: center; width: 31%; aspect-ratio: 1; border-radius: 50%; background: var(--brand); color: var(--ink); animation: why-icon-float 5s ease-in-out infinite; }
.why-visual-icon .ico { width: 45%; height: 45%; }
.why-visual-ring { position: absolute; z-index: 2; border: 1px solid rgba(5,35,38,.22); border-radius: 50%; }
.why-visual-ring::before { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(118,183,42,.12); }
.why-visual-ring--outer { width: 68%; aspect-ratio: 1; animation: why-orbit 16s linear infinite; }
.why-visual-ring--outer::before { top: 12%; left: 10%; }
.why-visual-ring--inner { width: 48%; aspect-ratio: 1; border-style: dashed; animation: why-orbit-reverse 11s linear infinite; }
.why-visual-ring--inner::before { right: -5px; bottom: 26%; width: 7px; height: 7px; }
.why-visual-dot { position: absolute; z-index: 3; border-radius: 50%; background: var(--ink); animation: why-dot 3s ease-in-out infinite; }
.why-visual-dot--one { width: 7px; height: 7px; top: 22%; right: 18%; }
.why-visual-dot--two { width: 11px; height: 11px; bottom: 18%; left: 22%; background: var(--brand); animation-delay: -1s; }
.why-visual-dot--three { width: 5px; height: 5px; top: 38%; left: 14%; animation-delay: -2s; }
.why-card-visual--2 .why-visual-ring--outer { border-radius: 42%; animation-duration: 20s; }
.why-card-visual--2 .why-visual-icon { animation-name: why-broadcast; }
.why-card-visual--3 .why-visual-grid { background-size: 42px 42px; transform: perspective(500px) rotateX(58deg) scale(1.35); transform-origin: center bottom; }
.why-card-visual--3 .why-visual-ring--inner { border-style: solid; animation-duration: 8s; }
.why-card:hover .why-visual-icon { background: #fff; transform: translateY(-6px) scale(1.04); }
.why-card-body { padding: clamp(24px, 2.5vw, 34px); display: flex; flex-direction: column; gap: 15px; flex: 1; }
.why-index { margin-bottom: 10px; }
@keyframes why-orbit { to { transform: rotate(360deg); } }
@keyframes why-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes why-icon-float { 0%, 100% { transform: translateY(5px) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes why-broadcast { 0%, 100% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(118,183,42,.2); } 50% { transform: scale(1.05); box-shadow: 0 0 0 24px rgba(118,183,42,0); } }
@keyframes why-dot { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } }

.system-link { grid-template-columns: auto clamp(74px, 8vw, 112px) 1fr auto auto; }
.system-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--ink); }
.system-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.system-link:hover .system-media img { transform: scale(1.08); }

.section--cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: var(--ink) url('../images/livaros-abstract-depth.webp') center / cover no-repeat;
}

.section--cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,35,38,.98), rgba(5,35,38,.8) 56%, rgba(5,35,38,.25)); }
.section--cta .cta-title { color: #fff; }
.section--cta .section-eyebrow, .section--cta .cta-lead { color: rgba(255,255,255,.72); }
.section--cta .btn--dark { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.section--cta .btn--dark:hover { background: #fff; border-color: #fff; }

@media (max-width: 991.98px) {
    .manifesto-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .manifesto-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 44px; }
    .why-card, .why-card:first-child { padding: 0; }
    .why-card-body { padding: 24px 0 28px; }
    .why-card-visual { aspect-ratio: 16 / 10; }
    .system-link { grid-template-columns: 34px 68px 1fr auto; gap: 12px; }
    .system-ico, .system-question { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .why-visual-icon, .why-visual-ring, .why-visual-dot { animation: none; }
}