/* ============================================================
   FIMAK — kalite-ve-sertifikalar.css
   Yalnizca kalite-ve-sertifikalar.php'de yuklenir; style.css'i tamamlar.
   Sayfa hero'su paylasilan css/page-hero.css dosyasindadir.

   Bolumler
   1. Kalite politikasi (baslik + gorsel + ilkeler)
   2. Sertifikalar bolumu (baslik + izgara)
   3. Belge karti
   4. Onizleme penceresi (lightbox)
   5. Responsive (tum media query'ler burada)

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur.
   ============================================================ */


/* ------------------------------------------------------------
   1. Kalite politikasi
   Misyon/vizyon bolumuyle ayni dil: kirmizi tirnak, ince baslik,
   gorselin altinda ayni dosyadan yapilmis bulanik golge.
   Gri zemin, altindaki beyaz sertifika bolumunden ayirir.
   ------------------------------------------------------------ */
.kpol {
    overflow: hidden;
    padding: clamp(76px, 54px + 5.8vw, 166px) 0 clamp(76px, 48px + 7.4vw, 190px);
    background-color: var(--surface-alt);
    color: var(--text);

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.kpol-container {
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: clamp(20px, 3.4vw, 66px);
}


/* ---------- Ust: baslik + gorsel ---------- */
.kpol-top {
    display: grid;
    align-items: center;
    column-gap: clamp(32px, 13.7px + 1.79vw, 64px);
    row-gap: clamp(36px, 20px + 2vw, 56px);
}

.kpol-quote {
    display: block;
    width: clamp(40px, 35.6px + 1.17vw, 58px);
    height: auto;
    fill: var(--brand);
}

.kpol-title {
    max-width: 16ch;
    margin-top: clamp(28px, 18.3px + 2.59vw, 56px);
    font-size: clamp(28px, 21.4px + 1.75vw, 55px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--text);
}

.kpol-lead {
    max-width: 52ch;
    margin-top: clamp(20px, 15px + 1.33vw, 32px);
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
}

.kpol-visual {
    position: relative;
    /* isolation: golge z-index -1 ile bolum zeminine degil bu kutuya gore yerlesir */
    isolation: isolate;
    width: 100%;
}

.kpol-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: cover;
    border-radius: 14px;
}

/* Ayni gorselin bulanik kopyasi: altta yumusak bir golge birakir */
.kpol-visual .shadow {
    position: absolute;
    top: clamp(12px, 8px + 1.07vw, 28px);
    left: clamp(16px, 8px + 2.13vw, 48px);
    z-index: -1;
    opacity: 0.18;
    filter: blur(18px);
    pointer-events: none;
}

.kpol-visual .main {
    position: relative;
    z-index: 1;
}


/* ---------- Alt: numarali ilkeler ---------- */
.kpol-list {
    display: grid;
    gap: clamp(32px, 20px + 1.6vw, 48px) clamp(24px, 12px + 1.6vw, 56px);
    margin-top: clamp(58px, 38px + 5.2vw, 130px);
    padding-top: clamp(38px, 24px + 1.9vw, 66px);
    border-top: 1px solid var(--border);
    list-style: none;
}

.kpol-item {
    display: flex;
    flex-direction: column;
    /* Numara baslıga yakin dursun, metin biraz ayrik */
    gap: 10px;
}

.kpol-item__no {
    font-size: clamp(13px, 12.5px + 0.13vw, 15px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--brand);
}

.kpol-item__title {
    font-size: clamp(18px, 16.5px + 0.39vw, 24px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text);
}

.kpol-item__text {
    font-size: clamp(15px, 0.95vw, 17px);
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
}


/* ------------------------------------------------------------
   2. Sertifikalar bolumu
   Izgaranin ustunde ayri bir padding var: kartlarin gorselleri
   kart zemininin ustune tastigi icin yer acmak gerekiyor.
   ------------------------------------------------------------ */
.certs {
    --cert-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Kartlar arasi bosluk: gorsel tasmasi (bkz. .cert-card__media)
       bu degerden kucuk tutulur, yoksa ustteki karta girer */
    --cert-gap: clamp(24px, 2vw, 32px);

    padding: clamp(48px, 4.7vw, 76px) 0 clamp(76px, 7vw, 142px);
    background-color: var(--surface);
}

.certs__container {
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: clamp(20px, 3.4vw, 66px);
}

.certs__title {
    font-size: clamp(30px, 2.5vw, 48px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
}

.certs__lead {
    max-width: 62ch;
    margin-top: clamp(12px, 1vw, 18px);
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.55;
    color: var(--text-secondary);
}

.certs__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cert-gap);
    margin-top: clamp(48px, 4.7vw, 94px);
    /* Ilk siranin tasmasina yer ac */
    padding-top: clamp(24px, 2vw, 32px);
    list-style: none;
}


/* ------------------------------------------------------------
   3. Belge karti
   Cercevesiz, acik gri zeminli sade kart. Fare uzerine gelince
   kart yukari kalkar ve golgesi derinlesir; renk degismez, boylece
   sayfadaki kirmizi yalnizca tirnak ve ilke numaralarinda kalir.
   Dokunmatik girdide bu durum devre disi (bkz. 5).
   ------------------------------------------------------------ */
