/* ===========================================================================
   BELGE VE SERTIFIKALAR SAYFASI (04.09.2026, Ozgur - Claude Design handoff
   "Oyuneks Sertifikalar")

   Sayfa kurumsal sol menu kabugunun DISINDA, tam genislikte basilir
   (master.blade.php istisnasi); ustte kurumsal sekme seridi
   (css/kurumsal-sekmeler.css, --ku* tokenlar). Icerik sitenin .container'ina
   (1550px) oturur; tuvaldeki 1920/100px kenar bosluklari yerine header ile
   ayni hiza. Yazi tipi sitenin kendi fontu (Wix Madefor Display).

   Belge gorseli KAGIT zemini: koyu temada beyaz (belge kagit gibi yukselir),
   acik temada #F0EEE6 + 1px alt cizgi (beyaz kartla birlesmesin). Alt kenarda
   90px zemin rengine sonum. Eski odunc CSS'ler (order-detail, player-market-
   category) ve Fancybox kalkti; lightbox bu dosyanin sonunda.
   =========================================================================== */
.seSayfa {
    --seKagit: #FFFFFF;
    --seKagitCizgi: transparent;
    --sePlaka: rgba(24,24,32,.82);
    --sePlakaIkon: #C8C9D8;
    --seDoldu: #E0553F;
    --seDolduZemin: rgba(224,85,63,.12);
    --seDolduKenar: rgba(224,85,63,.40);
    --seLbPerde: rgba(12,12,16,.88);
    --seLbGolge: 0 30px 80px rgba(0,0,0,.6);
    color: var(--kuMetin); padding-bottom: 80px;
}
body.light .seSayfa {
    --seKagit: #F0EEE6;
    --seKagitCizgi: #E3E1D9;
    --sePlakaIkon: #FFFFFF;
    --seDolduZemin: rgba(224,85,63,.08);
    --seLbPerde: rgba(31,30,29,.78);
    --seLbGolge: 0 30px 80px rgba(31,30,29,.35);
}
.seSayfa a { color: var(--kuNane); }
.seSayfa a:hover { color: var(--kuNaneHover); }
.seSayfa img { display: block; }
.seSayfa .mono, .seLightbox .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.seSayfa .sayi { font-variant-numeric: tabular-nums; }

