/*
Theme Name: Aksel Arts
Theme URI: https://gokhanaksel.com
Author: Gökhan Aksel
Description: Aksel Arts fotoğraf portföyü için özel tema.
Version: 1.0
*/

/* ==========================================================================
   Gökhan Aksel — Fotoğraf Portföyü
   Referans: Diamond Photography WP Theme (yapı), özel renk paleti (siyah + gök mavisi)
   ========================================================================== */

:root{
  --bg:#060607;
  --bg-elevated:#0c0d0f;
  --text:#f4f6f8;
  --text-dim:#9aa1a9;
  --accent:#3db9f2;          /* gök mavisi */
  --accent-hover:#7ad2ff;
  --accent-soft:rgba(61,185,242,.22);
  --border:rgba(255,255,255,.12);
  --font-body:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:'Cormorant Garamond', Georgia, serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}

::selection{background:var(--accent);color:#000;}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:34px 48px;
  z-index:500;
  pointer-events:none;
}
.site-header a, .site-header button{pointer-events:auto;}

.logo{
  font-family:var(--font-display);
  font-size:1.7rem;
  letter-spacing:.08em;
  font-weight:500;
  color:var(--text);
}
.logo span{color:var(--accent); font-style:italic;}

.menu-toggle{
  width:46px;height:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--border);
  border-radius:50%;
  transition:border-color .3s ease, background .3s ease;
}
.menu-toggle:hover{border-color:var(--accent); background:var(--accent-soft);}
.menu-toggle span{width:18px;height:1px;background:var(--text);transition:all .3s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- Side nav (desktop) — solid sol panel ---------- */
.side-nav{
  position:fixed; top:0; left:0; bottom:0; width:260px;
  z-index:150;
  display:flex; flex-direction:column; justify-content:space-between;
  background:#000;
}
/* Sert çizgi yerine sağa doğru yumuşayan gradient geçiş */
.side-nav::after{
  content:'';
  position:absolute; top:0; right:-160px; bottom:0; width:160px;
  /* S-eğrisi (ease-in-out) profili: gözün gradyan başlangıcında/bitişinde
     algıladığı "Mach bandı" adı verilen parlama/hale yanılsamasını azaltır.
     Düz iki durak (opak -> şeffaf) matematiksel olarak doğru olsa da,
     insan görüşü ani eğim değişimini bir çizgi/hale gibi algılıyor. */
  background:linear-gradient(to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.98) 8%,
    rgba(0,0,0,.9) 20%,
    rgba(0,0,0,.72) 35%,
    rgba(0,0,0,.48) 50%,
    rgba(0,0,0,.26) 65%,
    rgba(0,0,0,.1) 80%,
    rgba(0,0,0,.02) 92%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Üst: logo (siyah blok) */
.side-top{
  padding:32px 28px 24px;
}
.side-top img{width:100%; height:auto;}

/* Orta: dikey menü — panelden çıkıp sağa kayar, içeriğin/fotoğrafın üzerine biner.
   position:fixed olduğu için artık .side-nav'ın flex akışına dahil değil — bu da
   önceki flex:1 taşma hatasını (fotoğrafı aşağı itmesini) ortadan kaldırıyor. */
.side-nav-links{
  position:fixed; left:290px; top:50%; transform:translateY(-50%);
  z-index:950; /* lightbox (900) açıkken de görünsün diye ondan yüksek */
  display:flex; flex-direction:column; align-items:center; gap:30px;
}
.side-nav-links a{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--text);
  text-shadow:0 1px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  position:relative; padding-top:16px;
  transition:color .25s ease;
}
.side-nav-links a::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:10px; background:var(--text);
  transition:background .25s ease, height .25s ease;
}
.side-nav-links a:hover{color:var(--accent);}
.side-nav-links a:hover::before{background:var(--accent);}
.side-nav-links a.active{color:var(--accent);}
.side-nav-links a.active::before{background:var(--accent); height:18px;}

/* Lightbox tam ekran açıkken menüyü sol ok ikonunun hemen sağına yaklaştır
   (normal sayfa görünümünde .side-nav panelinin yanında kalmaya devam eder) */
body.lightbox-open .side-nav-links{
  left:100px;
}

/* Alt: fotoğrafçı fotoğrafı (siyah blok) */
.side-photographer{
  position:absolute; left:0; right:0; top:58%; transform:translateY(-50%);
}
.side-photographer img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
}
.side-photographer-info{
  padding:16px 28px 26px; text-align:center;
}
.side-photographer-info .name{
  display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:500;
}
.side-photographer-info .role{
  display:block; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:4px;
}
.side-nav-social{
  display:flex; justify-content:center; gap:12px; padding:0 28px 22px;
}
.side-nav-social a{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); font-size:.55rem; font-weight:600;
  transition:border-color .25s ease, color .25s ease;
}
.side-nav-social a svg{width:13px;height:13px;}
.side-nav-social a:hover{border-color:var(--accent); color:var(--accent);}

@media (min-width:861px){
  .site-header{display:none;}
  body:not(.home){padding-left:400px;}
  .slide-counter{left:308px;}
}
@media (max-width:860px){
  .side-nav{display:none;}
}

