:root{ 
  --mint:#e6f7f1; --sage:#e9f0ea; --sand:#f7f2e7; --ink:#0f172a; --accent:#0ea5a4; --accent-dark:#0b8583;
  --fb:#1877F2; --wa:#25D366; --tw:#1DA1F2; --li:#0A66C2;
}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% 10%, var(--mint), transparent 60%),
    radial-gradient(1000px 500px at 90% 0%, var(--sand), transparent 60%),
    linear-gradient(to bottom right,#fafafa,#f3f4f6);
}
/* Slider */
.slide{opacity:0; transform:scale(1.04); transition:all .9s ease; position:absolute; inset:0}
.slide.active{opacity:1; transform:scale(1); z-index:10}
.dots button{width:12px;height:12px;border-radius:999px;background:#cbd5e1;transition:all .3s}
.dots button.active{background:var(--ink);width:28px}
/* Şiir kartı animasyonu */
.poem-card{
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition: all 0.2s ease;
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.poem-card.visible{opacity:1; transform:translateY(0) scale(1)}
.poem-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 28px rgba(0,0,0,.15);
}
/* Kart içeriği uzun olduğunda kendini büyütür */
.poem-card > p { flex-grow:1; }
/* Mobil paylaş butonu gölgesi */
.share-fab{box-shadow:0 10px 24px rgba(0,0,0,.18); z-index:60;}
/* Toast */
.toast{animation:fadein .2s ease, stay 1.2s  .2s, fadeout .2s 1.4s ease}
@keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
@keyframes stay{from{opacity:1} to{opacity:1}}
@keyframes fadeout{from{opacity:1} to{opacity:0}}
/* Scrollbar gizle */
#hbRevScroll, #hbGalScroll { -ms-overflow-style: none; scrollbar-width: none; }
#hbRevScroll::-webkit-scrollbar, #hbGalScroll::-webkit-scrollbar { display: none; }
/* 3 satır kırpma */
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Overlay içi kap: mobilde nefes alan padding ve kaydırma */
.overlay.padding{padding:14px;}
.overlay .panel{
  width:min(88vw, 280px);
  margin-inline:auto;
  padding:12px;
  display:flex; flex-direction:column; gap:10px;
  max-height:60vh; overflow-y:auto;
}
/* Ortak, zarif paylaş butonu */
.btn-share{
  display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:10px;
  height:40px; padding:0 12px;
  color:#fff; font-weight:500; font-size:13px; letter-spacing:.1px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-share:active{ transform:translateY(1px); box-shadow:0 3px 10px rgba(0,0,0,.10); }
.btn-share:focus{ outline: 2px solid rgba(14,165,164,.4); outline-offset: 2px; }
.btn-share--copy{ background:linear-gradient(180deg,#f3f4f6,#e5e7eb); color:#0f172a; box-shadow:0 3px 10px rgba(0,0,0,.08); }
/* Marka renkleri (daha yumuşak) */
.btn-fb{ background:var(--fb); }
.btn-wa{ background:var(--wa); color:#063; }
.btn-tw{ background:var(--tw); }
.btn-li{ background:var(--li); }
/* Küçük ekran optimizasyonları */
@media (max-width: 390px){
  .overlay .panel{ width: min(92vw, 270px); gap:8px; }
  .btn-share{ height:38px; border-radius:8px; font-size:12px; padding:0 10px; }
}
/* Overlay butonları daha kompakt */
.overlay .panel .btn-share{ font-size:12px; height:36px; gap:5px; }
/* Yukarı dön butonu güvenli alan */
#backTop{ right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
/* Mobil menü */
.mobile-menu{display:none;}
@media(max-width:767px){.mobile-menu{display:block;}}
.mobile-nav{transition:all .3s ease; max-height:0; overflow:hidden;}
.mobile-nav.open{max-height:500px;}
/* Fotoğraf Galerisi - Modern Grid Design */
#hbGalScroll{ scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scroll-snap-type:none; scroll-padding: 1rem; overscroll-behavior-x:contain; transition: scroll-left 0.6s ease-in-out; }
#hbGalScroll figure{ min-width:calc(45vw - 20px); max-width:280px; height:240px; overflow:hidden; cursor:pointer; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.1); position:relative; background:#f9fafb; flex-shrink:0; transition:box-shadow .3s ease; }
#hbGalScroll figure:hover{ box-shadow:0 8px 24px rgba(0,0,0,.15); }
#hbGalScroll figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1); }
#hbGalScroll figure:hover img{ transform:scale(1.1); }
/* Fotoğraf Modal Pop-up - İyileştirilmiş */
#imageModal{ display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.95); backdrop-filter:blur(8px); justify-content:center; align-items:center; padding:40px 20px; animation:fadeIn .2s ease; }
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
#imageModal.open{ display:flex; }
#imageModal img{ max-width:90vw; max-height:85vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
#imageModal .close-btn{ position:absolute; top:30px; right:30px; background:rgba(255,255,255,.15); backdrop-filter:blur(10px); border:none; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:28px; color:#fff; display:flex; align-items:center; justify-content:center; transition:all .25s ease; border:1px solid rgba(255,255,255,.2); }
#imageModal .close-btn:hover{ transform:scale(1.1) rotate(90deg); background:rgba(255,255,255,.25); }
/* Scrollbar gizle ama stil ver */
#hbGalScroll::-webkit-scrollbar{ height:8px; }
#hbGalScroll::-webkit-scrollbar-track{ background:#f1f1f1; border-radius:10px; }
#hbGalScroll::-webkit-scrollbar-thumb{ background:linear-gradient(90deg, #0ea5a4, #0891b2); border-radius:10px; }
#hbGalScroll::-webkit-scrollbar-thumb:hover{ background:linear-gradient(90deg, #0b8583, #0e7490); }
@media(min-width:640px){ #hbGalScroll figure{ min-width:calc(38vw - 30px); max-width:320px; height:280px; } }
@media(min-width:768px){ #hbGalScroll figure{ min-width:calc(30vw - 30px); max-width:350px; height:300px; } }
@media(min-width:1024px){ #hbGalScroll figure{ min-width:calc(22vw - 30px); max-width:380px; height:320px; } }