/* Projelerimiz sayfasına özel stiller. Site genelindeki Bootstrap/style.css ile
   çakışmaması için tüm sınıflar "psc-" (project showcase) ön ekiyle isimlendirildi. */

.psc-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.psc-hero {
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(0deg, rgba(0,33,43,.25), transparent 45%), url("/web/img/project-showcase/solar-field.webp") center 58% / cover no-repeat;
}
.psc-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,55,67,.9), rgba(0,62,72,.64));
}
.psc-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 70px;
    text-align: center;
}
.psc-hero__content > p {
    margin: 0;
    color: #8dd05d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}
.psc-hero h1 {
    margin: 16px 0 13px;
    font-size: clamp(38px,5vw,60px);
    line-height: .98;
    letter-spacing: -.045em;
    color: #fff;
}
.psc-hero__content > span {
    max-width: 680px;
    color: rgba(255,255,255,.84);
    font-size: 16px;
    line-height: 1.75;
}

.psc-projects-section {
    padding: 70px 0 92px;
    background: radial-gradient(circle at 50% 0, rgba(129,197,92,.08), transparent 30%), #fff;
    color: #0a2932;
}
.psc-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}
.psc-section-heading p {
    margin: 0;
    color: #079447;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .2em;
}
.psc-section-heading h2 {
    margin: 9px 0 0;
    font-size: clamp(28px,4vw,40px);
    letter-spacing: -.035em;
    color: #0a2932;
}
.psc-section-heading > span {
    max-width: 440px;
    color: #667a7f;
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
}
.psc-empty {
    color: #667a7f;
    text-align: center;
    padding: 40px 0;
}
.psc-projects-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
}

.psc-project-card {
    position: relative;
    min-height: 350px;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #dce8df;
    box-shadow: 0 15px 35px rgba(3,45,56,.1);
    outline: none;
    isolation: isolate;
}
.psc-project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color 180ms ease;
}
.psc-project-card:focus-visible::after { border-color: #079447; }
.psc-project-card__photo, .psc-project-card__veil, .psc-project-card__reveal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.psc-project-card__photo {
    z-index: -2;
    object-fit: cover;
    transition: transform 650ms cubic-bezier(.2,.75,.25,1), opacity 420ms ease;
}
.psc-project-card__veil {
    z-index: -1;
    background: linear-gradient(180deg, transparent 25%, rgba(0,39,48,.88) 100%);
    transition: opacity 350ms ease;
}
.psc-project-card__summary {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 25px;
    color: #fff;
    transition: opacity 220ms ease, transform 360ms ease;
}
.psc-project-card__number {
    margin-bottom: 3px;
    color: #9bd779;
    font-size: 13px;
    font-weight: 800;
}
.psc-project-card__summary p, .psc-project-card__reveal-heading p {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.psc-project-card__summary p { color: rgba(255,255,255,.72); }
.psc-project-card__summary h2, .psc-project-card__reveal-heading h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: inherit;
}
.psc-project-card__reveal {
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 22px;
    background:
        radial-gradient(circle at 50% 43%, rgba(130,198,93,.22), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,247,233,.98));
    color: #0a2932;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 350ms ease, transform 470ms cubic-bezier(.2,.75,.25,1);
}
.psc-project-card__reveal-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.psc-project-card__reveal-heading p { color: #079447; }
.psc-project-card__facts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: center;
    gap: 18px;
    margin-block: auto;
}
.psc-project-fact {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    transform: translateY(14px) scale(.96);
    transition: transform 520ms cubic-bezier(.2,.75,.25,1);
}
.psc-project-fact:nth-child(2) { transition-delay: 65ms; }