/* Baslik blogu: sol metin + sagda 3 ozet kutu (alt hizali) */
.seHero { padding-top: 56px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.seHeroMetin { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.seEtiket { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; color: var(--kuNane); text-transform: uppercase; }
.seHero h1 { font-size: 48px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.05; color: var(--kuBaslik); margin: 0; text-wrap: balance; }
.seHero p { font-size: 16px; line-height: 1.55; color: var(--kuUcuncul); margin: 0; text-wrap: pretty; }
.seOzetler { flex: none; display: flex; gap: 12px; }
.seOzet {
    display: flex; flex-direction: column; gap: 4px; min-width: 132px; padding: 14px 18px;
    background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 12px; box-shadow: var(--kuKartGolge);
}
.seOzet strong { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; color: var(--kuBaslik); }
.seOzet strong.nane { color: var(--kuNane); }
.seOzet span { font-size: 11px; font-weight: 600; color: var(--kuGovde); }

/* Sertifika kartlari: 4 kolon; tum kart baglanti (lightbox) */
.seIzgara { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.seSayfa a.seKart {
    display: flex; flex-direction: column; color: var(--kuMetin);
    background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 14px; overflow: hidden;
    box-shadow: var(--kuKartGolge); transition: border-color .18s, transform .18s;
}
.seSayfa a.seKart:hover { color: var(--kuMetin); border-color: var(--kuNaneKenarHover); transform: translateY(-3px); }
.seSayfa a.seKart:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.seKagit { position: relative; padding: 18px 18px 0; background: var(--seKagit); border-bottom: 1px solid var(--seKagitCizgi); display: flex; justify-content: center; }
.seKagit img {
    width: 100%; height: auto; aspect-ratio: 520 / 737; object-fit: cover; object-position: top;
    border-radius: 6px 6px 0 0; box-shadow: 0 -2px 18px rgba(0,0,0,.18);
}
.seSonum { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent 0%, var(--seKagit) 100%); pointer-events: none; }
.seBuyut {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--sePlaka); color: var(--sePlakaIkon); opacity: 0; transition: opacity .18s;
}
.seBuyut svg { width: 15px; height: 15px; }
.seKart:hover .seBuyut, .seKart:focus-visible .seBuyut { opacity: 1; }
.seKartMetin { flex: 1; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.seKartUst { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seKod { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--kuBaslik); }
.seRozet {
    flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
    background: var(--kuNaneZemin); border: 1px solid var(--kuNaneKenar);
    font-size: 9.5px; font-weight: 800; letter-spacing: .8px; color: var(--kuNane); text-transform: uppercase;
}
.seRozet i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.seRozet.doldu { background: var(--seDolduZemin); border-color: var(--seDolduKenar); color: var(--seDoldu); }
.seSistem { display: flex; flex-direction: column; gap: 2px; }
.seSistem strong { font-size: 13px; font-weight: 700; color: var(--kuMetin); }
.seSistem em { font-size: 11px; color: var(--kuUcuncul); }
.seAciklama { font-size: 12px; line-height: 1.55; color: var(--kuGovde); margin: 0; text-wrap: pretty; }
.seKartAlt { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--kuInceKenar); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.seKartAlt > div { display: flex; flex-direction: column; gap: 2px; }
.seKartAlt dt { font-size: 9.5px; font-weight: 700; letter-spacing: .9px; color: var(--kuUcuncul); text-transform: uppercase; }
.seKartAlt dd { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--kuMetin); }

/* Guven satiri: 3 esit kart */
.seGuven { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.seGuvenKart { display: flex; gap: 14px; padding: 18px 20px; background: var(--kuKart); border: 1px solid var(--kuKenar); border-radius: 12px; box-shadow: var(--kuKartGolge); }
.seGuvenIkon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--kuNaneZemin); display: flex; align-items: center; justify-content: center; color: var(--kuNane); }
.seGuvenIkon svg { width: 17px; height: 17px; }
.seGuvenMetin { display: flex; flex-direction: column; gap: 4px; }
.seGuvenMetin strong { font-size: 13.5px; font-weight: 700; color: var(--kuMetin); }
.seGuvenMetin p { font-size: 12px; line-height: 1.5; color: var(--kuUcuncul); margin: 0; }

/* ---- Lightbox (Fancybox yerine) ---------------------------------------------
   .seSayfa disinda basilir (position: fixed); tokenlar icin body.light ile
   kendi koyu/acik degerleri. z-index header/offcanvas ustunde. */
