/* ==========================================================================
   Café de Costa Rica — tasarım stilleri (DOC/index.html <style> bloğu)
   Tailwind yardımcı sınıflarını tamamlayan özel animasyon/efekt stilleri.
   ========================================================================== */

:root { --copper:#c4824a; --cream:#f1e9d6; --forest:#16352a; }
html, body { background:#0f1d16; }
::selection { background:var(--copper); color:#0f1d16; }

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

/* mobil header (iki satır): üstte ortalanmış büyük logo, altta solda
   iletişim+bayilik / sağda menü. Logo ve header yüksekliği mobilde sabitlenir
   (JS scroll'da uyguladığı h-/w- sınıflarını geçersiz kılar). Yükseklik 150px
   ↔ hero -mt-[150px] (lg'de 136px) ile hizalı. */
@media (max-width:1023px){
  #navbar{ height:160px !important; }
  #navlogo{ height:72px !important; width:72px !important; }
}

/* custom scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0f1d16; }
::-webkit-scrollbar-thumb { background:#2f5d47; border-radius:20px; border:2px solid #0f1d16; }
::-webkit-scrollbar-thumb:hover { background:#c4824a; }

/* film grain overlay */
.grain::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04;
  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");
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.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 }

/* hero load stagger */
@keyframes rise { from{ opacity:0; transform:translateY(40px) } to{ opacity:1; transform:none } }
.load{ opacity:0; animation:rise 1.1s cubic-bezier(.16,1,.3,1) forwards; }

/* marquee */
@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; }

/* steam */
@keyframes steam {
  0%   { opacity:0; transform:translateY(0) scaleX(1) }
  18%  { opacity:.55 }
  100% { opacity:0; transform:translateY(-46px) scaleX(1.7) translateX(6px) }
}
.steam span{
  position:absolute; bottom:0; width:9px; height:42px; border-radius:50%;
  background:linear-gradient(to top, rgba(241,233,214,0), rgba(241,233,214,.45));
  filter:blur(5px); animation:steam 4s ease-out infinite;
}

/* buton dolum (fincan dolması) */
@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-coffee:hover{ transform:translateY(-2px); }
.btn-coffee{ transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }

/* hero beans smoke */
@keyframes smoke {
  0%   { opacity:0; transform:translateY(0) scale(1); }
  22%  { opacity:.32; }
  100% { opacity:0; transform:translateY(-150px) scale(2.6) translateX(14px); }
}
.hero-smoke span{
  position:absolute; bottom:0; width:70px; height:70px; border-radius:50%;
  background:radial-gradient(circle, rgba(241,233,214,.55), rgba(241,233,214,0) 70%);
  filter:blur(16px); animation:smoke 8s ease-in-out infinite;
}

/* floating beans */
@keyframes drift { 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-26px) rotate(18deg) } }
.drift{ animation:drift 9s ease-in-out infinite; }

@keyframes spin-slow { to { transform:rotate(360deg) } }
.spin-slow{ animation:spin-slow 26s linear infinite; }

.text-stroke{ -webkit-text-stroke:1px rgba(221,202,163,.42); color:transparent; }

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

.menu-row:hover .menu-name{ color:var(--copper); transform:translateX(10px); }
.menu-name{ transition:transform .45s cubic-bezier(.16,1,.3,1), color .45s; }
.menu-row:hover .dots{ opacity:1; }

.tilt{ transition:transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; }
.tilt:hover{ transform:translateY(-10px) rotate(-.6deg); box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }

.ribbon-line{ background:linear-gradient(90deg, transparent, #c4824a, transparent); }

/* menu kategori kartları */
.cat-card{ border-radius:12px; box-shadow:inset 0 0 0 1px rgba(221,202,163,.16); 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(196,130,74,.75), 0 44px 70px -30px rgba(0,0,0,.9); }

/* galeri zoom ikonu */
.lb-item{ cursor:pointer; }
.lb-plus{ position:absolute; top:.75rem; right:.75rem; width:2.25rem; height:2.25rem; border-radius:9999px;
  background:rgba(15,29,22,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  color:#f1e9d6; 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 */
#lightbox{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
#lightbox.open{ opacity:1; pointer-events:auto; }
#lightbox .lb-img{ transform:scale(.9); opacity:.4; transition:transform .55s cubic-bezier(.16,1,.3,1), opacity .55s; }
#lightbox.open .lb-img{ transform:scale(1); opacity:1; }

/* ==========================================================================
   Mobil menü (tasarımda yoktu — UI/UX gereği eklendi, tasarım diline sadık)
   ========================================================================== */
.cr-mobile-panel{ transition:opacity .4s ease, visibility .4s ease; }
.cr-mobile-panel[hidden]{ display:block !important; opacity:0; visibility:hidden; pointer-events:none; }
.cr-mobile-panel:not([hidden]){ opacity:1; visibility:visible; pointer-events:auto; }
.cr-burger span{ transition:transform .35s ease, opacity .25s ease; }
.cr-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.cr-burger.open span:nth-child(2){ opacity:0; }
.cr-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobil menü öğe yerleşimi */
.cr-mobile-nav, .cr-mobile-nav .sub-menu{ list-style:none; margin:0; padding:0; }
.cr-mobile-nav li{ position:relative; border-bottom:1px solid rgba(47,93,71,.25); }
.cr-mobile-nav .sub-menu li:last-child{ border-bottom:0; }
.cr-mobile-nav > li > a{ padding-right:3rem; }
.cr-mobile-nav .cr-subtoggle{ position:absolute; right:0; top:4px; }
.cr-mobile-nav .sub-menu{ padding-left:1rem; }
.cr-mobile-nav .sub-menu a{ font-size:1rem; color:rgba(241,233,214,.7); }

/* mobil açılır alt menü */
.cr-mobile-nav .sub-menu{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1); }
.cr-mobile-nav .menu-item-has-children.open > .sub-menu{ max-height:600px; }
.cr-subtoggle svg{ transition:transform .35s ease; }
.cr-subtoggle.open svg{ transform:rotate(180deg); }

/* masaüstü açılır alt menü (hover/odak) */
.cr-desktop-nav .menu-item-has-children{ position:relative; }
.cr-desktop-nav .menu-item-has-children > .sub-menu{
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(10px);
  min-width:210px; background:rgba(15,29,22,.96); backdrop-filter:blur(14px);
  border:1px solid rgba(47,93,71,.45); border-radius:10px; 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;
}
.cr-desktop-nav .menu-item-has-children:hover > .sub-menu,
.cr-desktop-nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.cr-desktop-nav .sub-menu a{ display:block; padding:.55rem .85rem; border-radius:6px; font-size:15px; color:rgba(241,233,214,.8); }
.cr-desktop-nav .sub-menu a:hover{ background:rgba(47,93,71,.35); color:#f1e9d6; }
.cr-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) */
.cr-menu-ico{ display:inline-block; }
.cr-mi-desktop{ font-size:26px; width:26px; height:26px; line-height:26px; color:rgba(196,130,74,.82); transition:color .3s ease, transform .3s ease; }
.cr-desktop-nav > li > a:hover .cr-mi-desktop{ color:var(--copper); transform:translateY(-2px); }
.cr-mi-mobile{ flex:0 0 auto; font-size:22px; width:22px; height:22px; line-height:22px; color:var(--copper); }

/* erişilebilirlik: hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce){
  .load, .drift, .spin-slow, .marquee-track, .steam span, .hero-smoke span{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* form bildirim kutusu */
.cr-form-note{ border-radius:6px; padding:.85rem 1rem; font-size:14px; }
.cr-form-note.ok{ background:rgba(47,93,71,.35); border:1px solid rgba(196,130,74,.5); color:#f1e9d6; }
.cr-form-note.err{ background:rgba(169,84,47,.25); border:1px solid rgba(169,84,47,.6); color:#f1e9d6; }

/* ==========================================================================
   Alt sayfa içerik tipografisi (page/single/archive/search/404)
   ========================================================================== */
.cr-content{ color:rgba(241,233,214,.82); font-size:17px; line-height:1.75; }
.cr-content > *{ margin-bottom:1.25rem; }
.cr-content h1,.cr-content h2,.cr-content h3,.cr-content h4{ font-family:'Fraunces',serif; color:#f1e9d6; line-height:1.2; font-weight:400; margin:2rem 0 1rem; }
.cr-content h1{ font-size:2.25rem; } .cr-content h2{ font-size:1.85rem; }
.cr-content h3{ font-size:1.45rem; } .cr-content h4{ font-size:1.2rem; }
.cr-content a{ color:#dba56a; text-decoration:underline; text-underline-offset:3px; }
.cr-content a:hover{ color:#c4824a; }
.cr-content ul,.cr-content ol{ padding-left:1.4rem; }
.cr-content ul{ list-style:disc; } .cr-content ol{ list-style:decimal; }
.cr-content li{ margin-bottom:.5rem; }
.cr-content blockquote{ border-left:3px solid #c4824a; padding:.4rem 0 .4rem 1.2rem; font-style:italic; color:#cbb98f; }
.cr-content img{ border-radius:6px; max-width:100%; height:auto; }
.cr-content pre{ background:rgba(15,29,22,.7); border:1px solid rgba(47,93,71,.4); border-radius:6px; padding:1rem; overflow:auto; }
.cr-content code{ font-family:'Spline Sans Mono',monospace; font-size:.92em; }
.cr-content table{ width:100%; border-collapse:collapse; }
.cr-content th,.cr-content td{ border:1px solid rgba(47,93,71,.4); padding:.6rem .8rem; text-align:left; }

/* sayfalama */
.cr-pagination{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:3rem; }
.cr-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 .75rem; border:1px solid rgba(47,93,71,.5); border-radius:8px; color:rgba(241,233,214,.8); font-family:'Spline Sans Mono',monospace; font-size:14px; transition:background .25s, color .25s, border-color .25s; }
.cr-pagination .page-numbers:hover{ border-color:#c4824a; color:#f1e9d6; }
.cr-pagination .page-numbers.current{ background:#16352a; border-color:#c4824a; color:#f1e9d6; }

/* yorum alanı temel */
.cr-comments input[type=text],.cr-comments input[type=email],.cr-comments input[type=url],.cr-comments textarea{
	width:100%; background:rgba(22,53,42,.5); border:1px solid rgba(47,93,71,.5); border-radius:4px; padding:.75rem 1rem; color:#f1e9d6;
}
.cr-comments input:focus,.cr-comments textarea:focus{ border-color:#c4824a; outline:none; }

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