.cert-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 clamp(20px, 1.7vw, 32px) clamp(20px, 1.7vw, 32px);
    border-radius: 20px;
    background-color: var(--surface-alt);
    transition: transform 0.5s var(--cert-ease), box-shadow 0.5s var(--cert-ease);
}

.cert-card__media {
    position: relative;
    display: flex;
    justify-content: center;
    height: clamp(240px, 17.5vw, 336px);
    /* Ustten tasma --cert-gap'ten kucuk: ust siradaki karta girmez */
    margin-top: clamp(-20px, -1.4vw, -14px);
    /* Tiklamalar alttaki dugmelere gitsin, gorsel yakalamasin */
    pointer-events: none;
}

.cert-card__media img {
    height: 100%;
    width: auto;
    max-width: none;
    transform-origin: 50% 60%;
    transition: transform 0.5s var(--cert-ease);
}

/* Gorsel yoksa notr yer tutucu. Kart zemini gri oldugu icin
   yer tutucu beyazdir, yoksa kartin icinde kaybolur */
.cert-card__media--empty {
    align-items: center;
    border-radius: 14px;
    background-color: var(--surface);
    color: var(--text-secondary);
}

.cert-card__media--empty svg {
    width: clamp(48px, 4vw, 64px);
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cert-card__title {
    /* min-height: baslik bir ya da iki satir olsa da dugmeler ayni hizada kalir */
    min-height: 2.5em;
    margin-top: clamp(14px, 1.2vw, 22px);
    font-size: clamp(16px, 1.05vw, 20px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text);
}

.cert-card__actions {
    display: flex;
    gap: 10px;
    margin-top: clamp(14px, 1.1vw, 20px);
}

.cert-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    /* Saydam kenarlik hep duruyor: hover'da yalnizca rengi degisince
       dugme zipllamaz */
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: var(--surface);
    /* style.css'te a { color: var(--brand-dark) } var; indirme baglantisi
       da dugme gibi gorunsun diye rengi burada sabitliyoruz */
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.4s var(--cert-ease), background-color 0.4s var(--cert-ease);
}

.cert-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* display:grid oldugu icin hidden niteligi tek basina calismiyor;
   JS yoksa "Goruntule" dugmesi gizli kalsin */
.cert-btn[hidden] { display: none; }

.cert-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* ---------- Kart hover durumu ---------- */
/* focus-within da dahil: klavyeyle dolasirken de ayni geri bildirim */
.cert-card:hover,
.cert-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.12);
}

.cert-card:hover .cert-card__media img,
.cert-card:focus-within .cert-card__media img { transform: scale(1.03); }

/* Kirmizi yalnizca burada: dugme kenarligi */
.cert-card:hover .cert-btn,
.cert-card:focus-within .cert-btn { border-color: var(--brand); }

/* ------------------------------------------------------------
   4. Onizleme penceresi
   visibility ile kapatilir (display:none degil): gecisler calisir ve
   kapaliyken ic ogeler sekme sirasindan cikar.
   ------------------------------------------------------------ */
.cert-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: rgb(10 10 12 / 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.cert-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

.cert-lightbox__inner {
    position: relative;
    max-width: min(92vw, 720px);
    transform: scale(0.96);
    transition: transform 0.45s var(--cert-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.cert-lightbox.is-open .cert-lightbox__inner { transform: none; }

.cert-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin-inline: auto;
    border-radius: 6px;
    background-color: var(--surface);
}

.cert-lightbox__caption {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    color: var(--text-on-dark);
}

.cert-lightbox__close {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cert-lightbox__close:hover {
    background-color: var(--text);
    color: #fff;
}

.cert-lightbox__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   5. Responsive
   ------------------------------------------------------------ */
/* Genis ekranda baslik solda gorsel sagda; ilkeler dort sutun */
@media (min-width: 1024px) {
    .kpol-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .kpol-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .kpol-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .kpol-title { max-width: none; }
}

@media (max-width: 1280px) {
    .certs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cert-card__media { height: clamp(220px, 40vw, 320px); }
}

@media (max-width: 560px) {
    .certs__grid { grid-template-columns: 1fr; }
    .cert-card__media { height: 280px; }
}

/* Dokunmatik girdide :hover yapisir kalir; kalkma efektini
   yalnizca gercek fare girdisinde acalim */
@media (hover: none) {
    .cert-card:hover {
        transform: none;
        box-shadow: none;
    }

    .cert-card:hover .cert-btn { border-color: transparent; }
    .cert-card:hover .cert-card__media img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {

    .cert-card,
    .cert-card__media img,
    .cert-btn,
    .cert-lightbox,
    .cert-lightbox__inner,
    .cert-lightbox__close { transition: none; }

    /* Hareket yok: kart kalkmasin, gorsel buyumesin.
       Golge ve kenarlik renk degisimi kalir, bunlar hareket degil */
    .cert-card:hover,
    .cert-card:focus-within { transform: none; }

    .cert-card:hover .cert-card__media img,
    .cert-card:focus-within .cert-card__media img { transform: none; }
}