/* Neden Komitas sayfası: uzun bir rakip karşılaştırması yerine ürünün gerçek
   çalışma döngüsünü gösteren editoryal anlatı. */

.neden-kahraman {
    position: relative;
    overflow: hidden;
    padding-top: clamp(56px, 8vw, 104px);
    background:
        radial-gradient(50% 74% at 82% 46%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 72%),
        radial-gradient(38% 60% at 8% 72%, color-mix(in srgb, var(--terra) 8%, transparent), transparent 74%);
}

.neden-kahraman::after {
    content: "";
    position: absolute;
    width: min(52vw, 720px);
    aspect-ratio: 1;
    right: -18%;
    top: -36%;
    border: 1px solid color-mix(in srgb, var(--teal) 16%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.neden-hero {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(36px, 6vw, 80px);
    align-items: center;
}

.neden-hero-yazi { position: relative; z-index: 2; }
.neden-hero-yazi h1 { max-width: 12.5ch; }
.neden-hero-yazi .dugmeler { margin-top: var(--alan-4); }

.neden-hero-gorsel,
.neden-kaynak-gorseli {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    margin: 0;
    position: relative;
    transform: perspective(1000px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
    transform-style: preserve-3d;
    transition: transform 220ms var(--egri-iki-yonlu), opacity var(--sure-uzun) var(--egri-giris);
}

.neden-hero-gorsel img,
.neden-kaynak-gorseli img,
.neden-buyuk-kart img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 28px color-mix(in srgb, var(--ink) 14%, transparent));
}

.neden-hero-gorsel img { animation: neden-nefes 7.2s ease-in-out infinite alternate; }
.neden-hero-gorsel figcaption {
    margin-top: 2px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
}

@keyframes neden-nefes {
    from { transform: translateY(0) rotate(-.25deg); }
    to { transform: translateY(-9px) rotate(.25deg); }
}

.neden-giris { max-width: 760px; margin-bottom: var(--alan-5); }

.neden-kartlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--alan-3);
}

.neden-kart {
    min-height: 310px;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid var(--rule);
    border-radius: 22px;
    background: var(--card);
    box-shadow: var(--shadow);
    transition: transform var(--sure-orta) var(--egri-iki-yonlu),
                border-color var(--sure-orta), box-shadow var(--sure-orta);
}

.neden-kart:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--teal) 46%, var(--rule));
    box-shadow: var(--shadow-lift);
}

.neden-kart:nth-child(2) { margin-top: 26px; }
.neden-kart:nth-child(3) { margin-top: 52px; }
.neden-no {
    display: block;
    margin-bottom: var(--alan-4);
    font-family: "Fraunces", Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--terra);
    letter-spacing: .08em;
}
.neden-kart p { color: var(--muted); font-size: 15.5px; }

.neden-akis {
    overflow: hidden;
    background:
        linear-gradient(112deg, color-mix(in srgb, var(--teal) 7%, transparent), transparent 56%),
        var(--card);
    border-top: 0;
}

.neden-akis-izgara {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(38px, 7vw, 88px);
    align-items: center;
}
.neden-kaynak-gorseli { margin: 0; }

.neden-adim {
    position: relative;
    padding: 18px 0 18px 28px;
    border-bottom: 1px solid var(--rule);
}
.neden-adim:last-child { border-bottom: 0; }
.neden-adim::before {
    content: "";
    position: absolute;
    left: 0;
    top: 29px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 13%, transparent);
}
.neden-adim strong { display: block; margin-bottom: 5px; }
.neden-adim p { color: var(--muted); font-size: 15.5px; margin: 0; }

.neden-iki {
    display: grid;
    grid-template-columns: 1.18fr .82fr;
    gap: var(--alan-3);
    align-items: stretch;
}

.neden-buyuk-kart {
    border: 1px solid var(--rule);
    border-radius: 24px;
    background: var(--card);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: var(--shadow);
}
.neden-buyuk-kart p:not(.gozkasi) { color: var(--muted); }
.neden-buyuk-kart img { margin: 18px auto -10px; max-width: 560px; }
.neden-buyuk-kart.vurgu-kart {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 72%),
        var(--teal-soft);
    border-color: color-mix(in srgb, var(--teal) 48%, var(--rule));
}
.neden-buyuk-kart .ok-bag { margin-top: var(--alan-2); }

.neden-son {
    text-align: center;
    border: 1px solid var(--rule);
    border-radius: 30px;
    padding: clamp(42px, 7vw, 82px) clamp(24px, 5vw, 60px);
    background:
        radial-gradient(64% 110% at 50% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 72%),
        var(--card);
    box-shadow: var(--shadow);
}
.neden-son h2 { max-width: 23ch; margin-inline: auto; }
.neden-son .giris { margin-inline: auto; }
.neden-son .dugmeler { margin-top: var(--alan-4); }

/* Yatay girişler sayfaya yön verir; hareket kapalıysa komitas.css hepsini
   doğrudan görünür kılar. */
.beliren[data-yon="sol"] { transform: translateX(-24px); }
.beliren[data-yon="sag"] { transform: translateX(24px); }
.beliren[data-yon].gorundu { transform: none; }
.neden-hero-gorsel.beliren[data-yon="sag"] {
    transform: translateX(24px) perspective(1000px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
}
.neden-hero-gorsel.beliren.gorundu,
.neden-kaynak-gorseli.beliren.gorundu {
    transform: perspective(1000px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
}

@media (max-width: 900px) {
    .neden-hero,
    .neden-akis-izgara,
    .neden-iki { grid-template-columns: 1fr; }
    .neden-hero-gorsel,
    .neden-kaynak-gorseli { width: min(100%, 620px); margin-inline: auto; }
    .neden-kartlar { grid-template-columns: 1fr; }
    .neden-kart { min-height: 0; }
    .neden-kart:nth-child(2),
    .neden-kart:nth-child(3) { margin-top: 0; }
}

@media (max-width: 560px) {
    .neden-kahraman { padding-top: 44px; }
    .neden-hero-yazi h1 { font-size: clamp(39px, 12vw, 52px); }
    .neden-kart, .neden-buyuk-kart { border-radius: 18px; }
    .neden-son { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .neden-hero-gorsel img { animation: none !important; }
    .neden-hero-gorsel,
    .neden-kaynak-gorseli { transform: none !important; }
}