/* ---------- Overlay nav ---------- */
.overlay-nav{
  position:fixed; inset:0;
  background:rgba(4,4,5,.97);
  z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  opacity:0; visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
  overflow-y:auto;
  padding:60px 20px;
}
.overlay-nav.open{opacity:1; visibility:visible; transform:translateY(0);}
.overlay-nav > ul{text-align:center;}
.overlay-nav > ul > li{margin:10px 0;}
.overlay-nav > ul > li > a{
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:500;
  letter-spacing:.03em;
  transition:color .25s ease;
}
.overlay-nav > ul > li > a:hover{color:var(--accent);}
.overlay-nav .sub{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px;
  margin-top:10px;
}
.overlay-nav .sub li a{
  font-family:var(--font-body);
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.overlay-nav .sub li a:hover{color:var(--accent);}
.overlay-social{
  margin-top:40px;
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.overlay-social a{margin:0 10px; color:var(--text-dim);}
.overlay-social a:hover{color:var(--accent);}

/* ---------- Hero slider ---------- */
.hero-slider{
  position:relative;
  width:100vw; height:100vh;
  background:#000;
  overflow:hidden;
}
.slides{position:absolute; inset:0;}
.slide{
  position:absolute; inset:0;
  background-position:center; background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.3s ease;
  background-color:#000;
}
.slide.landscape{background-size:cover;}
.slide.portrait{background-size:contain;}
.slide.active{opacity:1; z-index:2; animation:kenburns 7s ease-in-out forwards;}
.slide video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.slide.portrait video{object-fit:contain; background:#000;}

@keyframes kenburns{
  0%{transform:scale(1);}
  100%{transform:scale(1.07);}
}

.hero-gradient{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.55) 100%);
  z-index:3; pointer-events:none;
}

/* Slide counter */
.slide-counter{
  position:absolute; left:48px; top:110px; z-index:10;
  font-size:.75rem; letter-spacing:.2em; color:var(--text-dim);
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.slide-counter .current{color:var(--text); font-weight:500;}

/* Thumbnail nav, bottom-center */
.thumb-nav{
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  z-index:10;
  display:flex; gap:12px;
  padding:10px;
}
.thumb{
  width:58px; height:58px;
  border-radius:9px;
  background-size:cover; background-position:center;
  border:2px solid rgba(255,255,255,.25);
  opacity:.55;
  transition:opacity .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.thumb:hover{opacity:.85; transform:translateY(-3px);}
.thumb.active{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(61,185,242,.28), 0 6px 18px rgba(0,0,0,.4);
  transform:translateY(-3px);
}

/* Scroll cue */
.scroll-cue{
  position:absolute; right:48px; bottom:52px; z-index:10;
  writing-mode:vertical-rl;
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; color:var(--text-dim);
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:10px;
}
.scroll-cue::after{
  content:''; width:1px; height:40px; background:var(--text-dim);
}

@media (max-width: 860px){
  .site-header{padding:22px 24px;}
  .thumb-nav{bottom:24px; gap:8px; padding:8px; flex-wrap:wrap; justify-content:center; max-width:88vw;}
  .thumb{width:44px;height:44px;border-radius:7px;}
  .scroll-cue{display:none;}
  .slide-counter{left:24px; top:96px;}
  .overlay-nav > ul > li > a{font-size:1.9rem;}
}

/* ---------- Generic page shell (gallery / stub pages) ---------- */
.page-hero{
  padding:190px 48px 70px;
  border-bottom:1px solid var(--border);
}
.page-hero h1{
  font-family:var(--font-display);
  font-size:3.2rem; font-weight:500; margin:12px 0 0;
}
.page-hero p{color:var(--text-dim); max-width:560px; margin-top:16px; line-height:1.7; font-weight:300;}

.breadcrumb{font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{margin:0 8px; color:var(--border);}

/* Category grid on Galeriler hub */
.category-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:2px;
  background:var(--border);
}
.category-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:#000;
}
.category-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 3.5s ease-out, filter .6s ease;
  filter:brightness(.7);
}
.category-card:hover img{transform:scale(1.12); filter:brightness(.5);}
.category-card .placeholder-fill{
  width:100%;height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated);
  color:var(--text-dim); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
}
.category-card .cc-label{
  position:absolute; left:24px; bottom:24px; z-index:2;
}
.category-card .cc-label .eyebrow{
  display:block; margin-bottom:6px;
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.category-card .cc-label h3{
  font-family:var(--font-display); font-size:1.9rem; font-weight:500; margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.category-card .cc-count{
  position:absolute; right:20px; top:20px; z-index:2;
  font-size:.7rem; color:var(--text-dim); letter-spacing:.1em;
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}

.latest-section{padding:90px 48px 110px;}
.latest-section .section-head{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--border);
}
.latest-section .section-head h2{
  font-family:var(--font-display); font-size:2.4rem; font-weight:500; margin:6px 0 0;
}
.latest-section .section-head a{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--accent); padding-bottom:3px;
}

