/* v15.77 — TELEFON VE TABLET DÜZELTMELERİ + HAREKETLİ PAYLAŞIM SİMGELERİ */

/* 1) "Ekim'de ne tutulur" bölümü kenara yapışıyordu (padding 0 eziyordu) */
.dly-ay{ padding:34px 20px 10px; }
@media (max-width:600px){
  .dly-ay{ padding:26px 14px 6px; }
  /* balık kartları alt alta 1000px yer kaplıyordu → yana kayan şerit */
  .dly-ay-grid{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:6px -14px 16px; padding:0 14px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .dly-ay-grid::-webkit-scrollbar{ display:none; }
  .dly-ay-card{ flex:0 0 78%; scroll-snap-align:start; }
}

/* 2) Sihirbaz sayfası: "Ekim'de çok çıkanlar" kutusu sihirbaz panelinin altında kalıyordu */
.dly-ay-wiz + .wrap > .cw-panel{ margin-top:16px; }
.cw-hero + .dly-ay-wiz{ margin-top:-46px; } /* kutu hero'nun üstüne biner, panel onun altında başlar */
.dly-ay-wiz{ position:relative; z-index:2; }
@media (max-width:600px){
  .dly-ay-wiz-in{ padding:10px 12px; gap:6px; }
  .dly-ay-wiz-in > strong{ flex-basis:100%; }
  .dly-ay-chip{ flex:1 1 140px; }
}

/* 3) Telefon: güven şeridi 4 satır yerine 2×2, kompakt */
@media (max-width:600px){
  .trust-strip{ padding:12px 0; }
  .trust-strip ul{ grid-template-columns:1fr 1fr !important; row-gap:10px !important; column-gap:8px; }
  .trust-strip li{ padding:4px 2px !important; gap:8px; }
  .trust-strip li .ico, .trust-strip li > span:first-child{ width:34px !important; height:34px !important; font-size:16px !important; flex:0 0 34px; }
  .trust-strip :is(h4,.h4){ font-size:12.5px; }
  .trust-strip p{ font-size:10.5px; }
}

/* 4) Slayt noktaları 9px idi → parmakla basılabilir alan (görünüm aynı) */
.hero-dot{ position:relative; }
.hero-dot::after{ content:""; position:absolute; inset:-12px -6px; }
@media (max-width:640px){ .hero-arrow{ display:none; } } /* telefonda kaydırarak geçiliyor, oklar yazının üstüne biniyordu */

/* 5) Telefon/tablet: yüzen düğmeler (♿ erişilebilirlik, 🧙 rehber) alt menünün üstünde, küçük ve içeriği kapatmadan */
@media (max-width:768px){
  .a11y{ left:10px !important; bottom:calc(70px + env(safe-area-inset-bottom)) !important; }
  .a11y-toggle{ width:40px !important; height:40px !important; font-size:19px !important; border-width:2px !important; opacity:.92; }
  .a11y-panel{ bottom:50px !important; }
  .dalyan-guide-badge{ width:48px !important; height:48px !important; right:10px !important; bottom:calc(70px + env(safe-area-inset-bottom)) !important; }
  .dalyan-guide-badge .em{ font-size:24px !important; }
  /* ürün sayfasında "Sepete ekle" çubuğu açıkken ikisi de çubuğun üstüne çıkar */
  body.dly-sticky-on .a11y, body.dly-sticky-on .dalyan-guide-badge{ bottom:calc(136px + env(safe-area-inset-bottom)) !important; }
  .dly-wa-float{ bottom:calc(70px + env(safe-area-inset-bottom)) !important; left:auto !important; right:66px !important; width:48px !important; height:48px !important; }
}

/* 6) Tablet: arama kutusu yarım kalıyordu → tam genişlik */
@media (max-width:1024px){ .header-search-form{ max-width:none !important; } }

/* 7) Ürün sayfası sekmeleri telefonda iki satıra bölünüyordu → yana kayan tek satır */
@media (max-width:600px){
  .woocommerce div.product .woocommerce-tabs ul.tabs{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:0 !important; margin:0 0 -1px !important; }
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display:none; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li{ flex:0 0 auto; white-space:nowrap; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{ padding:10px 14px !important; font-size:14px; }
}

/* 8) Paylaşım düğmeleri telefonda alt satıra taşıyordu */
@media (max-width:480px){
  .dly-share{ gap:7px; }
  .dly-share-label{ flex-basis:100%; margin:0 0 2px; }
  .dly-share-btn{ width:40px; height:40px; }
}

/* 9) Kategori açıklaması telefonda ürünlerin önünde 700px yer kaplıyordu → kısalt + "Devamını oku" */
.dly-clamp{ max-height:9.6em; overflow:hidden; position:relative; }
.dly-clamp::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3.2em; background:linear-gradient(rgba(245,247,250,0), var(--bg,#F5F7FA)); }
.dly-clamp-btn{ display:inline-block; margin:6px 0 14px; padding:7px 14px; border:1px solid var(--border,#e2e8f0); border-radius:999px; background:var(--panel,#fff); color:var(--navy,#0F1F3D); font-weight:700; font-size:13px; }

/* 10) Küçük metin bağlantıları için daha rahat dokunma alanı */
@media (max-width:768px){
  .dly-ay-card a, .section-head .see-all, .dly-rw-head a{ display:inline-block; padding:6px 0; }
}

/* ================= HAREKETLİ PAYLAŞIM SİMGELERİ (GIF değil, hafif CSS/SVG) ================= */
.dly-share.dly-anim .dly-share-btn{ opacity:0; transform:scale(.4) translateY(8px); }
.dly-share.dly-anim.is-in .dly-share-btn{ animation:dly-sh-in .5s cubic-bezier(.2,1.4,.4,1) forwards; }
.dly-share.dly-anim.is-in .dly-share-btn:nth-of-type(1){ animation-delay:.00s } .dly-share.dly-anim.is-in .dly-share-btn:nth-of-type(2){ animation-delay:.07s }
.dly-share.dly-anim.is-in .dly-share-btn:nth-of-type(3){ animation-delay:.14s } .dly-share.dly-anim.is-in .dly-share-btn:nth-of-type(4){ animation-delay:.21s }
.dly-share.dly-anim.is-in .dly-share-btn:nth-of-type(5){ animation-delay:.28s } .dly-share.dly-anim.is-in .dly-share-btn:nth-of-type(6){ animation-delay:.35s }
@keyframes dly-sh-in{ to{ opacity:1; transform:none; } }
/* WhatsApp: birkaç saniyede bir dalga halkası (dikkat çeker, rahatsız etmez) */
.dly-share .dly-share-btn.whatsapp{ position:relative; overflow:visible; }
.dly-share.is-in .dly-share-btn.whatsapp::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:dly-sh-ring 3.2s ease-out 1.2s infinite; }
@keyframes dly-sh-ring{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); } 70%,100%{ box-shadow:0 0 0 14px rgba(37,211,102,0); } }
/* Üzerine gelince / dokununca hafif zıplama ve sallanma */
.dly-share-btn:hover svg, .dly-share-btn:focus-visible svg{ animation:dly-sh-wig .45s ease; }
.dly-share-btn:active{ transform:scale(.92) !important; }
@keyframes dly-sh-wig{ 0%{ transform:rotate(0) } 25%{ transform:rotate(-14deg) scale(1.12) } 55%{ transform:rotate(10deg) scale(1.12) } 100%{ transform:rotate(0) } }
/* Instagram renk geçişi yavaşça döner */
.dly-share.is-in .dly-share-btn.instagram{ background-size:180% 180%; animation:dly-sh-in .5s cubic-bezier(.2,1.4,.4,1) .28s forwards, dly-sh-ig 6s ease-in-out 1s infinite; }
@keyframes dly-sh-ig{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
@media (prefers-reduced-motion: reduce){
  .dly-share.dly-anim .dly-share-btn{ opacity:1; transform:none; animation:none !important; }
  .dly-share .dly-share-btn::after, .dly-share-btn svg{ animation:none !important; }
}
