/*
Theme Name: Bonsai ŞKÇ
Theme URI: https://bonsaiskc.com
Description: Bonsai ŞKÇ için aksel-arts temasından türetilen özel tema.
Version: 1.0
*/

/* ==========================================================================
   Bonsai ŞKÇ
   Referans: aksel-arts teması (yapı aynı), marka/içerik farklı
   ========================================================================== */

:root{
  --bg:#060607;
  --bg-elevated:#0c0d0f;
  --text:#f4f6f8;
  --text-dim:#9aa1a9;
  --accent:#5fae46;          /* bonsai yeşili */
  --accent-hover:#86cf6c;
  --accent-soft:rgba(95,174,70,.22);
  --accent-red:#a91916;      /* logo kırmızısı — sadece hover/seçili vurgularında */
  --accent-red-soft:rgba(169,25,22,.28);
  --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:56px 28px 24px;
}
.side-top-logo{display:flex; flex-direction:column; align-items:center; gap:10px;}
.side-top-logo img{width:110px; height:auto; display:block;}
.side-top-logo-text{
  font-family:var(--font-display); font-size:1.05rem; font-weight:500;
  color:var(--text); letter-spacing:.02em;
}

/* 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:970; /* lightbox (900) ve sallanan bonsai katmanının (960) üstünde */
  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);
  /* Bonsai dallarının üzerine denk gelince de seçilsin diye koyu hale */
  text-shadow:0 0 2px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.9), 0 1px 16px rgba(0,0,0,.8);
  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);
  box-shadow:0 0 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8);
  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)
   Not: top'u ortalayan translateY(-50%) KASITLI OLARAK kaldırıldı — rastgele
   özlü söz her sayfa geçişinde uzunluk değiştirdiği için (PJAX her geçişte
   header.php'yi sunucuda yeniden render ediyor), merkeze göre konumlama
   görseli yukarı/aşağı zıplatıyordu. Sabit bir top ile görsel hep aynı yerde. */
/* Bonsai iki katmandan oluşuyor ve ikisi BİREBİR aynı konum/boyutta olmak
   zorunda (aynı --bonsai-top, aynı --bonsai-w, doğal en-boy oranı):
   - alt katman (.side-nav içinde): sadece gövde + saksı görünür, sabit
   - üst katman (.bonsai-visual-overlay): sadece dallar görünür, sallanır
   Maskeler birbirinin tersi; görsel şeffaf PNG olduğu için tek katmanda
   ağacın tamamı görünseydi sallanan dalların arkasında sabit kopyası
   seçilirdi ("iki ağaç üst üste" görüntüsü). */
/* Ağaç yatayda bilinçli olarak sıkıştırılmış (doğal oran 390×351 iken
   320×351) — dallar menüye biraz taşsın ama yazılar okunur kalsın diye.
   --bonsai-left saksıyı 260px panelin içine ortalıyor: alt katman .side-nav
   içinde olduğu için panelin sağ kenarındaki karartma geçişi (::after),
   panel dışına taşan saksıyı örtüp "kesik" gösteriyordu. */
:root{ --bonsai-top:30%; --bonsai-w:320px; --bonsai-h:351px; --bonsai-left:-20px; }
.side-photographer{
  position:absolute; left:0; right:0; top:var(--bonsai-top);
}
.bonsai-visual{
  position:relative; width:var(--bonsai-w); margin-left:var(--bonsai-left);
}
/* Saksı havada asılı gibi durmasın: tabanının hemen altında, zemin hissi veren
   ince ve soluk bir ışık halesi. Saksı görselde yatayda %21–%76 arasında,
   tabanı en alt satırda (ölçüldü) — hale ona göre ortalandı. Görselin arkasında
   kalsın diye z-index:-1. */
.bonsai-visual::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:48.5%; bottom:-9px; transform:translateX(-50%);
  width:72%; height:26px;
  background:radial-gradient(ellipse at center,
    rgba(255,238,210,.20) 0%,
    rgba(255,238,210,.09) 38%,
    rgba(255,238,210,.03) 58%,
    rgba(255,238,210,0) 72%);
  filter:blur(1.5px);
}
.bonsai-visual img.bonsai-img{
  width:100%; height:var(--bonsai-h); object-fit:fill; display:block;
  -webkit-mask-image:linear-gradient(to bottom, transparent 52%, black 76%);
  mask-image:linear-gradient(to bottom, transparent 52%, black 76%);
}

/* Sallanan dal/yaprak katmanı KASITLI OLARAK .side-nav'ın DIŞINDA, bağımsız bir
   eleman (bkz. header.php) — çünkü .side-nav kendi stacking context'ini
   oluşturuyor (z-index:150) ve içindeki hiçbir çocuk, bundan dışarıda duran
   .side-nav-links (z-index:950) menüsünün ÜSTÜNE çıkamaz, z-index ne olursa
   olsun. Menünün z-index'inden yüksek tutuluyor ki sallanan dallar menü
   yazılarının üzerinden geçebilsin (3D his). */
.bonsai-visual-overlay{
  position:fixed; left:var(--bonsai-left); top:var(--bonsai-top); width:var(--bonsai-w); z-index:960; pointer-events:none;
}
body.lightbox-open .bonsai-visual-overlay{ display:none; } /* tam ekran fotoğrafın üzerine binmesin */
.bonsai-visual-overlay .bonsai-img-canopy{
  width:100%; height:var(--bonsai-h); object-fit:fill; display:block;
  -webkit-mask-image:linear-gradient(to bottom, black 52%, transparent 76%);
  mask-image:linear-gradient(to bottom, black 52%, transparent 76%);
  transform-origin:38% 88%;
  animation:bonsai-sway 6s ease-in-out infinite;
}
@keyframes bonsai-sway{
  0%, 100%{ transform:rotate(-0.6deg); }
  50%{ transform:rotate(1.1deg); }
}
.bonsai-leaves{
  position:absolute; inset:0; overflow:visible; pointer-events:none;
}
/* Yaprak dalların arasından (--y: taç bölgesinde rastgele bir yükseklik)
   kopup saksı hizasına kadar süzülür. */
