/* ==========================================================================
   Fotoğraf Galerisi (/galeri) ve albüm detayı (/galeri/{slug}) — "cxp" iç sayfa · 2026-10-19 · önek cxpg-
   bandın altına binen kapak görselli ALBÜM SEKMELERİ · albüm vitrini kartları · 12'li MOZAİK ızgara · lacivert lightbox
   ========================================================================== */
.cxpg { padding-top: 0; }

/* ── albüm sekmeleri (bant altına biner: .cxp-overlap) ── */
.cxpg-tabs { display: flex; gap: 10px; padding: 12px; background: #fff; border-radius: calc(26px * var(--ax-rs, 1)); box-shadow: 0 0 0 1.5px var(--cx-line, #e4e9e4); overflow-x: auto; scrollbar-width: none; }
.cxpg-tabs::-webkit-scrollbar { display: none; }
.cxpg-tab { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 9px 18px 9px 9px; border-radius: calc(19px * var(--ax-rs, 1)); background: var(--ax-bg); transition: background .2s, transform .2s; }
.cxpg-tab:hover { background: #eaf4eb; }
.cxpg-tab__th { flex: none; width: 58px; height: 58px; overflow: hidden; border-radius: calc(15px * var(--ax-rs, 1)); display: grid; place-items: center; background: #e0ece2; transition: box-shadow .2s; }
.cxpg-tab__th img { width: 100%; height: 100%; object-fit: cover; }
.cxpg-tab__th--all { background: var(--kv-grad); color: #fff; font-size: calc(21px * var(--ax-fz, 1)); }
.cxpg-tab__tx { min-width: 0; }
.cxpg-tab__tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14.5px * var(--ax-fz, 1)); font-weight: 800; color: var(--ax-navy); }
.cxpg-tab__tx small { display: block; margin-top: 3px; font-size: calc(12px * var(--ax-fz, 1)); font-weight: 600; color: var(--ax-muted); }
.cxpg-tab.is-on { background: var(--ax-navy); box-shadow: none; }
.cxpg-tab.is-on .cxpg-tab__th { box-shadow: 0 0 0 3px var(--ax-or); }
.cxpg-tab.is-on .cxpg-tab__tx b { color: #fff; }
.cxpg-tab.is-on .cxpg-tab__tx small { color: var(--ax-orlt, var(--ax-orlt, #bfe8c4)); }
.cxpg-tab:focus-visible { outline: 3px solid rgba(46, 155, 60, .5); outline-offset: 2px; }

/* ── albüm vitrini ── */
.cxpg-albs { margin-top: 60px; }
.cxpg-albs__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.cxpg-albs__g--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cxpg-albs__g--n3 { grid-template-columns: 1.35fr 1fr 1fr; }
.cxpg-albs__g--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cxpg-alb { position: relative; isolation: isolate; display: block; height: 340px; overflow: hidden; border-radius: calc(30px * var(--ax-rs, 1)); background: var(--kv-grad); color: #fff; box-shadow: none; }
.cxpg-alb img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cxpg-alb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(19, 48, 21, .92) 0%, rgba(19, 48, 21, .2) 55%, rgba(19, 48, 21, 0) 75%); }
.cxpg-alb:hover img { transform: scale(1.06); }
.cxpg-alb__n { position: absolute; right: 18px; top: 18px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: calc(11px * var(--ax-rs, 1)); background: rgba(255, 255, 255, .92); color: var(--ax-navy); font-size: calc(13px * var(--ax-fz, 1)); font-weight: 800; }
.cxpg-alb__n i { color: var(--ax-or); }
.cxpg-alb__tx { position: absolute; left: 26px; right: 26px; bottom: 24px; }
.cxpg-alb__tx b { display: block; font-family: var(--ax-head); font-size: calc(22px * var(--ax-fzh, 1)); font-weight: var(--ax-hw, 900); line-height: 1.15; text-transform: var(--ax-tt, uppercase); }
.cxpg-alb__tx small { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: calc(12px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ax-orlt, var(--ax-orlt, #bfe8c4)); }
.cxpg-alb__tx small i { transition: transform .2s; }
.cxpg-alb:hover .cxpg-alb__tx small i { transform: translateX(4px); }

/* ── bölüm ── */
.cxpg-sec { margin-top: 64px; }
.cxpg-tabs + .cxpg-sec { margin-top: 52px; }

/* ── mozaik ızgara ── */
.cxpg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cxpg-grid > li:nth-child(12n+1), .cxpg-grid > li:nth-child(12n+11) { grid-column: span 2; grid-row: span 2; }
.cxpg-grid > li:nth-child(12n+7), .cxpg-grid > li:nth-child(12n+12) { grid-column: span 2; }
.cxpg-grid--n1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 520px; }
.cxpg-grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 420px; }
.cxpg-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 360px; }
.cxpg-grid--n1 > li, .cxpg-grid--n2 > li, .cxpg-grid--n3 > li { grid-column: auto !important; grid-row: auto !important; }
.cxpg-ph { position: relative; isolation: isolate; display: block; height: 100%; overflow: hidden; border-radius: calc(22px * var(--ax-rs, 1)); background: #e0ece2; cursor: zoom-in; }
.cxpg-ph img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cxpg-ph:hover img { transform: scale(1.06); }
.cxpg-ph::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(19, 48, 21, .85) 0%, rgba(19, 48, 21, 0) 55%); opacity: 0; transition: opacity .3s; }
.cxpg-ph:hover::after, .cxpg-ph:focus-visible::after { opacity: 1; }
.cxpg-ph:focus-visible { outline: 3px solid rgba(46, 155, 60, .6); outline-offset: 3px; }
.cxpg-ph__z { position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: calc(13px * var(--ax-rs, 1)); background: #fff; color: var(--ax-or); font-size: calc(15px * var(--ax-fz, 1)); opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; }
.cxpg-ph:hover .cxpg-ph__z, .cxpg-ph:focus-visible .cxpg-ph__z { opacity: 1; transform: none; }
.cxpg-ph__c { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; font-size: calc(14px * var(--ax-fz, 1)); font-weight: 700; line-height: 1.3; opacity: 0; transition: opacity .3s; }
.cxpg-ph__c small { display: block; margin-bottom: 3px; font-size: calc(10.5px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-orlt, var(--ax-orlt, #bfe8c4)); }
.cxpg-ph:hover .cxpg-ph__c, .cxpg-ph:focus-visible .cxpg-ph__c { opacity: 1; }
.cxpg-grid > li:nth-child(12n+1) .cxpg-ph::after { opacity: 1; }
.cxpg-grid > li:nth-child(12n+1) .cxpg-ph__c { opacity: 1; font-size: calc(17px * var(--ax-fz, 1)); left: 24px; bottom: 22px; }
.cxpg .cxp-pager { margin-top: 34px; }

/* albüm detayı (galleries/show.php): açıklama, bilgi, geri */
.cxpg-desc { margin: 46px 0 0; max-width: 900px; padding: 22px 26px 22px 28px; border-radius: calc(22px * var(--ax-rs, 1)); background: #fff; box-shadow: var(--cx-shadow-sm); border-left: 5px solid var(--ax-or); font-size: calc(15.5px * var(--ax-fz, 1)); line-height: 1.7; color: var(--ax-text); }
.cxpg-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 40px 0 0; font-size: calc(14px * var(--ax-fz, 1)); color: var(--ax-text); }
.cxpg-desc + .cxpg-info { margin-top: 22px; }
.cxpg-info > i { width: 46px; height: 46px; border-radius: calc(14px * var(--ax-rs, 1)); display: grid; place-items: center; background: var(--ax-orl); color: var(--ax-or); font-size: calc(18px * var(--ax-fz, 1)); }
.cxpg-info b { font-family: var(--ax-head); font-size: calc(22px * var(--ax-fzh, 1)); font-weight: var(--ax-hw, 900); color: var(--ax-navy); }
.cxpg-info + .cxpg-grid { margin-top: 24px; }
.cxpg-tabs + .cxpg-grid { margin-top: 46px; }
.cxpg-back { margin: 40px 0 0; display: flex; justify-content: center; }
.cxpg-back .cxp-btn--line { height: 50px; padding: 0 24px; }

/* ── lightbox ── */
.cxpg-lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(15, 43, 18, .95); touch-action: pan-y; }
.cxpg-lb.is-open { display: flex; }
.cxpg-lb__fig { position: relative; margin: 0; max-width: min(88vw, 1500px); max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.cxpg-lb__img { display: block; max-width: 100%; max-height: calc(92vh - 80px); width: auto; height: auto; object-fit: contain; border-radius: calc(22px * var(--ax-rs, 1)); box-shadow: none; background: var(--ax-navy2, #1c4a20); }
.cxpg-lb__cap { margin-top: 16px; max-width: 760px; text-align: center; color: #fff; font-size: calc(15px * var(--ax-fz, 1)); font-weight: 600; line-height: 1.45; }
.cxpg-lb__cap small { display: block; margin-top: 4px; font-size: calc(11.5px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ax-orlt, var(--ax-orlt, #bfe8c4)); }
.cxpg-lb button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: calc(16px * var(--ax-rs, 1)); background: #fff; color: var(--ax-navy); font-size: calc(18px * var(--ax-fz, 1)); cursor: pointer; transition: background .2s, color .2s; }
.cxpg-lb button:hover { background: var(--ax-or); color: var(--ax-onor, #fff); }
.cxpg-lb button:focus-visible { outline: 3px solid var(--ax-or); outline-offset: 2px; }
.cxpg-lb__x { top: 20px; right: 20px; }
.cxpg-lb__p { left: 20px; top: 50%; margin-top: -26px; }
.cxpg-lb__n { right: 20px; top: 50%; margin-top: -26px; }
.cxpg-lb__cnt { position: absolute; top: 30px; left: 24px; padding: 8px 14px; border-radius: calc(11px * var(--ax-rs, 1)); background: rgba(255, 255, 255, .12); color: #fff; font-family: var(--ax-head); font-size: calc(13px * var(--ax-fzh, 1)); font-weight: 800; letter-spacing: .04em; }
.cxpg-lb[data-single] .cxpg-lb__p, .cxpg-lb[data-single] .cxpg-lb__n { display: none; }
body.cxpg-lock { overflow: hidden; }

/* ── duyarlı ── */
@media (max-width: 1240px) {
  .cxpg-tab { flex: 0 0 auto; min-width: 230px; }
  .cxpg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .cxpg-albs__g--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cxpg-albs__g, .cxpg-albs__g--n2, .cxpg-albs__g--n3, .cxpg-albs__g--n4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cxpg-alb { height: 230px; border-radius: calc(24px * var(--ax-rs, 1)); }
  .cxpg-alb__tx b { font-size: calc(19px * var(--ax-fzh, 1)); }
}
@media (max-width: 700px) {
  .cxpg-tabs { gap: 8px; padding: 10px; border-radius: calc(22px * var(--ax-rs, 1)); }
  .cxpg-tab { min-width: 196px; gap: 10px; padding: 7px 14px 7px 7px; border-radius: calc(16px * var(--ax-rs, 1)); }
  .cxpg-tab__th { width: 46px; height: 46px; border-radius: calc(12px * var(--ax-rs, 1)); }
  .cxpg-tab__tx b { font-size: calc(13.5px * var(--ax-fz, 1)); }
  .cxpg-albs { margin-top: 44px; }
  .cxpg-sec { margin-top: 48px; }
  .cxpg-tabs + .cxpg-sec { margin-top: 38px; }
  .cxpg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 10px; }
  .cxpg-grid > li:nth-child(n) { grid-column: auto; grid-row: auto; }
  .cxpg-grid > li:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
  .cxpg-grid--n1, .cxpg-grid--n2, .cxpg-grid--n3 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .cxpg-ph { border-radius: calc(16px * var(--ax-rs, 1)); }
  .cxpg-grid > li:nth-child(12n+1) .cxpg-ph__c { font-size: calc(14.5px * var(--ax-fz, 1)); left: 16px; bottom: 14px; }
  .cxpg-desc { margin-top: 34px; padding: 18px 18px 18px 20px; font-size: calc(14.5px * var(--ax-fz, 1)); }
  .cxpg-lb__p, .cxpg-lb__n { top: auto; bottom: 18px; margin-top: 0; }
  .cxpg-lb__p { left: calc(50% - 64px); } .cxpg-lb__n { right: calc(50% - 64px); }
  .cxpg-lb__x { top: 12px; right: 12px; }
  .cxpg-lb__img { max-height: calc(92vh - 160px); border-radius: calc(16px * var(--ax-rs, 1)); }
}