.seLightbox {
    --kuKart: #20212B; --kuKartHover: #272834; --kuKenarBelirgin: #4E4F5C; --kuBaslik: #EDEEF2; --kuMetin: #C8C9D8;
    --kuUcuncul: #8B8C99; --kuNane: #80F1B1; --seLbPerde: rgba(12,12,16,.88); --seLbGolge: 0 30px 80px rgba(0,0,0,.6);
    display: none; position: fixed; inset: 0; z-index: 10050; align-items: center; justify-content: center;
    font-family: "Wix Madefor Display", sans-serif;
}
body.light .seLightbox {
    --kuKart: #FFFFFF; --kuKartHover: #F5F4EE; --kuKenarBelirgin: #C7C5BC; --kuBaslik: #1F1E1D; --kuMetin: #1F1E1D;
    --kuUcuncul: #5F5E58; --kuNane: #137E4C; --seLbPerde: rgba(31,30,29,.78); --seLbGolge: 0 30px 80px rgba(31,30,29,.35);
}
.seLightbox.acik { display: flex; }
body.seLbAcik { overflow: hidden; }
.seLbPerde { position: absolute; inset: 0; background: var(--seLbPerde); }
.seLbUst { position: absolute; top: 20px; left: 100px; right: 100px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 2; }
.seLbBilgi { display: flex; align-items: center; gap: 12px; min-width: 0; }
.seLbBilgi strong { font-size: 15px; font-weight: 800; color: var(--kuBaslik); white-space: nowrap; }
.seLbBilgi span { font-size: 12px; color: var(--kuUcuncul); }
.seLbAraclar { display: flex; align-items: center; gap: 8px; }
.seLightbox a.seLbIndir {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px;
    border: 1px solid var(--kuKenarBelirgin); background: var(--kuKart); color: var(--kuMetin);
    font-size: 12.5px; font-weight: 700; text-decoration: none; transition: border-color .16s, background .16s;
}
.seLightbox a.seLbIndir:hover { color: var(--kuMetin); border-color: var(--kuNane); background: var(--kuKartHover); }
.seLbIndir svg { width: 14px; height: 14px; }
.seLbKapat, .seLbOk {
    display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--kuKenarBelirgin); background: var(--kuKart); color: var(--kuMetin);
    transition: border-color .16s, background .16s;
}
.seLbKapat:hover, .seLbOk:hover { border-color: var(--kuNane); background: var(--kuKartHover); }
.seLbKapat:focus-visible, .seLbOk:focus-visible, .seLbKucuk:focus-visible, .seLightbox a.seLbIndir:focus-visible { outline: 2px solid var(--kuNane); outline-offset: 2px; }
.seLbKapat { width: 40px; height: 40px; }
.seLbKapat svg { width: 16px; height: 16px; }
.seLbOk { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; z-index: 2; }
.seLbOk.sol { left: 100px; }
.seLbOk.sag { right: 100px; }
.seLbOk svg { width: 18px; height: 18px; }
.seLbGorsel { position: relative; z-index: 1; height: calc(100vh - 200px); max-width: calc(100vw - 340px); width: auto; object-fit: contain; border-radius: 8px; box-shadow: var(--seLbGolge); }
.seLbKucukler { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.seLbKucuk {
    flex: none; width: 56px; height: 76px; padding: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: #111; opacity: .5; transition: opacity .16s, border-color .16s;
}
.seLbKucuk:hover { opacity: .8; }
.seLbKucuk.aktif { opacity: 1; border-color: var(--kuNane); }
.seLbKucuk img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---- Tablet ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .seSayfa { padding-bottom: 48px; }
    .seHero { padding-top: 28px; flex-direction: column; align-items: stretch; gap: 18px; }
    .seHero h1 { font-size: 34px; letter-spacing: -1px; }
    .seHero p { font-size: 13.5px; line-height: 1.5; }
    /* ozet kutular basligin altina, 3 kolon yan yana */
    .seOzetler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .seOzet { min-width: 0; padding: 12px 14px; }
    .seOzet strong { font-size: 22px; }
    .seIzgara { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .seGuven { margin-top: 28px; grid-template-columns: 1fr; gap: 12px; }
    /* lightbox: gorsel tam genislik, oklar yerine parmakla kaydirma, kucuk resimler yatay kayar */
    .seLbUst { top: 12px; left: 12px; right: 12px; }
    .seLbOk { display: none; }
    .seLbGorsel { height: auto; max-height: calc(100vh - 200px); max-width: calc(100vw - 24px); }
    .seLbKucukler { justify-content: flex-start; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
    .seLbKucukler::-webkit-scrollbar { display: none; }
}
/* ---- Telefon ----------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .seIzgara { grid-template-columns: 1fr; }
    .seOzet strong { font-size: 20px; }
    .seOzet span { font-size: 10px; }
    .seLbBilgi strong { font-size: 13px; }
    .seLightbox a.seLbIndir { padding: 0 12px; }
}