/* ================================================
   BRANDEDBY HOMEPAGE CSS
   Yapıştır: Görünüm → Özelleştir → Ek CSS
   ================================================ */

.bb-hp { font-family: 'DM Sans', sans-serif; }
.bb-hp * { box-sizing: border-box; }
.bb-hp a { text-decoration: none; color: inherit; }
.bb-hp img { max-width: 100%; display: block; }

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,300&family=DM+Sans:wght@300;400;500;600&display=swap');

/* PROMO STRIP */
.bb-strip { background: #1e5c35; color: #fff; text-align: center; padding: 11px 16px; font-size: 13px; width: 100%; }
.bb-strip strong { font-weight: 700; }

/* HERO */
.bb-hero { position: relative; background: #111a14; overflow: hidden; width: 100%; }
.bb-hero-track { display: flex; height: 580px; transition: transform .95s cubic-bezier(.77,0,.175,1); }
.bb-slide { min-width: 100%; position: relative; flex-shrink: 0; overflow: hidden; }
.bb-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 7s ease; }
.bb-slide.on img { transform: scale(1); }
.bb-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,20,10,.8) 0%, rgba(8,20,10,.45) 52%, transparent 100%); }
.bb-cap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 0 7%; }
.bb-eye { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bb-eye-line { width: 0; height: 1px; background: #4dba74; transition: width .7s .2s; }
.bb-slide.on .bb-eye-line { width: 36px; }
.bb-eye-txt { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #7deba4; font-weight: 500; opacity: 0; transform: translateX(-8px); transition: opacity .5s .4s, transform .5s .4s; }
.bb-slide.on .bb-eye-txt { opacity: 1; transform: translateX(0); }
.bb-hero-h { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 600; color: #fff; line-height: 1.08; letter-spacing: -.5px; margin-bottom: 14px !important; }
.bb-hero-h em { font-style: italic; font-weight: 300; color: #a3e8bc; }
.bb-hw { display: inline-block; overflow: hidden; vertical-align: top; margin-right: 8px; }
.bb-hw span { display: block; transform: translateY(110%); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.bb-slide.on .bb-hw span { transform: translateY(0); }
.bb-hero-p { font-size: clamp(.88rem, 1.5vw, 1.05rem); color: rgba(255,255,255,.72); max-width: 400px; margin-bottom: 26px !important; opacity: 0; transform: translateY(12px); transition: opacity .6s .6s, transform .6s .6s; }
.bb-slide.on .bb-hero-p { opacity: 1; transform: translateY(0); }
.bb-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; transform: translateY(10px); transition: opacity .5s .8s, transform .5s .8s; }
.bb-slide.on .bb-hero-btns { opacity: 1; transform: translateY(0); }
.bb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: 8px; font-size: 13.5px; font-weight: 500; cursor: pointer; border: none; transition: all .2s; letter-spacing: .3px; font-family: 'DM Sans', sans-serif; }
.bb-btn-g { background: #3a9e5f; color: #fff !important; }
.bb-btn-g:hover { background: #2d7a49; transform: translateY(-1px); }
.bb-btn-o { background: transparent; color: #3a9e5f !important; border: 1.5px solid #3a9e5f; }
.bb-btn-o:hover { background: #eaf5f0; }
.bb-ghost { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75) !important; font-size: 13.5px; background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 11px 22px; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; }
.bb-ghost:hover { border-color: #fff; color: #fff !important; }
.bb-hctrl { position: absolute; bottom: 24px; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 7%; }
.bb-hdots { display: flex; gap: 8px; }
.bb-hdot { width: 26px; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; cursor: pointer; border: none; transition: all .3s; padding: 0; }
.bb-hdot.on { background: #3a9e5f; width: 46px; }
.bb-harrs { display: flex; gap: 8px; }
.bb-harr { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.bb-harr:hover { background: #3a9e5f; border-color: #3a9e5f; }
.bb-hnum { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: rgba(255,255,255,.12); line-height: 1; }
.bb-hnum span { font-size: 16px; color: rgba(255,255,255,.5); }
.bb-hprog { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.1); z-index: 10; }
.bb-hbar { height: 100%; background: #3a9e5f; width: 0%; }
.bb-hbar.run { width: 100%; transition: width 5.5s linear; }

/* USP BAR */
.bb-usp { background: #1e5c35; }
.bb-usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid rgba(255,255,255,.1); }
.bb-usp-item { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-right: 1px solid rgba(255,255,255,.1); color: #fff; }
.bb-usp-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bb-usp-txt strong { display: block; font-size: 13px; font-weight: 600; }
.bb-usp-txt span { font-size: 11.5px; color: rgba(255,255,255,.65); }

/* SECTIONS */
.bb-sec { padding: 72px 0; }
.bb-sec-cream { background: #f9f8f5; }
.bb-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.bb-sec-head { text-align: center; margin-bottom: 44px; }
.bb-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #3a9e5f; font-weight: 600; display: block; margin-bottom: 10px; }
.bb-h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.9rem, 3.5vw, 2.7rem); font-weight: 600; color: #111a14; line-height: 1.15; }
.bb-h2 em { font-style: italic; font-weight: 300; color: #3a9e5f; }
.bb-sub { font-size: 14.5px; color: #6b7280; margin-top: 10px; max-width: 480px; margin-left: auto; margin-right: auto; }
.bb-more { text-align: center; margin-top: 36px; }

/* SKELETON */
.bb-skel { background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%); background-size: 200% 100%; animation: bbshim 1.4s infinite; border-radius: 8px; }
@keyframes bbshim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* CATEGORIES */
.bb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 16px; }
.bb-cat { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: .78; cursor: pointer; }
.bb-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bb-cat:hover img { transform: scale(1.07); }
.bb-cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,20,10,.75) 0%, rgba(8,20,10,.18) 60%, transparent 100%); }
.bb-cat-body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 16px 14px; }
.bb-cat-name { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 3px !important; }
.bb-cat-cnt { font-size: 12px; color: rgba(255,255,255,.65); }
.bb-cat-arr { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s; }
.bb-cat:hover .bb-cat-arr { background: #3a9e5f; }
.bb-cat-skel { aspect-ratio: .78; min-height: 220px; }

/* TABS */
.bb-tabs { display: flex; gap: 4px; border-bottom: 2px solid #e4ebe6; margin-bottom: 36px; }
.bb-tab { padding: 10px 20px; font-size: 13.5px; font-weight: 500; color: #6b7280; cursor: pointer; border: none; background: none; font-family: 'DM Sans', sans-serif; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; }
.bb-tab.on { color: #3a9e5f; border-bottom-color: #3a9e5f; }
.bb-tp { display: none; }
.bb-tp.on { display: block; }

/* PRODUCTS */
.bb-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.bb-prod { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #e4ebe6; transition: box-shadow .25s, transform .25s; }
.bb-prod:hover { box-shadow: 0 12px 36px rgba(0,0,0,.12); transform: translateY(-3px); }
.bb-pimg { position: relative; overflow: hidden; aspect-ratio: 1; background: #f9f8f5; }
.bb-pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bb-prod:hover .bb-pimg img { transform: scale(1.07); }
.bb-ptags { position: absolute; top: 9px; left: 9px; display: flex; gap: 5px; flex-wrap: wrap; z-index: 2; }
.bb-ptag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; }
.bb-ptag-sale { background: #fff0f0; color: #c0392b; }
.bb-ptag-new { background: #e8f5ee; color: #1e5c35; }
.bb-ptag-feat { background: #fff8e0; color: #a07400; }
.bb-pacts { position: absolute; bottom: -48px; left: 0; right: 0; display: flex; gap: 6px; padding: 0 10px 10px; transition: bottom .22s ease; }
.bb-prod:hover .bb-pacts { bottom: 0; }
.bb-pact { flex: 1; padding: 9px 6px; background: #fff; border: 1px solid #e4ebe6; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: #111a14; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .18s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bb-pact:hover { background: #3a9e5f; color: #fff; border-color: #3a9e5f; }
.bb-pact-sm { flex: 0; min-width: 38px; }
.bb-pbody { padding: 14px 15px 16px; }
.bb-pcat { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #6b7280; margin-bottom: 5px; }
.bb-pname { font-size: 14px; font-weight: 500; color: #111a14; line-height: 1.35; margin-bottom: 8px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-pname a { color: inherit; }
.bb-pprice { display: flex; align-items: baseline; gap: 8px; }
.bb-pprice-cur { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: #3a9e5f; }
.bb-pprice-old { font-size: 12.5px; color: #6b7280; text-decoration: line-through; }
.bb-prat { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.bb-stars { color: #f5a623; font-size: 12px; }
.bb-rcnt { font-size: 11.5px; color: #6b7280; }
.bb-ps-img { height: 200px; }
.bb-ps-line { height: 13px; border-radius: 4px; margin-bottom: 8px; }
.bb-ps-price { height: 17px; width: 80px; border-radius: 4px; }

/* BANNERS */
.bb-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bb-banner { border-radius: 14px; overflow: hidden; position: relative; min-height: 280px; display: flex; align-items: flex-end; cursor: pointer; }
.bb-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bb-banner:hover img { transform: scale(1.04); }
.bb-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, transparent 60%); }
.bb-banner-body { position: relative; z-index: 2; padding: 26px; }
.bb-banner-lbl { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 8px; display: block; }
.bb-banner-h { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 14px !important; }
.bb-banner-lnk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.bb-banner:hover .bb-banner-lnk { border-color: #fff; }

/* STATS */
.bb-stats { background: #1e5c35; padding: 64px 0; }
.bb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.bb-stat-n { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 300; color: #fff; line-height: 1; }
.bb-stat-n sup { font-size: 1.4rem; vertical-align: super; color: #4dba74; }
.bb-stat-l { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 6px; letter-spacing: .5px; }

/* TESTIMONIALS */
.bb-testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bb-testi { background: #fff; border-radius: 14px; padding: 26px; border: 1px solid #e4ebe6; }
.bb-testi-stars { color: #f5a623; font-size: 14px; margin-bottom: 14px; }
.bb-testi-txt { font-size: 14.5px; color: #2a2a2a; line-height: 1.7; font-style: italic; margin-bottom: 20px !important; }
.bb-testi-author { display: flex; align-items: center; gap: 12px; }
.bb-avatar { width: 40px; height: 40px; border-radius: 50%; background: #eaf5f0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #3a9e5f; font-size: 13px; flex-shrink: 0; }
.bb-aname { font-weight: 600; font-size: 13.5px; color: #111a14; }
.bb-arole { font-size: 12px; color: #6b7280; }

/* NEWSLETTER */
.bb-news { background: #1e5c35; padding: 72px 0; }
.bb-news-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.bb-news h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 600; color: #fff; margin-bottom: 10px !important; }
.bb-news h2 em { font-style: italic; font-weight: 300; color: #a3e8bc; }
.bb-news p { font-size: 15px; color: rgba(255,255,255,.72); margin-bottom: 28px !important; }
.bb-nf { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
.bb-nf input { flex: 1; padding: 12px 16px; border: none; border-radius: 8px; font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none; color: #1a1a1a; }
.bb-nf button { padding: 12px 22px; background: #3a9e5f; color: #fff; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: background .2s; white-space: nowrap; }
.bb-nf button:hover { background: #2d7a49; }

/* TOAST */
.bb-toast { position: fixed; bottom: 24px; right: 24px; background: #111a14; color: #fff; padding: 13px 18px; border-radius: 14px; font-size: 13.5px; z-index: 99999; transform: translateY(100px); opacity: 0; transition: all .35s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.bb-toast.show { transform: translateY(0); opacity: 1; }
.bb-toast-ic { width: 28px; height: 28px; background: #3a9e5f; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bb-err { text-align: center; padding: 40px 20px; color: #6b7280; font-size: 14px; grid-column: 1/-1; }

/* RESPONSIVE */
@media (max-width: 992px) {
  .bb-usp-grid { grid-template-columns: repeat(2, 1fr); }
  .bb-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .bb-testis { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .bb-hero-track { height: 440px; }
  .bb-sec { padding: 44px 0; }
  .bb-wrap { padding: 0 16px; }
  .bb-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bb-prods { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .bb-banners { grid-template-columns: 1fr; }
  .bb-nf { flex-direction: column; }
}