.psc-project-fact__art {
    position: relative;
    display: grid;
    width: 150px;
    height: 160px;
    place-items: center;
    transform-origin: 50% 80%;
}
.psc-project-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.psc-project-layer--circle { z-index: 1; }
.psc-project-layer--electric { z-index: 2; }
.psc-project-layer--house,
.psc-project-layer--tower,
.psc-project-layer--panel,
.psc-project-layer--generator { z-index: 3; }
.psc-project-layer--leaf-left,
.psc-project-layer--leaf-right-tall,
.psc-project-layer--leaf-right-small { z-index: 4; }
.psc-project-layer--pill { z-index: 5; }
.psc-project-pill {
    top: auto;
    left: 5%;
    right: 5%;
    bottom: 0;
    width: auto;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    border-radius: 17px;
    background: #F6F6F6;
}
.psc-project-pill__value {
    font-family: var(--body-font, "Exo 2", sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.psc-project-pill__caption {
    font-family: var(--body-font, "Exo 2", sans-serif);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #7a7a7a;
}
.psc-project-layer--circle { transform-origin: 45% 45%; }
.psc-project-layer--house { transform-origin: 48% 72%; }
.psc-project-layer--leaf-left { transform-origin: 13% 73%; }
.psc-project-layer--leaf-right-tall { transform-origin: 82% 76%; }
.psc-project-layer--leaf-right-small { transform-origin: 87% 78%; }
.psc-project-layer--tower { transform-origin: 70% 78%; }
.psc-project-layer--panel { transform-origin: 28% 69%; }
.psc-project-layer--generator { transform-origin: 51% 72%; }
.psc-project-layer--electric { transform-origin: 49% 68%; }

@media (hover: hover), (pointer: coarse) {
    .psc-project-card:hover .psc-project-card__photo,
    .psc-project-card:focus .psc-project-card__photo { transform: scale(1.06); opacity: .18; }
    .psc-project-card:hover .psc-project-card__veil,
    .psc-project-card:focus .psc-project-card__veil,
    .psc-project-card:hover .psc-project-card__summary,
    .psc-project-card:focus .psc-project-card__summary { opacity: 0; }
    .psc-project-card:hover .psc-project-card__summary,
    .psc-project-card:focus .psc-project-card__summary { transform: translateY(10px); }
    .psc-project-card:hover .psc-project-card__reveal,
    .psc-project-card:focus .psc-project-card__reveal { opacity: 1; transform: translateY(0); }
    .psc-project-card:hover .psc-project-fact,
    .psc-project-card:focus .psc-project-fact { transform: translateY(0) scale(1); }
    .psc-project-card:hover .psc-project-fact__art,
    .psc-project-card:focus .psc-project-fact__art {
        animation: psc-fact-float 2.8s ease-in-out 1.25s infinite;
    }

    .psc-project-layer { opacity: 0; }

    .psc-project-card:hover .psc-project-layer--circle,
    .psc-project-card:focus .psc-project-layer--circle {
        animation: psc-fact-circle-in 520ms cubic-bezier(.2,.8,.25,1.15) both;
    }
    .psc-project-card:hover .psc-project-layer--pill,
    .psc-project-card:focus .psc-project-layer--pill {
        animation: psc-fact-pill-in 420ms ease-out 720ms both;
    }

    .psc-project-card:hover .psc-project-fact--off-grid .psc-project-layer--house,
    .psc-project-card:focus .psc-project-fact--off-grid .psc-project-layer--house {
        animation: psc-off-house-in 620ms cubic-bezier(.18,.82,.25,1.18) 190ms both;
    }
    .psc-project-card:hover .psc-project-layer--leaf-left,
    .psc-project-card:focus .psc-project-layer--leaf-left {
        animation: psc-leaf-left-open 620ms cubic-bezier(.2,.85,.25,1.12) 360ms both;
    }
    .psc-project-card:hover .psc-project-layer--leaf-right-tall,
    .psc-project-card:focus .psc-project-layer--leaf-right-tall {
        animation: psc-leaf-right-open 650ms cubic-bezier(.2,.85,.25,1.12) 300ms both;
    }
    .psc-project-card:hover .psc-project-layer--leaf-right-small,
    .psc-project-card:focus .psc-project-layer--leaf-right-small {
        animation: psc-leaf-right-open 590ms cubic-bezier(.2,.85,.25,1.12) 430ms both;
    }

    .psc-project-card:hover .psc-project-layer--tower,
    .psc-project-card:focus .psc-project-layer--tower {
        animation: psc-tower-rise 650ms cubic-bezier(.18,.82,.25,1.12) 190ms both;
    }
    .psc-project-card:hover .psc-project-layer--panel,
    .psc-project-card:focus .psc-project-layer--panel {
        animation: psc-panel-connect 620ms cubic-bezier(.18,.82,.25,1.12) 360ms both;
    }

    .psc-project-card:hover .psc-project-layer--generator,
    .psc-project-card:focus .psc-project-layer--generator {
        animation: psc-generator-rise 560ms cubic-bezier(.18,.82,.25,1.12) 200ms both;
    }
    .psc-project-card:hover .psc-project-layer--electric,
    .psc-project-card:focus .psc-project-layer--electric {
        animation: psc-electricity-rise 680ms cubic-bezier(.16,.86,.25,1.12) 430ms both;
    }
}
@keyframes psc-fact-float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(.7deg); }
}
@keyframes psc-fact-circle-in {
    0% { opacity: 0; transform: scale(.22); }
    70% { opacity: 1; transform: scale(1.035); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes psc-fact-pill-in {
    from { opacity: 0; transform: translateY(8px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes psc-off-house-in {
    0% { opacity: 0; transform: translateY(18px) scale(.52); }
    72% { opacity: 1; transform: translateY(-2px) scale(1.035); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes psc-leaf-left-open {
    0% { opacity: 0; transform: translate(15px, 8px) rotate(18deg) scale(.7); }
    100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes psc-leaf-right-open {
    0% { opacity: 0; transform: translate(-14px, 9px) rotate(-20deg) scale(.68); }
    100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes psc-tower-rise {
    0% { opacity: 0; transform: translateY(22px) scaleY(.58); }
    72% { opacity: 1; transform: translateY(-2px) scaleY(1.025); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes psc-panel-connect {
    0% { opacity: 0; transform: translate(-18px, 12px) rotate(-8deg) scale(.78); }
    65% { opacity: 1; transform: translate(2px, -2px) rotate(1.5deg) scale(1.03); }
    100% { opacity: 1; transform: translate(0) rotate(0) scale(1); }
}
@keyframes psc-generator-rise {
    0% { opacity: 0; transform: translateY(17px) scale(.84); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes psc-electricity-rise {
    0% { opacity: 0; transform: translateY(34px) scale(.72); filter: brightness(1); }
    68% { opacity: 1; transform: translateY(-4px) scale(1.08); filter: brightness(1.25); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (max-width: 1020px) {
    .psc-projects-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
    .psc-container { width: min(100% - 32px,560px); }
    .psc-hero { min-height: 420px; }
    .psc-hero__content { padding-block: 56px; }
    .psc-hero__content > span { font-size: 14px; }
    .psc-projects-section { padding: 56px 0 64px; }
    .psc-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .psc-section-heading > span { text-align: left; }
    .psc-projects-grid { grid-template-columns: 1fr; }
    .psc-project-card { min-height: 390px; }
    .psc-project-card__photo { height: 42%; }
    .psc-project-card__reveal {
        inset: auto 0 0;
        height: 68%;
        border-radius: 28px 28px 0 0;
    }
    .psc-project-fact__art { width: 132px; height: 145px; }
}

@media (prefers-reduced-motion: reduce) {
    .psc-project-card *, .psc-project-card *::before, .psc-project-card *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}