/* ======================================================
   Fiona Çiçek – Minimal, dönüşüm odaklı tema
   Masaüstü odaklı cilalama + mobil uyumluluk korundu
   ====================================================== */

/* ---------- Temel Değişkenler ---------- */
:root{
  --brand:#1aa160;
  --brand-2:#0d8a53;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#ffffff;
  --soft:#f6fff9;
  --radius:20px;
  --shadow:0 14px 30px rgba(15,23,42,.12);
}

/* ---------- Resetler / Tipografi ---------- */
html{scroll-behavior:smooth}
body{font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background:var(--bg)}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-2)}
.container{max-width:1200px}

/* ---------- Butonlar ---------- */
.btn-cta{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700}
.btn-cta:hover{background:var(--brand-2); border-color:var(--brand-2); color:#fff}
.btn-outline-secondary{border-color:#d0d7e2; color:#334155}
.btn-outline-secondary:hover{background:#f3f6fb; border-color:#c2cada}
.btn-soft{background:var(--soft); border-color:#d6f3e4; color:var(--brand); font-weight:700}
.btn-circle{width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center}

/* ---------- Topbar ---------- */
.topbar{background:#0f172a; color:#e2e8f0; font-size:.92rem}
.topbar a{color:inherit}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:.5rem}

/* topbar call/wa hapları */
.btn-topbar{padding:.35rem .6rem; line-height:1; border-radius:999px; font-size:.86rem; font-weight:700}
.btn-topbar.btn-outline-light{border-color:rgba(255,255,255,.35)}
.btn-topbar.btn-outline-light:hover{background:rgba(255,255,255,.08)}
.btn-topbar.btn-cta{background:#25d366; border-color:#25d366; color:#0b301d}
.btn-topbar.btn-cta:hover{filter:brightness(.95)}

/* ---------- Navbar (blur + gölge) ---------- */
.navbar-main{
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.92);
  transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
  border-bottom:1px solid #eef2f6;
}
.navbar-main.nav-scrolled{background:#fff; box-shadow:0 6px 24px rgba(16,24,40,.08)}
.navbar-main .logo{height:44px}
.navbar-main .nav-link{color:#334155; font-weight:700; opacity:.92; padding:.5rem .75rem; border-radius:10px}
.navbar-main .nav-link:hover{opacity:1; color:var(--brand); background:rgba(26,161,96,.08)}
.navbar-main .btn{border-radius:999px; padding:.5rem .9rem; font-weight:800}

/* ---------- HERO Mozaik ---------- */
/* Masaüstünde iki sütun: solda büyük afiş, sağda iki küçük afiş */
.hero{padding:24px 0 12px}
.hero .container{position:relative}
.banner{position:relative; border-radius:var(--radius); overflow:hidden}
.banner>img{width:100%; height:100%; object-fit:cover; display:block}
.banner .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55))}
.banner .content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:22px}
.banner h1,.banner h2,.banner h3,.banner p{color:#fff; margin:0}
.banner a.btn{align-self:flex-start}

.banner-lg{aspect-ratio: 16 / 7; min-height:420px}
.banner-md{aspect-ratio: 16 / 9; min-height:200px}

/* Grid (HTML’i değiştirmeden mevcut sınıflarla çalışır) */
.banner-main{grid-area: main}
.banner-right{grid-area: right; display:grid; grid-template-rows:1fr 1fr; gap:16px}
.hero-grid{display:grid; grid-template-columns:1.6fr .9fr; grid-template-areas:'main right'; gap:16px}

/* Mobilde büyük görsel + küçükler alt alta */
@media (max-width:991.98px){
  .hero-grid{grid-template-columns:1fr; grid-template-areas:'main' 'right'}
  .banner-lg{min-height:360px}
}
@media (max-width:575.98px){
  .hero{padding:10px 0 6px}
  .banner-lg{min-height:260px; aspect-ratio:auto}
  .banner-right{grid-template-rows:auto; gap:8px}
  .banner-md{min-height:140px}
  .banner .content{padding:12px}
}

/* ---------- Güven ikonları ---------- */
.trust i{font-size:1.35rem; color:var(--brand)}

/* ---------- Bölüm başlıkları ---------- */
.section-title{display:flex; align-items:center; gap:10px}
.section-title i{color:var(--brand)}
.section-title .h4,.section-title .h5{margin:0}

/* ---------- Ürün kartları ---------- */
.product-card{transition:.25s ease; border-radius:18px; overflow:hidden; border:1px solid #eef2f6}
.product-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.product-card img{height:240px; object-fit:cover}
.product-card .card-body{padding:14px}
.price{font-weight:800; font-size:1.05rem}

/* 2 sütun mobil – 3/4 sütun masaüstü */
.row-products{--bs-gutter-x:1rem; --bs-gutter-y:1rem}
@media (max-width:575.98px){
  .product-col{flex:0 0 50%; max-width:50%}
}

/* ---------- Mağaza Banner ---------- */
.banner .btn-soft{background:rgba(255,255,255,.92); border-color:#fff; color:#0f172a}
.banner .btn-soft:hover{background:#fff}

/* ---------- Instagram ızgara ---------- */
#son-paylasimlar + .row img{aspect-ratio:1/1; object-fit:cover}

/* ---------- İletişim kartları ---------- */
#iletisim .ratio{border-radius:18px}
#iletisim .small, .note{color:var(--muted)}

/* ---------- Floating CTA ---------- */
.floating-cta{position:fixed; right:16px; bottom:16px; z-index:1040}
.floating-cta .panel{background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.15); padding:8px 12px; display:flex; align-items:center; gap:10px}
.floating-cta .num{font-weight:800}

/* ---------- Footer ---------- */
.site-footer{background:#0f172a; color:#e2e8f0}
.site-footer a{color:#e2e8f0; text-decoration:none; opacity:.9}
.site-footer a:hover{opacity:1; color:#fff}
.footer-title{font-weight:800; font-size:1rem; margin-bottom:.75rem}
.footer-list{list-style:none; padding:0; margin:0}
.footer-list li{margin:.35rem 0}
.footer-cta .btn{border-radius:999px; font-weight:800}
.footer-cta .btn-cta{background:#25d366; border-color:#25d366; color:#0b301d}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); color:#cbd5e1}

/* ---------- Erişilebilir odak ---------- */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}


/* ===== HERO kategoriler ===== */
.hero-cats{overflow:hidden}
.hero-cat{display:inline-block; background:var(--soft); border:1px solid #d6f3e4;
  color:var(--brand); padding:.4rem .9rem; border-radius:999px; font-weight:600; white-space:nowrap}
.hero-cat:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.hero-cat-grid {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.hero-cat-slider{overflow-x:auto; -webkit-overflow-scrolling:touch}
.hero-cat-slider .cat-track{display:flex; gap:.5rem; padding-bottom:.3rem; min-width:max-content}
.hero-cat-slider::-webkit-scrollbar{display:none}



/* HERO grid (masaüstü 2 sütun) */
.hero-grid{display:grid; grid-template-columns:1.6fr .9fr; gap:16px}
@media(max-width:991.98px){
  .hero-grid{grid-template-columns:1fr}
}
/* Kategori Carousel görünümü */
.category-carousel{ background:#fff }
.cc-img{ height:480px; object-fit:cover }
@media (max-width:991.98px){ .cc-img{ height:360px } }
@media (max-width:575.98px){ .cc-img{ height:240px } }

.category-carousel .carousel-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}
.cc-caption{ text-shadow:0 4px 18px rgba(0,0,0,.45) }

.cc-indicators{ position:static; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.cc-indicators [data-bs-target]{
  width:auto; height:auto; border:1px solid #d6f3e4; background:var(--soft);
  border-radius:999px; padding:.4rem .8rem; margin:0; opacity:1;
}
.cc-indicators [data-bs-target] span{ color:var(--brand); font-weight:700; font-size:.95rem; line-height:1 }
.cc-indicators .active{ background:var(--brand); border-color:var(--brand) }
.cc-indicators .active span{ color:#fff }


.cat-box img {
  height: 160px; /* daha ufak */
  object-fit: cover;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.cat-box:hover {
  transform: translateY(-4px);
  transition: .3s;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}


.hero-cat{
  display:inline-block;
  background:var(--soft);
  border:1px solid #d6f3e4;
  color:var(--brand);
  padding:.4rem .9rem;
  border-radius:999px;
  font-weight:600;
  white-space:nowrap;
}
.hero-cat:hover{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.hero-cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.5rem;
}

/* Mobil kaydırma */
.hero-cat-slider{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.hero-cat-slider::-webkit-scrollbar{ display:none }
.hero-cat-slider .cat-track{
  display:flex;
  gap:.5rem;
  padding:0 .5rem .3rem;
  min-width:max-content;
}

/* Mobil butonlar */
.cat-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid #ddd;
  border-radius:50%;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  box-shadow:0 2px 5px rgba(0,0,0,.15);
}
.cat-btn.prev{ left:-5px; }
.cat-btn.next{ right:-5px; }

/* Offcanvas menü: ikonlu, biraz daha kalın */
.menu-list .nav-link{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; color:#334155; border-radius:10px;
}
.menu-list .nav-link i{ font-size:1.1rem; color:var(--brand); }
.menu-list .nav-link:hover{ background:rgba(26,161,96,.08); color:var(--brand); }

/* Alttaki iletişim bloğu */
.menu-contact{ font-weight:700; color:#0f172a; }
.menu-contact .mc-line{
  display:flex; align-items:center; gap:.6rem; margin:.35rem 0;
}
.menu-contact .mc-line i{ color:var(--brand); font-size:1.05rem; }
.menu-contact a{ text-decoration:none; }

.cc-img {
  border-radius: 20px;   /* oval yanlar */
  object-fit: cover;
}

.slider-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.cc-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15%;
  z-index: 2;
  pointer-events: none; /* yazılar tıklamayı engellemesin */
}

.cc-caption .btn {
  pointer-events: auto; /* sadece buton aktif kalsın */
}
.img-wrapper {
  aspect-ratio: 3 / 4;   /* dikey oran (en:boy) → kare yerine daha uzun */
  overflow: hidden;
  border-radius: 10px;   /* köşeler yumuşak olsun dersen */
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* görseli ortalayarak kırp */
}

.feature-box {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}
.feature-box:hover {
  transform: translateY(-5px);
}

.product-card {
  overflow: hidden;
}

.product-card .whatsapp-btn {
  border-radius: 50%;
  padding: 6px 9px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.product-card .whatsapp-btn:hover {
  transform: scale(1.1);
}

.section-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  background: #f8f9fa;
  border-radius: 30px;
  padding: 0.4rem 1rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  color: #444;
}

.floating-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;   /* sağ alt köşe */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1100;
}

.floating-cta .cta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.floating-cta .btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}

.floating-cta .call-btn {
  background: #007bff;
}

.floating-cta .whatsapp-btn {
  background: #25d366;
}

.floating-cta .num {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}