/* Ardıç (juniperus) — yuvarlak yaprak değil, ince iğne/pul yaprak */
.bonsai-leaf{
  position:absolute; top:var(--y, 25%); left:var(--x, 50%);
  width:1.5px; height:8px;
  background:linear-gradient(to bottom, #8fb35a, #5e7f34);
  border-radius:1px;
  opacity:0;
  animation:bonsai-leaf-fall var(--dur, 6s) linear forwards;
}
@keyframes bonsai-leaf-fall{
  0%{ top:var(--y, 25%); transform:translateX(0) rotate(0deg); opacity:0; }
  6%{ opacity:.9; }
  50%{ transform:translateX(var(--drift, 16px)) rotate(190deg); }
  88%{ opacity:.8; }
  100%{ top:96%; transform:translateX(calc(var(--drift, 16px) * 1.6)) rotate(360deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .bonsai-img-canopy{ animation:none; }
  .bonsai-leaf{ display:none; }
}
/* Ağaç (--bonsai-top:30%, doğal oranlı ~351px) yukarı alındı ama isim/unvan/söz
   eski yerinde kalsın istendi: eskiden 40% + 347px'ten (3:4 oranlı 260px görsel)
   başlıyordu; aradaki fark kadar boşluk bırakılıyor. */
.side-photographer-info{
  padding:16px 28px 26px; text-align:center;
  margin-top:calc(10vh - 4px);
}
.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-quote{
  font-family:var(--font-display); font-style:italic; font-size:.8rem; line-height:1.5;
  color:var(--text-dim); margin:12px 0 0; padding:0 10px;
}
.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;}
  .side-nav-links{display:none;}
  .bonsai-visual-overlay{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:50%; /* site logosu gibi yuvarlak */
  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-red);
  box-shadow:0 0 0 3px var(--accent-red-soft), 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:50%;}
  .scroll-cue{display:none;}
  .slide-counter{left:24px; top:96px;}
  .overlay-nav > ul > li > a{font-size:1.9rem;}
  /* Müzik çubuğu logo/hamburger ile aynı bantta kalmasın diye header'ın altına iniyor */
  .music-player{top:80px;}
}

/* ---------- 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(190px,1fr));
  gap:2px;
  background:var(--border);
}
.category-card{
  position:relative; aspect-ratio:1/1; 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::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--accent-red); mix-blend-mode:color; opacity:0;
  transition:opacity .4s ease; pointer-events:none;
}
.category-card:hover::before{opacity:.6;}
.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:16px; bottom:16px; z-index:2;
}
.category-card .cc-label .eyebrow{
  display:block; margin-bottom:4px; font-size:.62rem;
  text-shadow:0 1px 8px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.cc-hidden-badge{ color:var(--accent-red); }
.category-card .cc-label h3{
  font-family:var(--font-display); font-size:1.35rem; 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:14px; top:14px; z-index:2;
  font-size:.65rem; 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::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--accent-red); mix-blend-mode:color; opacity:0;
  transition:opacity .4s ease; pointer-events:none;
}
.photo-grid figure:hover::before{opacity:.55;}
.photo-grid figure::after{
  content:'+'; position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:200; color:var(--accent-red); opacity:0; transition:opacity .35s ease;
  border:1px solid var(--accent-red-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;}

/* Contact form */
.contact-wrap{max-width:640px; margin:0 auto; padding:0 48px 110px;}
.form-msg{padding:16px 20px; border-radius:4px; margin-bottom:28px; font-size:.9rem; line-height:1.6;}
.form-msg-success{background:rgba(61,185,242,.12); border:1px solid var(--accent-soft); color:var(--text);}
.form-msg-error{background:rgba(220,80,60,.12); border:1px solid rgba(220,80,60,.35); color:#f2a89a;}
.aksel-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.contact-form{display:flex; flex-direction:column; gap:20px;}
.form-field{display:flex; flex-direction:column; gap:8px;}
.form-field label{font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim);}
.form-field input, .form-field textarea{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  font-family:var(--font-body); font-size:.95rem; padding:12px 14px; border-radius:2px;
  transition:border-color .25s ease;
}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--accent);}
.form-field textarea{resize:vertical; min-height:130px;}
.form-submit{
  align-self:flex-start; padding:13px 32px; background:var(--accent); color:#04120c;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  border-radius:2px; transition:background .25s ease;
}
.form-submit:hover{background:var(--accent-hover);}
@media (max-width:640px){
  .contact-wrap{padding:0 22px 70px;}
}

/* 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(--accent);
  text-shadow:0 2px 12px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.lightbox-caption p{
  font-size:.85rem; color:#dfe3e8; line-height:1.6; margin:0 auto; max-width:640px; font-weight:300;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.lightbox-date{
  display:block; margin-top:10px; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-dim); opacity:.5;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.9);
}
.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;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:.5; pointer-events:none;
}
.brand-watermark img{width:56px; height:auto; display:block;}
.brand-watermark-copy{
  font-size:.58rem; letter-spacing:.08em; color:var(--text-dim); white-space:nowrap;
}
@media (max-width:860px){
  .brand-watermark{right:22px; bottom:60px;}
  .brand-watermark img{width:40px;}
  .brand-watermark-copy{font-size:.5rem;}
}

/* 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:74px;}
  .mp-track{font-size:.62rem;}
}