/* ==========================================================================
   Bellarom Kahve Evi — tasarım stilleri (DOC/index.html <style> bloğu)
   Tailwind yardımcı sınıflarını tamamlayan özel animasyon/efekt stilleri.
   ========================================================================== */

:root { --gold:#c9a24d; --ivory:#f4ebda; --ink:#150e09; --bordo:#9b1c22; }
html, body { background:#150e09; }
::selection { background:var(--gold); color:#150e09; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#150e09; }
::-webkit-scrollbar-thumb { background:#3a291c; border-radius:20px; border:2px solid #150e09; }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* sticky header'a anchor link atlandığında başlık header altında kalmasın */
#top, #hakkimizda, #bayilik, #menu, #mekan, #magazalar, #iletisim { scroll-margin-top: 104px; }
@media (max-width:1023px){
  #top, #hakkimizda, #bayilik, #menu, #mekan, #magazalar, #iletisim { scroll-margin-top: 88px; }
}

/* Cormorant düşük x-height'lı: başlıklarda optik düzeltme */
.font-display{ letter-spacing:.005em; }
h1.font-display, h2.font-display{ font-feature-settings:"liga" 1,"calt" 1; }

/* film grain */
.grain::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── scroll reveal ── */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.reveal.yon-sol{ transform:translateX(-72px) }
.reveal.yon-sag{ transform:translateX(72px) }
.reveal.yon-alt{ transform:translateY(76px) }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.12s } .reveal[data-d="2"]{ transition-delay:.24s }
.reveal[data-d="3"]{ transition-delay:.36s } .reveal[data-d="4"]{ transition-delay:.48s }
.reveal[data-d="5"]{ transition-delay:.6s }

/* ── giriş animasyonları ── */
@keyframes yukselis {
  from{ opacity:0; transform:translateY(44px) scale(.975); filter:blur(9px) }
  to  { opacity:1; transform:none; filter:blur(0) }
}
.load{ opacity:0; animation:yukselis 1.25s cubic-bezier(.16,1,.3,1) forwards; }

@keyframes harf-gel {
  from{ opacity:0; transform:translateY(.42em) rotate(3.5deg); filter:blur(7px) }
  to  { opacity:1; transform:none; filter:blur(0) }
}
.harf{ display:inline-block; opacity:0; animation:harf-gel .95s cubic-bezier(.2,.9,.25,1) forwards; }

@keyframes kalkan-gel {
  from{ opacity:0; transform:translateY(38px) scale(.94); filter:blur(14px) }
  to  { opacity:1; transform:none; filter:blur(0) }
}
.load-kalkan{ opacity:0; animation:kalkan-gel 1.5s cubic-bezier(.16,1,.3,1) forwards; }

/* sürekli yavaş zoom */
@keyframes zoom-yavas { 0%,100%{ transform:scale(1.03) } 50%{ transform:scale(1.14) } }
.zoom-yavas{ animation:zoom-yavas 20s ease-in-out infinite; }

@keyframes zoom-mobil {
  0%   { transform:scale(1.08) translate(0,0) }
  50%  { transform:scale(1.24) translate(-2.5%,-1.5%) }
  100% { transform:scale(1.08) translate(0,0) }
}
.zoom-mobil{ animation:zoom-mobil 26s ease-in-out infinite; }

/* buton dolumu */
@keyframes fillUp { 0%{ transform:translateY(101%);} 100%{ transform:translateY(0);} }
.btn-fill{ animation:fillUp 1.2s cubic-bezier(.34,1.2,.4,1) both; }
.btn-gold{ transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.btn-gold:hover{ transform:translateY(-2px); }

/* damlama · şeridin üstünden damlaya düşen kahve */
@keyframes damlama {
  0%   { transform:translateY(-30px) scaleY(.7); opacity:0 }
  18%  { opacity:.85 }
  52%  { transform:translateY(-2px) scaleY(1); opacity:.85 }
  64%  { transform:translateY(-2px) scaleY(.35) scaleX(1.5); opacity:0 }
  100% { opacity:0 }
}
.damlama{ animation:damlama 5.5s cubic-bezier(.5,0,.75,0) infinite; transform-origin:50% 100%; }

/* açık bölümlerin boş kenarları: heraldik kafes dokusu */
.kenar::before, .kenar::after{
  content:""; position:absolute; top:0; bottom:0; z-index:0; pointer-events:none;
  width:clamp(26px, 8vw, 132px);
  background-image:
    repeating-linear-gradient(45deg,  rgba(133,104,32,.085) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(133,104,32,.085) 0 1px, transparent 1px 24px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.kenar::before{ left:0;  border-right:1px solid rgba(133,104,32,.16); }
.kenar::after { right:0; border-left:1px solid rgba(133,104,32,.16); }

/* hero zemini: altın hairline ızgara */
.izgara{
  background-image:
    repeating-linear-gradient(90deg, rgba(201,162,77,.075) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg,  rgba(201,162,77,.05)  0 1px, transparent 1px 92px);
}

.link-underline{ position:relative; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--gold); transition:width .45s cubic-bezier(.16,1,.3,1); }
.link-underline:hover::after{ width:100%; }

/* altın kartuş köşeleri — arma diline ait çerçeve işareti */
.cartouche{ position:relative; }
.cartouche::before, .cartouche::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:rgba(201,162,77,.55); transition:border-color .5s;
}
.cartouche::before{ top:7px; left:7px; border-top:1px solid; border-left:1px solid; }
.cartouche::after{ bottom:7px; right:7px; border-bottom:1px solid; border-right:1px solid; }
.cartouche:hover::before, .cartouche:hover::after{ border-color:var(--gold); }

.text-stroke{ -webkit-text-stroke:1px rgba(201,162,77,.4); color:transparent; }

.tilt{ transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s, border-color .55s; }

.rule-gold{ background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.acik .rule-gold{ background:linear-gradient(90deg, transparent, #856820, transparent); }
.acik .cartouche::before, .acik .cartouche::after{ border-color:rgba(133,104,32,.42); }
.acik .cartouche:hover::before, .acik .cartouche:hover::after{ border-color:#856820; }
.acik .cat-card{ box-shadow:inset 0 0 0 1px rgba(21,14,9,.12); }
.acik .cat-card:hover{ box-shadow:inset 0 0 0 1.5px rgba(133,104,32,.6), 0 40px 60px -30px rgba(21,14,9,.35); }

/* ── nav ölçüleri ── */
#navbar{ height:76px; transition:height .5s cubic-bezier(.16,1,.3,1); }
.nav-ikon{ max-height:26px; opacity:1; overflow:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .3s, transform .45s; }
#nav[data-kucuk="1"] .nav-link{ gap:0; }
#nav[data-kucuk="1"] .nav-ikon{ max-height:0; opacity:0; transform:translateY(6px); }
#nav[data-kucuk="1"]{ box-shadow:0 14px 36px -26px rgba(0,0,0,.85); }
/* sticky'de tabela sarkmayı bırakır, barın içine oturur */
#nav[data-kucuk="1"] #navplaka{ align-self:center; border-radius:7px; }
#nav[data-kucuk="1"] #navplaka img{ padding:4px; }
.nav-link.aktif{ color:var(--ivory); }
.nav-link.aktif .nav-ikon{ color:var(--gold); }
.nav-link.aktif .link-underline::after{ width:100%; }
#navplaka{ width:126px; height:92px; transition:width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
#nav[data-kucuk="1"] #navbar{ height:70px; }
#nav[data-kucuk="1"] #navplaka{ width:92px; height:64px; }
@media (min-width:1024px){
  #navbar{ height:96px; }
  #navplaka{ width:164px; height:116px; }
  #nav[data-kucuk="1"] #navbar{ height:78px; }
  #nav[data-kucuk="1"] #navplaka{ width:104px; height:72px; }
}

/* menü kategori kartları */
.cat-card{ box-shadow:inset 0 0 0 1px rgba(201,162,77,.18); transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s; }
.cat-card:hover{ transform:translateY(-10px); box-shadow:inset 0 0 0 1.5px rgba(201,162,77,.8), 0 44px 70px -30px rgba(0,0,0,.9); }

.ray-gizli{ scrollbar-width:none; -ms-overflow-style:none; }
.ray-gizli::-webkit-scrollbar{ display:none; }

/* ── lightbox ── */
.lb-item{ cursor:pointer; }
.lb-plus{ position:absolute; top:.75rem; right:.75rem; width:2.25rem; height:2.25rem; border-radius:9999px;
  background:rgba(21,14,9,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  color:var(--ivory); opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s; }
.lb-plus svg{ width:1rem; height:1rem; }
.lb-item:hover .lb-plus{ opacity:1; transform:translateY(0); }

#lightbox{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease, visibility .4s; }
#lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
#lightbox .lb-img{ transform:scale(.92); opacity:.4; transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .55s; }
#lightbox.open .lb-img{ transform:scale(1); opacity:1; }

/* marquee (kayan yazı şeridi — içerik girilirse görünür) */
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee-track{ animation:marquee 38s linear infinite; }
.marquee-track.rev{ animation-direction:reverse; }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ==========================================================================
   Mobil menü (tasarımdaki #mobilmenu dili; WordPress menüsüyle çalışır)
   ========================================================================== */
.bl-mobile-panel{ background:rgba(21,14,9,.96); transition:opacity .4s ease, visibility .4s ease; }
.bl-mobile-panel[hidden]{ display:block !important; opacity:0; visibility:hidden; pointer-events:none; }
.bl-mobile-panel:not([hidden]){ opacity:1; visibility:visible; pointer-events:auto; }
.bl-mobile-panel .bl-panel-cerceve{ position:absolute; inset:1.25rem; border:1px solid rgba(201,162,77,.25); pointer-events:none; }

.bl-burger span{ transition:transform .35s ease, opacity .25s ease; }
.bl-burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.bl-burger.open span:nth-child(2){ opacity:0; }
.bl-burger.open span:nth-child(3){ width:1.5rem; align-self:center; margin-right:0; transform:translateY(-6px) rotate(-45deg); }

.bl-mobile-nav, .bl-mobile-nav .sub-menu{ list-style:none; margin:0; padding:0; }
.bl-mobile-nav li{ position:relative; border-bottom:1px solid rgba(201,162,77,.16); }
.bl-mobile-nav .sub-menu li:last-child{ border-bottom:0; }
.bl-mobile-nav > li > a{ padding-right:3rem; }
.bl-mobile-nav .bl-subtoggle{ position:absolute; right:0; top:6px; }
.bl-mobile-nav .sub-menu{ padding-left:1rem; max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.bl-mobile-nav .sub-menu a{ font-size:17px; color:rgba(244,235,218,.72); }
.bl-mobile-nav .menu-item-has-children.open > .sub-menu{ max-height:600px; }
.bl-subtoggle svg{ transition:transform .35s ease; }
.bl-subtoggle.open svg{ transform:rotate(180deg); }

/* panel açılırken öğeler sırayla gelir */
.bl-mobile-panel .bl-mobile-nav > li,
.bl-mobile-panel .bl-panel-cta{ opacity:0; transform:translateY(18px); transition:opacity .5s, transform .5s; }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li,
.bl-mobile-panel:not([hidden]) .bl-panel-cta{ opacity:1; transform:none; }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li:nth-child(1){ transition-delay:.08s }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li:nth-child(2){ transition-delay:.14s }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li:nth-child(3){ transition-delay:.20s }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li:nth-child(4){ transition-delay:.26s }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li:nth-child(5){ transition-delay:.32s }
.bl-mobile-panel:not([hidden]) .bl-mobile-nav > li:nth-child(6){ transition-delay:.38s }
.bl-mobile-panel:not([hidden]) .bl-panel-cta{ transition-delay:.44s }

/* masaüstü menü listesi + altın ayraçlar (tasarımdaki dikey çizgiler) */
.bl-desktop-nav{ display:flex; align-items:center; justify-content:center; gap:1.5rem; list-style:none; margin:0; padding:0; }
.bl-desktop-nav > li{ position:relative; display:flex; align-items:center; }
.bl-desktop-nav > li + li::before{
  content:""; position:absolute; left:-.75rem; top:50%; transform:translateY(-50%);
  width:1px; height:2.5rem; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(201,162,77,.55), transparent);
}
@media (min-width:1280px){
  .bl-desktop-nav{ gap:1.75rem; }
  .bl-desktop-nav > li + li::before{ left:-.875rem; }
}

/* masaüstü açılır alt menü (hover/odak) */
.bl-desktop-nav .menu-item-has-children{ position:relative; }
.bl-desktop-nav .menu-item-has-children > .sub-menu{
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(10px);
  min-width:210px; background:rgba(21,14,9,.97); backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,77,.3); padding:.5rem;
  opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s ease, visibility .3s;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.85); z-index:60;
}
.bl-desktop-nav .menu-item-has-children:hover > .sub-menu,
.bl-desktop-nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.bl-desktop-nav .sub-menu{ list-style:none; margin:0; }
.bl-desktop-nav .sub-menu a{ display:block; padding:.55rem .85rem; font-size:16px; color:rgba(244,235,218,.8); }
.bl-desktop-nav .sub-menu a:hover{ background:rgba(58,41,28,.6); color:var(--ivory); }
.bl-desktop-nav .sub-menu .sub-menu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; padding:0 0 0 .6rem; background:transparent; }

/* menü öğesi ikonları (Görünüm → Menüler ile seçilir) */
.bl-menu-ico{ display:inline-block; }
.bl-mi-desktop{ font-size:23px; width:23px; height:23px; line-height:23px; color:rgba(201,162,77,.65); transition:color .3s ease, transform .3s ease; }
.bl-desktop-nav > li > a:hover .bl-mi-desktop{ color:var(--gold); transform:translateY(-2px); }
.bl-mi-mobile{ flex:0 0 auto; font-size:22px; width:22px; height:22px; line-height:22px; color:var(--gold); }

/* form bildirim kutusu */
.bl-form-note{ padding:.85rem 1rem; font-size:15px; border:1px solid; }
.bl-form-note.ok{ background:rgba(133,104,32,.1); border-color:rgba(133,104,32,.55); color:#4a3a2b; }
.bl-form-note.err{ background:rgba(155,28,34,.08); border-color:rgba(155,28,34,.5); color:#6e1418; }

/* ==========================================================================
   Alt sayfa içerik tipografisi (page/single/archive/search/404)
   ========================================================================== */
.bl-content{ color:rgba(244,235,218,.82); font-size:18px; line-height:1.75; }
.bl-content > *{ margin-bottom:1.25rem; }
.bl-content h1,.bl-content h2,.bl-content h3,.bl-content h4{ font-family:'Cormorant Garamond',Georgia,serif; color:var(--ivory); line-height:1.2; font-weight:500; margin:2rem 0 1rem; }
.bl-content h1{ font-size:2.4rem; } .bl-content h2{ font-size:1.95rem; }
.bl-content h3{ font-size:1.5rem; } .bl-content h4{ font-size:1.25rem; }
.bl-content a{ color:#e3c87f; text-decoration:underline; text-underline-offset:3px; }
.bl-content a:hover{ color:var(--gold); }
.bl-content ul,.bl-content ol{ padding-left:1.4rem; }
.bl-content ul{ list-style:disc; } .bl-content ol{ list-style:decimal; }
.bl-content li{ margin-bottom:.5rem; }
.bl-content blockquote{ border-left:3px solid var(--gold); padding:.4rem 0 .4rem 1.2rem; font-style:italic; color:#a99177; }
.bl-content img{ max-width:100%; height:auto; }
.bl-content pre{ background:rgba(30,21,14,.8); border:1px solid rgba(201,162,77,.25); padding:1rem; overflow:auto; }
.bl-content code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
.bl-content table{ width:100%; border-collapse:collapse; }
.bl-content th,.bl-content td{ border:1px solid rgba(201,162,77,.25); padding:.6rem .8rem; text-align:left; }

/* sayfalama */
.bl-pagination{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:3rem; }
.bl-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 .75rem; border:1px solid rgba(201,162,77,.35); color:rgba(244,235,218,.8); font-family:'Marcellus',Georgia,serif; font-size:15px; transition:background .25s, color .25s, border-color .25s; }
.bl-pagination .page-numbers:hover{ border-color:var(--gold); color:var(--ivory); }
.bl-pagination .page-numbers.current{ background:#2a1d14; border-color:var(--gold); color:var(--ivory); }

/* yorum alanı temel */
.bl-comments input[type=text],.bl-comments input[type=email],.bl-comments input[type=url],.bl-comments textarea{
	width:100%; background:rgba(30,21,14,.6); border:1px solid rgba(201,162,77,.3); padding:.75rem 1rem; color:var(--ivory);
}
.bl-comments input:focus,.bl-comments textarea:focus{ border-color:var(--gold); outline:none; }

/* mağazalar slider — track scrollbar gizle (oklarla yönetilir) */
.bl-stores-track{ scrollbar-width:none; -ms-overflow-style:none; scroll-padding-left:.25rem; }
.bl-stores-track::-webkit-scrollbar{ width:0; height:0; display:none; }

/* erişilebilirlik: hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .load, .load-kalkan, .harf{ opacity:1; animation:none; filter:none; }
}