/* Photo grid (used by category + son-islerim pages) */
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:22px; padding:0 48px 110px;
}
.photo-grid figure{
  margin:0; position:relative; overflow:hidden; border-radius:2px; cursor:pointer;
  background:#000;
}
.photo-grid.landscape-grid figure{aspect-ratio:3/2;}
.photo-grid img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 3.5s ease-out, filter .6s ease;
}

/* Masonry layout for mixed portrait/landscape sets (Abstract, Son İşlerim) */
.photo-grid.masonry{
  display:block; column-count:6; column-gap:12px;
}
.photo-grid.masonry figure{
  break-inside:avoid; margin:0 0 12px;
}
.photo-grid.masonry img{height:auto;}
@media (min-width:1600px){ .photo-grid.masonry{column-count:7;} }
@media (max-width:980px){ .photo-grid.masonry{column-count:4;} }
@media (max-width:640px){ .photo-grid.masonry{column-count:2;} }
.photo-grid figure:hover img{transform:scale(1.12); filter:brightness(.75);}
.photo-grid figure::after{
  content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:200; color:var(--accent); opacity:0; transition:opacity .35s ease;
  border:1px solid var(--accent-soft);
}
.photo-grid figure:hover::after{opacity:1;}

.empty-state{
  padding:60px 48px 140px; text-align:center; color:var(--text-dim);
}
.empty-state .eyebrow{display:block; margin-bottom:18px;}
.empty-state h2{font-family:var(--font-display); font-size:2rem; color:var(--text); font-weight:500;}
.empty-state p{max-width:460px; margin:14px auto 0; line-height:1.7;}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding:34px 48px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.75rem; letter-spacing:.1em; color:var(--text-dim);
}
@media (min-width:861px){
  /* Ana sayfada body kayması olmadığı için footer sol panelin altında kalmasın diye ayrıca kaydırılır */
  body.home .site-footer{padding-left:400px;}
}
.site-footer a:hover{color:var(--accent);}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:#000; z-index:900;
  visibility:hidden;
  overflow:hidden;
}
.lightbox.open{visibility:visible;}
.lightbox-stage{
  position:absolute; inset:0;
}
.lightbox img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; /* yatay görsel: ekranı tamamen kaplar (ana sayfadaki gibi) */
  opacity:0; transition:opacity .6s ease; z-index:1;
}
.lightbox img.portrait{
  object-fit:contain; /* dikey görsel: bütünü görünür, yanlarda kaçınılmaz siyah boşluk */
  background:#000;
}
.lightbox img.visible{opacity:1; animation:lightbox-kenburns 10s ease-in-out forwards;}
@keyframes lightbox-kenburns{
  0%{transform:scale(1);}
  100%{transform:scale(1.06);}
}
.lightbox-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:90px 48px 40px;
  text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 100%);
  opacity:0; transition:opacity .6s ease;
  pointer-events:none;
}
.lightbox-caption.visible{opacity:1;}
.lightbox-caption h3{
  font-family:var(--font-display); font-size:1.4rem; font-weight:500; margin:0 0 6px; color:var(--text);
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.lightbox-caption p{
  font-size:.85rem; color:var(--text-dim); line-height:1.6; margin:0 auto; max-width:640px; font-weight:300;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; z-index:3; color:var(--text); font-size:1.6rem;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--border);
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{border-color:var(--accent); color:var(--accent);}
.lightbox-close{top:28px; right:28px;}
.lightbox-prev{left:28px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:28px; top:50%; transform:translateY(-50%);}

@media (max-width:640px){
  .page-hero{padding:150px 22px 50px;}
  .page-hero h1{font-size:2.2rem;}
  .photo-grid{padding:0 22px 70px; gap:12px;}
  .latest-section{padding:60px 22px 70px;}
  .site-footer{padding:26px 22px;}
  .lightbox-prev, .lightbox-next{width:42px;height:42px; font-size:1.2rem;}
}

/* Sağ alt köşe filigran (aa işareti) — footer'daki "İstanbul, Türkiye" yazısının üzerinde ortalı */
.brand-watermark{
  position:fixed; right:48px; bottom:78px; z-index:50;
  width:150px; opacity:.5; pointer-events:none;
}
.brand-watermark img{width:100%; height:auto; display:block;}
@media (max-width:860px){
  .brand-watermark{width:90px; right:22px; bottom:60px;}
}

/* Müzik çalar — üst orta, tüm sayfalarda ortak */
.music-player{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  z-index:200;
  display:flex; align-items:center; gap:10px;
  background:rgba(6,6,7,.55);
  backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:30px;
  padding:8px 16px;
  max-width:min(92vw, 460px);
}
.mp-btn{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:color .2s ease;
}
.mp-next:hover, .mp-mute:hover{color:var(--accent);}
.mp-btn svg{width:19px; height:19px;}
/* Oynatma durumuna göre sabit renk (hover'a değil audio durumuna bağlı) */
.mp-toggle.is-playing{color:var(--accent);}
.mp-track{
  font-size:.72rem; letter-spacing:.03em; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0;
}
@media (max-width:640px){
  .music-player{padding:6px 12px; gap:8px; top:14px;}
  .mp-track{font-size:.62rem;}
}