/* ================================================================
   MURAT KARAN - HERO #2 / KESIK TECH FRAME
   Bu dosya style.css'ten SONRA yuklenir.
   Eski oval/ring denemelerini guvenli bicimde override eder.
   ================================================================ */

/* Eski oval, portal ve orbit katmanlarini tamamen kapat. */
.hero-premium .hero-ring,
.hero-premium .hero-ring-outer,
.hero-premium .hero-ring-inner,
.hero-premium .hero-orbit-layer,
.hero-premium .hero-orbit,
.hero-premium .hero-orbit-path,
.hero-premium .hero-orbit-dot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Sag gorsel alanini tech-frame icin dengeli hale getir. */
.hero-premium .hero-visual {
    position: relative !important;
    width: 100% !important;
    min-height: 520px !important;
    height: min(600px, calc(100vh - 170px)) !important;
    max-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    isolation: isolate !important;
    transform: none !important;
}

/* Ana kesik teknolojik cerceve. */
.hero-premium .hero-photo-shell {
    --mk-tech-cut: polygon(
        8% 0,
        89% 0,
        100% 12%,
        100% 84%,
        91% 100%,
        10% 100%,
        0 87%,
        0 14%
    );

    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: min(620px, 96%) !important;
    height: 390px !important;
    margin: 0 auto !important;

    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: var(--mk-tech-cut) !important;
    -webkit-clip-path: var(--mk-tech-cut) !important;

    background:
        linear-gradient(
            135deg,
            #67E8F9 0%,
            #0284C7 16%,
            #60A5FA 42%,
            #38BDF8 64%,
            #0284C7 82%,
            #67E8F9 100%
        ) !important;

    box-shadow: none !important;
    filter:
        drop-shadow(0 26px 34px rgba(0, 0, 0, .42))
        drop-shadow(0 0 10px rgba(103,232,249, .55))
        drop-shadow(0 0 23px rgba(96,165,250, .45)) !important;

    transform: none !important;
    animation: mkTechFrameFloat 6.5s ease-in-out infinite !important;
    isolation: isolate !important;
    z-index: 4 !important;
}

/* Ic koyu panel: neon border bandini gorunur birakir. */
.hero-premium .hero-photo-shell::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 3px !important;
    z-index: 1 !important;
    pointer-events: none !important;

    clip-path: var(--mk-tech-cut) !important;
    -webkit-clip-path: var(--mk-tech-cut) !important;

    background:
        linear-gradient(
            145deg,
            rgba(5,14,22, .08),
            rgba(9,21,31, .02)
        ) !important;

    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow:
        inset 0 0 22px rgba(103,232,249, .08),
        inset 0 0 40px rgba(96,165,250, .08) !important;
}

/* Teknolojik koseleri ve enerji vurgularini verir. */
.hero-premium .hero-photo-shell::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    pointer-events: none !important;

    clip-path: var(--mk-tech-cut) !important;
    -webkit-clip-path: var(--mk-tech-cut) !important;

    background:
        linear-gradient(90deg, #67E8F9, #60A5FA) left top / 28% 3px no-repeat,
        linear-gradient(180deg, #67E8F9, transparent) left top / 3px 34% no-repeat,
        linear-gradient(270deg, #38BDF8, #60A5FA) right top / 24% 3px no-repeat,
        linear-gradient(180deg, #38BDF8, transparent) right top / 3px 30% no-repeat,
        linear-gradient(90deg, #60A5FA, #67E8F9) left bottom / 25% 3px no-repeat,
        linear-gradient(0deg, #67E8F9, transparent) left bottom / 3px 30% no-repeat,
        linear-gradient(270deg, #67E8F9, #60A5FA) right bottom / 30% 3px no-repeat,
        linear-gradient(0deg, #60A5FA, transparent) right bottom / 3px 35% no-repeat !important;

    opacity: .92 !important;
    filter: drop-shadow(0 0 7px rgba(96,165,250, .75)) !important;
}

/* Fotograf: kesik frame'in icine temiz ve tam oturur. */
.hero-premium .hero-photo-shell .hero-person,
.hero-premium .hero-person {
    position: absolute !important;
    inset: 4px !important;

    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
    border-radius: 0 !important;

    clip-path: var(--mk-tech-cut) !important;
    -webkit-clip-path: var(--mk-tech-cut) !important;

    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;

    transform: none !important;
    animation: none !important;

    filter:
        brightness(.98)
        contrast(1.04)
        saturate(1.06) !important;

    z-index: 2 !important;
}

/* Hero gorseli yoksa placeholder da ayni frame'e uyar. */
.hero-premium .hero-person-placeholder {
    position: absolute !important;
    inset: 4px !important;
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: var(--mk-tech-cut) !important;
    -webkit-clip-path: var(--mk-tech-cut) !important;
    background: rgba(8,20,30, .92) !important;
    z-index: 2 !important;
}

/* Imza / slogan frame'in sag-alt bolgesinde okunakli kalsin. */
.hero-premium .hero-signature {
    z-index: 12 !important;
    right: 5% !important;
    top: auto !important;
    bottom: 13% !important;
    max-width: 205px !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    transform: rotate(-6deg) !important;
    color: #DBEAFE !important;
    text-shadow:
        0 0 10px rgba(96,165,250, .60),
        0 0 22px rgba(103,232,249, .18) !important;
}

/* 50+ kartini tech-frame ile cakismadan ustte tut. */
.hero-premium .hero-stats-stack {
    z-index: 20 !important;
}

.hero-premium .hero-stat-card {
    border-color: rgba(96,165,250, .42) !important;
    background: rgba(8,21,31, .80) !important;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, .28),
        0 0 18px rgba(96,165,250, .12) !important;
}

/* Frame cok hareketsiz kalmasin; sadece hafif suzulme. */
@keyframes mkTechFrameFloat {
    0%, 100% {
        transform: translateY(0) !important;
    }
    50% {
        transform: translateY(-6px) !important;
    }
}

/* Desktop'ta hero ile iyi oran. */
@media (min-width: 1261px) {
    .hero-premium .hero-photo-shell {
        width: min(650px, 98%) !important;
        height: 405px !important;
    }
}

/* Orta ekran. */
@media (min-width: 901px) and (max-width: 1260px) {
    .hero-premium .hero-visual {
        min-height: 470px !important;
        height: 500px !important;
    }

    .hero-premium .hero-photo-shell {
        width: min(560px, 96%) !important;
        height: 360px !important;
    }

    .hero-premium .hero-signature {
        right: 4% !important;
        bottom: 10% !important;
        font-size: 21px !important;
    }
}

/* Tablet ve mobil: chamfer korunur, oran daha kompakt olur. */
@media (max-width: 900px) {
    .hero-premium .hero-visual {
        min-height: 390px !important;
        height: 410px !important;
        max-height: none !important;
    }

    .hero-premium .hero-photo-shell {
        width: min(92vw, 560px) !important;
        height: min(58vw, 350px) !important;
        min-height: 270px !important;
    }

    .hero-premium .hero-signature {
        right: 6% !important;
        bottom: 9% !important;
        font-size: 19px !important;
        max-width: 165px !important;
    }
}

@media (max-width: 600px) {
    .hero-premium .hero-visual {
        min-height: 330px !important;
        height: 350px !important;
    }

    .hero-premium .hero-photo-shell {
        --mk-tech-cut: polygon(
            10% 0,
            87% 0,
            100% 14%,
            100% 84%,
            90% 100%,
            11% 100%,
            0 86%,
            0 16%
        );

        width: min(94vw, 440px) !important;
        height: 285px !important;
        min-height: 0 !important;
    }

    .hero-premium .hero-signature {
        font-size: 16px !important;
        right: 5% !important;
        bottom: 7% !important;
    }
}

/* Kullanici azaltimli hareket tercih ediyorsa animasyon yok. */
@media (prefers-reduced-motion: reduce) {
    .hero-premium .hero-photo-shell {
        animation: none !important;
    }
}

/* MK HERO MOUSE TILT START */
/* ================================================================
   HERO FOTOĞRAF - GERÇEK MOUSE 3D TILT
   Mevcut mkTechFrameFloat animasyonunu hover sırasında güvenli kapatır.
================================================================ */

.hero-premium .hero-visual {
    perspective: 1100px !important;
    perspective-origin: center center !important;
}

.hero-premium .hero-photo-shell {
    cursor: pointer !important;
    transform-style: preserve-3d !important;
    transform-origin: center center !important;
    will-change: transform !important;
    transition:
        filter .28s ease,
        box-shadow .28s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ÖNEMLİ: eski sürekli float animasyonu JS transformunu eziyordu.
   Sadece mouse frame üzerindeyken onu kapatıyoruz. */
.hero-premium .hero-photo-shell.mk-tilt-active {
    animation: none !important;

    filter:
        drop-shadow(0 25px 34px rgba(0, 0, 0, .46))
        drop-shadow(0 0 9px rgba(103,232,249, .42))
        drop-shadow(0 0 18px rgba(96,165,250, .36)) !important;
}

.hero-premium .hero-photo-shell .hero-person,
.hero-premium .hero-photo-shell > img.hero-person {
    transition:
        transform .32s cubic-bezier(.2,.75,.25,1),
        filter .32s ease !important;
    transform-origin: center center !important;
    will-change: transform !important;
}

.hero-premium .hero-photo-shell.mk-tilt-active .hero-person,
.hero-premium .hero-photo-shell.mk-tilt-active > img.hero-person {
    transform: scale(1.018) !important;
    filter:
        brightness(1.025)
        contrast(1.04)
        saturate(1.055) !important;
}

/* Mobil/tablet dokunmatik cihazlarda 3D tilt kapalı. */
@media (hover: none), (pointer: coarse) {
    .hero-premium .hero-photo-shell,
    .hero-premium .hero-photo-shell.mk-tilt-active {
        animation: mkTechFrameFloat 6.5s ease-in-out infinite !important;
        transform: none !important;
    }

    .hero-premium .hero-photo-shell .hero-person,
    .hero-premium .hero-photo-shell > img.hero-person {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-premium .hero-photo-shell,
    .hero-premium .hero-photo-shell.mk-tilt-active {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    .hero-premium .hero-photo-shell .hero-person,
    .hero-premium .hero-photo-shell > img.hero-person {
        transform: none !important;
        transition: none !important;
    }
}
/* MK HERO MOUSE TILT END */