/* RESET & BASE */
* {
    box-sizing: border-box;
     font-family:'Jost', system-ui, sans-serif;
}

body {
    margin: 0;
    background: #f6f8fa;
    color: #1f2937;
   
}

.container {
    max-width: 1300px;
    margin: auto;
    padding: 30px;
}

/* SECTION TITLE */
.section-title {
    font-size: 28px;
    color: #5F9A56;
    margin-bottom: 25px;
    text-align: center;
}

.hero-grid {
    max-width:1300px;
    display:flex;
    flex-direction: column;
    gap:15px;
    justify-content: center;
   
}
.hero-images {
    object-fit: contain;
    width:100%;
    border-radius:25px;
    height:100%;
   
}
.firstLine {
    display:flex;
    flex-direction: row;
    
    justify-content: space-between;
    aspect-ratio: 15/4;
    
}
.hero-wide {
    width:48%;
    height:100%;
    

  
}
.hero-small {
    width:26%;
    height:100;
  
}
.secondLine {
    display:flex;
    flex-direction: row;
    gap:20px;
    justify-content: space-around;
    aspect-ratio: 15/4;
  
}
/* SLIDER WRAPPER */
.slider-wrapper {
    position: relative;
    margin-top: 10px;
}

.slider-viewport {
    overflow: hidden;
    width: 100%;
}

/* TRACK */
.products-track {
    display: flex;
    align-items: stretch;
    transition: transform 0.4s ease;
}

/* SLIDE */
.product-slide {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 12px;
}

/* CARD */
.product-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);

    display: flex;
    flex-direction: column;
    align-items: center;        /* 👈 YAZILAR ORTALANSIN */
    text-align: center;
    height: 100%;
}

.product-card img {
    width: 100%;
    height: 180px;             /* 👈 SABİT */
    object-fit: cover   ;
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* PRICE */
.price del {
    color: #9ca3af;
    font-size: 14px;
}

.price strong {
    display: block;
    color: #16a34a;
    font-size: 18px;
    margin-bottom:15px;
}

/* BUTTONS */
.add-cart {
    margin-top: 12px;
    background: #22c55e;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
   
}
a.add-cart {
     text-decoration: none;
   
}
.no-price {
    margin: 10px 0 14px;
    font-size: 14px;
    color: #6b7280;
}

.contact-btn {
    display: inline-block;
    background: #009fe3;
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
}

/* SLIDER ARROWS */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #e5e7eb;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    z-index: 5;
}

.slider-btn:hover {
    background: #f3f4f6;
}

.slider-btn.prev { left: -20px; }
.slider-btn.next { right: -20px; }

/* THREE SECTION BOTTOM HOME PAGE */ 
/* MODERN THREE COLUMN */
.modern-three {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 28px;
    margin-top: 80px;
}

.promo-card {
    background-image: url('/assets/images/banner/squareTwo.png');
             background-size:cover;
            background-repeat:no-repeat;
            border-radius:25px;
            
            box-shadow: rgba(40, 55, 185, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
/* CARD HOVER */
.product-card,
.promo-featured,
.mini-product {
    transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover,
.promo-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
.add-cart,
.mini-cart {
    transition: background .2s ease, transform .2s ease;
}

.add-cart:hover,
.mini-cart:hover {
    transform: scale(1.04);
}

/* Mini list hover */
.mini-product:hover {
    transform: translateY(-2px);
    background: #f8fafc;
    border-radius: 10px;
}

/* MINI LIST */
.modern-list {
    background: #fff;
    border-radius: 22px;
    padding: 22px;
}

.modern-list h3 {
    margin-bottom: 16px;
    font-size: 20px;
}

/* MINI PRODUCT ROW */
.mini-product {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
}

.mini-product:last-child {
    border-bottom: none;
}
.mini-thumb {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display:flex;
    align-items: center;
}


.discount-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #4bb920, #144e2c);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(220,38,38,.35);
}
.mini-product img {
    width:70px;
    height: auto;
    object-fit: cover;
}

.mini-info span {
    display: block;
    font-size: 13px;
}
.mini-price del {
    font-size:13px;
}
.mini-info strong {
    font-size: 14px;
    color: #16a34a;
}

/* MINI BUTTON */
.mini-cart {
    background: #22c55e;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}
/* */ 
.product-card h3 {
    font-size: 17px;
    margin: 6px 0;
    min-height: 38px; /* satır hizası için */
}

.price {
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:15px;
    margin-top:5px;

}
.price del {
    position: absolute;
    bottom:18%;
}
.priceSlider {
    display:flex;
    align-items: center;
    justify-content: center;
}
.priceSlider del {
    position: absolute;
    bottom:18%;
}

.priceSlider del {
    color: #9ca3af;
    font-size: 14px;
    
}

.priceSlider strong {
    display: block;
    color: #16a34a;
    font-size: 17px;
   
  
}
.priceSlider a {
    margin-top:10px;
}
.add-cart,
.contact-btn {
    margin-top: auto;   /* 👈 buton en alta itilir */
}

/* SHOP PAGE CSS */
/* SHOP LAYOUT */
/* SHOP LAYOUT */
.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    margin-top: 40px;
}

/* SIDEBAR */
.shop-sidebar {
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.05);
    height: fit-content;
}

.filter-title {
    font-size: 19px;
    font-weight: 600;
    color: #0485BB;
    margin: 0 0 12px;
}

.shop-sidebar label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
    cursor: pointer;
}

/* CONTENT */
.shop-content {
    width: 100%;
}

.shop-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #16a34a;
    text-align: center;
}

/* GRID */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* PRODUCT CARD */
.shop-grid .product-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.shop-grid .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
}

.shop-grid .product-card img {
    width: 100%;
    height: 190px;
    object-fit: contain;
    margin-bottom: 14px;
}

.shop-grid h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 10px 0;
    margin-bottom:0;
}

/* PRICE */
.shop-grid .price strong {
    color: #16a34a;
    font-size: 18px;
    margin-bottom:30px;
    margin-top:10px;
}

/* CONTACT BUTTON */
.contact-btn {
    display: inline-block;
    margin-top: 10px;
    background: #009fe3;
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    text-decoration: none;
}

/* LOAD MORE */
.load-more {
    margin: 40px auto 0;
    display: block;
    background: linear-gradient(135deg,#16a34a,#22c55e);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
}
/* FILTER ANIMATIONS */
.product-card {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.product-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.product-card.fade-out {
    opacity: 0;
    transform: translateY(8px);
}
.shop-sidebar {
    position: sticky;
    top:2%;
    align-self: start;
}
#almanKalitesi {
    height:30px;
}
/* SHOP META */
.shop-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

/* FILTER CHIP */
.filter-chip {
    background: #e0f2fe;
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-chip::after {
    content: "✕";
    font-size: 12px;
    opacity: 0.7;
}

.filter-chip:hover {
    background: #bae6fd;
}

.filter-chip.hidden {
    display: none;
}

/* RESULT COUNT */
.result-count {
    font-size: 14px;
    color: #6b7280;
}
/* FILTER GROUP */
.filter-group {
    margin-bottom: 26px;
}

.filter-group h4 {
    font-size: 17px;
    font-weight: 600;
    color: #0485BB;
    margin-bottom: 14px;
}

/* FILTER OPTION */
.filter-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.filter-option:hover {
    background: #f1f5f9;
}

/* HIDE DEFAULT CHECKBOX */
.filter-option input {
    display: none;
}

/* CUSTOM RADIO */
.custom-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* INNER DOT */
.custom-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #22c55e;
    transform: scale(0);
    transition: transform 0.18s ease;
}

/* CHECKED STATE */
.filter-option input:checked + .custom-radio {
    border-color: #22c55e;
}

.filter-option input:checked + .custom-radio::after {
    transform: scale(1);
}

/* TEXT */
.filter-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.3;
}

/* ACTIVE TEXT */
.filter-option input:checked ~ .filter-text {
    color: #16a34a;
    font-weight: 500;
}
/* ===========================
   SHOP RESPONSIVE
=========================== */

/* Tablet */
@media (max-width: 1100px) {
  .shop-layout {
    grid-template-columns: 240px 1fr;
    gap: 20px;
    padding:25px;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .shop-sidebar {
    padding: 18px;
  }

  .shop-title {
    font-size: 24px;
  }
}

/* Mobile layout */
@media (max-width: 900px) {

  /* Stack sidebar + content */
  .shop-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }
    
  /* Sidebar not sticky on mobile */
  .shop-sidebar {
    position: relative;
    top: auto;
    border-radius: 18px;
  }

  /* Product cards */
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .shop-grid .product-card {
    padding: 14px;
    border-radius: 16px;
  }

  .shop-grid .product-card img {
    height: 140px;
    margin-bottom: 10px;
  }

  .shop-grid h3 {
    font-size: 14px;
    line-height: 1.25;
    min-height: 36px;
  }

  .shop-grid .price strong {
    font-size: 15px;
    margin: 8px 0 10px;
  }

  .add-cart,
  .contact-btn {
    width: 100%;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 800;
  }

  /* shop meta wraps */
  .shop-meta {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .result-count {
    width: 100%;
    text-align: center;
  }
  
}

/* Very small phones -> 1 column */
@media (max-width: 520px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }

  .shop-grid .product-card img {
    height: 180px;
  }

  .shop-title {
    font-size: 22px;
    margin-bottom: 14px;
  }
}

/* ===========================
   MOBILE FILTER DRAWER (<=900px)
=========================== */
@media (max-width: 900px) {

  /* make sure layout stacks */
  .shop-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }

  /* Filter toggle button */
  .shop-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    cursor: pointer;

    font-weight: 900;
    font-size: 18px;
    color: #009fe3;

    box-shadow: 0 12px 30px rgba(0,0,0,.07);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .shop-filter-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(0,0,0,.10);
  }

  .shop-filter-toggle .badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    background: rgba(34,197,94,.12);
    color: #16a34a;
  }

  /* Backdrop */
  .shop-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 9998;
  }

  /* Sidebar becomes off-canvas drawer */
  .shop-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;

    width: min(92vw, 340px);
    border-radius: 0 22px 22px 0;
    padding: 18px;
    overflow-y: auto;

    z-index: 9999;

    transform: translateX(-105%);
    transition: transform .32s cubic-bezier(.2,.9,.2,1);
    box-shadow: 0 22px 60px rgba(0,0,0,.30);
  }

  /* Drawer head */
  .shop-filter-head {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 8px 0 12px;
    z-index: 2;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 10px;
  }

  .shop-filter-head strong {
    font-size: 18px;
    font-weight: 1000;
    color: #009fe3;
  }

  .shop-filter-close {
    margin-left: auto;
    border: 0;
    background: rgba(0,0,0,.06);
    width: 42px;
    height: 42px;
    border-radius: 14px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .15s ease, background .15s ease;
  }

  .shop-filter-close:hover {
    transform: scale(1.03);
    background: rgba(0,0,0,.10);
  }

  .shop-filter-close svg {
    width: 20px;
    height: 20px;
    fill: #111827;
  }

  /* Open state */
  .filters-open .shop-filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .filters-open .shop-sidebar {
    transform: translateX(0);
  }

  /* while drawer open */
  body.filters-lock {
    overflow: hidden;
    touch-action: none;
  }

  /* slightly adjust options spacing */
  .filter-option {
    padding: 10px 8px;
  }

  /* products grid mobile */
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .shop-grid .product-card {
    padding: 14px;
    border-radius: 16px;
  }

  .shop-grid .product-card img {
    height: 140px;
    margin-bottom: 10px;
  }

  .shop-grid h3 {
    font-size: 14px;
    line-height: 1.25;
    min-height: 36px;
  }

  .shop-grid .price strong {
    font-size: 15px;
    margin: 8px 0 10px;
  }

  .add-cart,
  .contact-btn {
    width: 100%;
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 900;
  }
}

/* Smaller phones -> 1 column grid */
@media (max-width: 520px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
  .shop-grid .product-card img {
    height: 180px;
  }
}
@media (max-width: 900px) {

  /* Drawer: make sure it can scroll */
  .shop-sidebar{
    height: 100vh;                     /* ✅ key */
    max-height: 100vh;                 /* ✅ key */
    overflow-y: auto;                  /* ✅ key */
    -webkit-overflow-scrolling: touch; /* ✅ iOS smooth scroll */
    overscroll-behavior: contain;      /* ✅ prevents body scroll bounce */
    padding-bottom: 110px;             /* space so last item isn’t hidden */
  }

  /* Sticky header must be above scrolling content */
  .shop-filter-head{
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
  }
    .shop-filter-head{
    position: sticky;
    top: 0;
    z-index: 50;

    background: #fff;
    padding: 14px 0 12px;

    /* hides the scroll content that tries to appear above */
    overflow: hidden;

    /* clean visual separation */
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
  }

  /* Make sure content starts below sticky head */
  .shop-sidebar{
    padding-top: 0;               /* keep clean */
  }

  /* Add top spacing after header so first item doesn't touch it */
    .shop-filter-head{
    margin: -18px -18px 14px;   /* cancels sidebar padding (top left right) */
    padding: 16px 18px 14px;    /* internal padding */
    border-radius: 0;           /* cleaner */
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 60;

    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
    overflow: hidden;
  }
  .filter-group {
    padding-top:20px;
    margin-bottom:5px;
  }
  @media (max-width: 900px) {
  .shop-sidebar::-webkit-scrollbar { width: 6px; }
  .shop-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }
}
}


/* HEADER */ 
/* ===========================
   */
.site-header { 
  background:#fff; 
  display:flex;
  flex-direction: column;
  justify-content: center;
  
}

/* TOP BAR */
.top-bar{
  background:#45b939;
  color:#fff;
  font-size:13px;
}
.top-bar-inner{
  max-width:1300px;
  margin:auto;
  padding:6px 24px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.top-bar-inner span { font-weight:500; }


/* MAIN ROW */
.header-main{ background:#fff; }
.header-main-inner{
  max-width:1300px;
  margin:auto;
  padding:10px 24px 0;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
}

/* LEFT */
.header-left{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  position:relative;
}

/* SEARCH */
.search-box{
  display:flex;
  align-items:stretch;
  width:100%;
  max-width: 340px;
  position:relative;
}
.search-input-wrap{ position:relative; flex:1; }
.search-box input{
  width:100%;
  padding:12px 40px 12px 14px;
  border:1px solid #e5e7eb;
  border-right:0;
  border-radius:12px 0 0 12px;
  background:#f3f4f6;
  outline:none;
  font-size:14px;
}
.search-box input:focus{ background:#fff; }

.search-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:none;
  font-size:20px;
  color:#6b7280;
  cursor:pointer;
  display:none;
}
.search-clear:hover{ color:#111827; }

.search-btn{
  border:none;
  background:#45b939;
  color:#fff;
  padding:0 16px;
  border-radius:0 12px 12px 0;
  cursor:pointer;
}

/* Suggestions */
.search-suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border-radius:12px;
  margin-top:6px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  display:none;
  max-height:280px;
  overflow-y:auto;
  z-index:30;
}

/* CENTER LOGO WEDGE */
.header-center{ display:flex; justify-content:center; }
.logo-wedge{
  position:relative;
  width:375px;
  height:105px;
  margin-top:-51px;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.logo-wedge::before{
  content:"";
  position:absolute;
  inset:0;
  background:#edeeed;
  clip-path: polygon(50% 0%, 82% 0%, 100% 100%, 0% 100%, 18% 0%);
  border-radius:0 0 14px 14px;
  z-index:0;
}
.logo-link{ position:relative; z-index:1; display:inline-flex; }
.site-logo{ height:180px; }

/* RIGHT PHONE CTA */
.header-right{ display:flex; justify-content:flex-end; }
.phone-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#45b939;
  padding:10px 16px;
  border-radius:12px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.phone-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(21,250,59,.45);
}
.phone-icon{ color:#fff; display:inline-flex; }
.phone-text{ color:#fff; }

/* NAV ROW */
.nav-row{
  border-bottom:1px solid #e5e7eb;
  background:#fff;
  
}
.nav-row-inner{
  max-width:1300px;
  padding:15px;
  margin:auto;
  display:flex;
  align-items: center;
  justify-content: space-around;
}
#firstDiv {width:25%;}
.main-nav{
  display:flex;
  gap:15px;
  width:50%;
  align-items: center;
}
.main-nav a{
  padding:8px 18px;
  border-radius:999px;
  color:#111827;
  font-weight:600;
  text-decoration:none;
  transition: background .15s ease, transform .15s ease;
  font-size:18px;
  white-space:nowrap;
}
.main-nav a:hover{ background:#f3f4f6; transform: translateY(-1px); }
.main-nav a.active{ background: rgba(34,197,94,.14); color:#16a34a; }

/* CART */
.cart-icon{
  width:25%;
  display:flex;
  justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
}

/* divider */
.header-divider{
  height:10px;
  background: linear-gradient(90deg, #1e40af, #22c55e);
  opacity:.9;
}

/* ===========================
   MOBILE / TABLET (<=900px)
=========================== */
@media (max-width: 900px){

  .top-bar-inner{
    padding:6px 16px;
    justify-content: space-between;
  }
  #almanKalitesi{
    height:25px;
    width:85px;
  }

  /* main header becomes stacked */
  .header-main-inner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo cart"
      "search search"
      "phone phone";
    gap:12px;
    padding:12px 16px 0;
  }

  .header-center{ grid-area: logo; justify-content:center; }
  .header-left{ grid-area: search; }
  .header-right{ grid-area: phone; justify-content:stretch; }
  .nav-row-inner .cart-icon{ grid-area: cart; }

  /* logo wedge: stop negative overlap on mobile */
  .logo-wedge{
    width: 220px;
    height: 70px;
    margin-top: 0;
  }
  .logo-wedge:before {
    background:transparent;
  }
  .site-logo{
    height: 120px;
  }

  /* search full width */
  .search-box{
    max-width: 100%;
  }

  /* phone full width */
  .phone-cta{
    width:100%;
    justify-content:center;
  }

  /* nav becomes scrollable pills */
  .nav-row-inner{
    padding:10px 12px;
    gap:12px;
    justify-content:space-between;
  }
  #firstDiv{
    display:none;
  }
  .main-nav{
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav::-webkit-scrollbar{ height:4px; }
  .main-nav::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px; }

  .main-nav a{
    font-size:16px;
    padding:8px 14px;
  }

  /* cart button on the right of header row */
  .cart-icon{
    width:auto;
  }
}

/* ===========================
   VERY SMALL (<=420px)
=========================== */
@media (max-width: 420px){
  .logo-wedge{
    width: 190px;
    height: 62px;
  }
  .site-logo{ height:110px; }
}


input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    border:none;
}





/* HEADER END */ 


.product-single {
  margin-top: 30px;
}

.breadcrumb {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 20px;
}
.breadcrumb a {
  color: #2563eb;
  text-decoration: none;
}

.product-single-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
}

.product-image {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.product-image img {
  width: 100%;
  height: 380px;
  object-fit: contain;
}

.product-title {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 15px;
}

.product-price {
  margin: 20px 0;
}
.product-price del {
  color: #9ca3af;
  font-size: 18px;
}
.product-price strong {
  display: block;
  font-size: 30px;
  color: #16a34a;
}

.big-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 16px;
  margin-top: 15px;
}

.product-features {
  margin-top: 25px;
  list-style: none;
  padding: 0;
}
.product-features li {
  margin-bottom: 8px;
  color: #374151;
}

.product-description {
  margin-top: 70px;
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
}
.product-description h2 {
  margin-bottom: 20px;
  color:#009fe3;
}
.desc-content {
  line-height: 1.7;
  color: #374151;
}
.product-link {
    color:rgb(36, 34, 34);
    font-size: 18px;
    text-decoration:none;
}
@media (max-width: 900px) {
  .product-single-grid {
    grid-template-columns: 1fr;
  }
}   
.cart-icon{
  position: relative;
  background:#fff;
  border:1px solid #e5e7eb;
  width:44px;height:44px;
  border-radius:999px;
  cursor:pointer;
  display:grid;place-items:center;
}
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:#16a34a;
  color:#fff;
  font-size:12px;
  width:22px;height:22px;
  border-radius:999px;
  display:grid;place-items:center;
  font-weight:800;
}

/* Drawer */
.mini-cart-drawer{
  position: fixed;
  top:0; right:0;
  width: 380px;
  max-width: 92vw;
  height: 100vh;
  background:#fff;
  box-shadow: -30px 0 80px rgba(0,0,0,.18);
  transform: translateX(110%);
  transition: transform .25s ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
  border-left:1px solid #e5e7eb;
}
.mini-cart-drawer.open{ transform: translateX(0); }

.mini-cart-backdrop{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.30);
  opacity: 0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index:9998;
}
.mini-cart-drawer.open ~ .mini-cart-backdrop{
  opacity:1;
  pointer-events:auto;
}

.mini-cart-head{
  padding:18px 18px;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mini-cart-close{
  width:40px;height:40px;border-radius:999px;
  border:1px solid #e5e7eb;background:#fff;
  cursor:pointer;font-size:22px;line-height:1;
}
.mini-cart-items{
  padding: 14px 16px;
  overflow:auto;
  flex:1;
}
.cart-empty{ padding: 20px; color:#6b7280; }

.cart-row{
  display:grid;
  grid-template-columns: 56px 1fr 34px;
  gap:12px;
  padding:12px 10px;
  border:1px solid #eef2f7;
  border-radius:16px;
  margin-bottom:12px;
}
.cart-thumb img{
  width:56px;height:56px;object-fit:contain;
}
.cart-name{ font-weight:800; font-size:14px; line-height:1.2; }
.cart-sub{ font-size:12px; color:#6b7280; margin-top:3px; }
.cart-remove{
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:22px;
  color:#6b7280;
}

.cart-qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.qty-btn{
  width:30px;height:30px;border-radius:10px;
  border:1px solid #e5e7eb;background:#fff;
  cursor:pointer;
}
.cart-qty input{
  width:56px;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  outline:none;
  text-align:center;
}

.mini-cart-foot{
  border-top:1px solid #e5e7eb;
  padding:16px;
}
.mini-cart-total{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
  color:#111827;
}
.cart-checkout{
  width:100%;
  padding:14px 16px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  background: linear-gradient(90deg,#0f2a63,#16a34a);
  color:#fff;
  font-weight:900;
}
.cart-sub{
  font-size:12px;
  color:#6b7280;
  margin-top:3px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.cart-row-total{
  font-weight:900;
  color:#1e40af;
}


/* ICONS */
.icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  color: #111827;
}


.mini-cart-close .icon{
  width: 22px;
  height: 22px;
  color: #111827;
}
.cart-remove .icon{
  width: 18px;
  height: 18px;
  color: #6b7280;
}
.cart-remove:hover .icon{
  color: #ef4444;
}


.product-title-link {
    text-decoration: none;
    color:inherit;
}
.product-link img {
  transition: transform .25s ease;
}

.product-link:hover img {
  transform: scale(1.03);
}

.product-title-link h3:hover,
.mini-title-link:hover .mini-title {
  color: #1344af;
}

/* =========================
   ABOUT PAGE
========================= */

.about-hero{
  padding: 26px 0 10px;
}
.about-hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items:center;
}
.about-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  background: rgba(20,63,153,.08);
  color:#0f2a63;
  border:1px solid rgba(20,63,153,.15);
}
.about-title{
  
  font-size:44px;
  line-height:1.08;
  letter-spacing:-.8px;
  font-weight:900;
  color:#0b1220;
}
.about-title .grad{
  background: linear-gradient(90deg, #143f99, #22c55e);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

}
.about-lead{
  margin:0;
  color:#475569;
  font-size:16px;
  line-height:1.7;
  max-width: 60ch;
}
.about-cta-row{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.about-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  padding:11px 16px;
  font-weight:800;
  text-decoration:none;
  transition: .25s ease;
}
.about-cta.primary{
  background: linear-gradient(90deg, #143f99, #0ea5a4);
  color:#fff;
  box-shadow: 0 14px 35px rgba(20,63,153,.25);
}
.about-cta.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(20,63,153,.32);
}
.about-cta.secondary{
  background:#fff;
  color:#0b1220;
  border:1px solid rgba(0,0,0,.08);
}
.about-cta.secondary svg{
  width:18px;height:18px;
}
.about-cta.secondary:hover{
  transform: translateY(-2px);
  border-color: rgba(20,63,153,.25);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.about-image-card{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  background: #0b1220;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
}
.about-image-card img{
  width:100%;
  height: 360px;
  object-fit: cover;
  display:block;
  
}

.about-grid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  transition: .26s ease;
}
.about-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,.09);
}
.about-icon{
  width:44px;height:44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#143f99;
  background: rgba(20,63,153,.08);
  border:1px solid rgba(20,63,153,.14);
  margin-bottom: 10px;
}
.about-icon svg{
  width:22px;height:22px;
}
.about-card h3{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  color:#0b1220;
}
.about-card p{
  margin:0;
  color:#64748b;
  line-height:1.65;
  font-size:14px;
}

.about-story{
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(20,63,153,.06), rgba(34,197,94,.06));
  border:1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 22px;
}
.about-story-inner h2{
  margin:0 0 10px;
  font-size:22px;
  font-weight:1000;
  color:#0b1220;
}
.about-story-inner p{
  margin:0 0 10px;
  color:#475569;
  line-height:2.2;

}

/* reveal animation (no JS needed) */
.reveal{
  animation: revealUp .55s ease both;
}
@keyframes revealUp{
  from{opacity:0; transform: translateY(14px);}
  to{opacity:1; transform: translateY(0);}
}

/* responsive */
@media (max-width: 980px){
  .about-hero-inner{
    grid-template-columns: 1fr;
  }
  .about-title{font-size: 36px;}
  .about-grid{grid-template-columns: 1fr;}
  .about-image-card img{height: 320px;}
}


/* Contact CSS */
.contact-page{
  padding: 48px 0;
}

.contact-grid{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.contact-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 26px;
  padding: 34px 34px;
  box-shadow: 0 18px 42px rgba(0,0,0,.08);
}

.contact-title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: #0974b8; 
}

.contact-underline{
  width: 88px;
  height: 4px;
  border-radius: 999px;
  margin-top: 12px;
  background: linear-gradient(90deg, #18c267, #0974b8);
}

.contact-map{
  margin-top: 25px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
.contact-map iframe{
  width: 100%;
  height: 340px;
  border: 0;
  display: block;
}

.contact-lines{
  margin-top: 18px;
  display: grid;

}

.contact-line{
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 35px;
  color: #111827;
  font-size: 16px;
  line-height: 1.45;
  padding:10px;
}

.ci{
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(9,116,184,.08);
  border: 1px solid rgba(9,116,184,.15);
}
.ci svg{
  width: 30px;
  height: 30px;
  fill: #45b939;
}

.contact-link{
  color: #111827;
  text-decoration: none;
  font-weight: 600;
}
.contact-link:hover{
  color: #0974b8;
  text-decoration: underline;
}

/* FORM */
.contact-form{
  margin-top: 25px;
  display: grid;
  gap: 16px;
}

.field span{
  display: block;
  font-size: 14px;
  color: #111827;
  margin-bottom: 8px;
  font-weight: 600;
}

.field input,
.field textarea{
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,.18);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;

  /* remove ugly focus border effect */
  box-shadow: none;
  appearance: none;
}

.field input:focus,
.field textarea:focus{
  border-color: #18c267;
  box-shadow: 0 0 0 4px rgba(24,194,103,.18);
}

.contact-submit{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width:100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;

  color: #fff;
  font-weight: 800;
  background: #0974b8;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(9,116,184,.25);
  background: #0a83cf;
}

.btn-icon{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}
.btn-icon svg{
  width: 18px;
  height: 18px;
  fill: #fff;
}

.contact-note{
  margin-top: 8px;
  font-size: 13px;
  color: #6b7280;
}
/* ===========================
   CONTACT PAGE RESPONSIVE
=========================== */

/* Tablet */
@media (max-width: 1024px) {
  .contact-grid{
    width: min(1180px, calc(100% - 32px));
    gap: 18px;
  }

  .contact-card{
    padding: 26px;
    border-radius: 22px;
  }

  .contact-title{
    font-size: 28px;
  }

  .contact-map iframe{
    height: 300px;
  }

  .contact-line{
    gap: 18px; /* was 35px */
  }

  .ci{
    width: 46px;
    height: 46px;
  }
  .ci svg{
    width: 26px;
    height: 26px;
  }
}

/* Mobile: stack */
@media (max-width: 768px) {
  .contact-page{
    padding: 24px 0;
  }

  .contact-grid{
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
    gap: 16px;
  }

  .contact-card{
    padding: 20px;
    border-radius: 20px;
  }

  .contact-title{
    font-size: 24px;
    line-height: 1.1;
  }

  .contact-underline{
    width: 72px;
    margin-top: 10px;
  }

  .contact-map{
    margin-top: 18px;
    border-radius: 16px;
  }

  .contact-map iframe{
    height: 240px;
  }

  .contact-lines{
    margin-top: 14px;
    gap: 10px;
  }

  /* make rows feel “compact card-like” */
  .contact-line{
    grid-template-columns: 52px 1fr;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,.06);
    align-items: start;
    font-size: 15px;
  }

  .ci{
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .ci svg{
    width: 24px;
    height: 24px;
  }

  .contact-link{
    word-break: break-word;
  }

  /* FORM */
  .contact-form{
    margin-top: 18px;
    gap: 14px;
  }

  .field span{
    font-size: 13px;
    margin-bottom: 6px;
  }

  .field input,
  .field textarea{
    font-size: 14px;
    padding: 12px;
    border-radius: 12px;
  }

  .contact-submit{
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .contact-card{
    padding: 16px;
  }

  .contact-title{
    font-size: 22px;
  }

  .contact-map iframe{
    height: 210px;
  }

  .contact-line{
    grid-template-columns: 46px 1fr;
    padding: 10px;
    font-size: 14px;
  }

  .ci{
    width: 40px;
    height: 40px;
  }
}

/* Homepage responsive */ 

/* Prevent page overflow because of slider arrows */
body {
  overflow-x: hidden;
}

/* Images behave safely */
.hero-images,
.product-card img,
.mini-product img {
  display: block;
  max-width: 100%;
}

/* ---------- HERO GRID RESPONSIVE ---------- */

/* Tablet: keep layout but reduce gaps */
@media (max-width: 1024px) {
  .container {
    padding: 22px;
  }

  .firstLine,
  .secondLine {
    gap: 14px;
  }

  .hero-wide {
    width: 49%;
  }

  .hero-small {
    width: 25%;
  }
}

/* Mobile: stack everything */
@media (max-width: 768px) {
  .container {
    padding: 18px;
  }

  .hero-grid {
    gap: 12px;
  }

  .firstLine,
  .secondLine {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .hero-wide,
  .hero-small {
    width: 100%;
  }

  .hero-images {
    border-radius: 16px;
    object-fit: cover;
  }
}

/* ---------- PRODUCTS SLIDER RESPONSIVE ---------- */

/* Desktop stays 4 */
.product-slide {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Medium: 3 cards */
@media (max-width: 1100px) {
  .product-slide {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .slider-btn.prev { left: -10px; }
  .slider-btn.next { right: -10px; }
}

/* Tablet: 2 cards */
@media (max-width: 850px) {
  .product-slide {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .slider-wrapper {
    margin-top: 6px;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  .slider-btn.prev { left: 6px; }
  .slider-btn.next { right: 6px; }
}

/* Phone: 1 card */
@media (max-width: 520px) {
  .section-title {
    font-size: 22px;
    margin-bottom: 16px;
    margin-top:50px;
  }

  .product-slide {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 10px 50px 50px 50px;
  }

  .product-card {
    padding: 16px;
    border-radius: 16px;
  }

  .product-card img {
    height: 165px;
  }

  /* keep arrows inside, not outside screen */
  .slider-btn.prev { left: 8px; }
  .slider-btn.next { right: 8px; }
}

/* ---------- BOTTOM 3 COLUMN SECTION RESPONSIVE ---------- */

/* Desktop stays same */
.modern-three {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  margin-top: 80px;
}

/* Tablet: 2 columns (promo full width on top) */
@media (max-width: 1024px) {
  .modern-three {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 25px;
  }

  .promo-card {
    grid-column: 1 / -1;
    min-height: 400px;
    border-radius: 22px;
  }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .modern-three {
    grid-template-columns: 1fr;
    padding:25px;
  }

  .promo-card {
    min-height: 350px;
  }

  .modern-list {
    padding: 18px;
    border-radius: 18px;
  }
}

/* Very small: mini product becomes 2 rows */
@media (max-width: 420px) {
  .mini-product {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "thumb info"
      "btn btn";
    gap: 10px;
    padding: 12px 0;
  }

  .mini-thumb {
    grid-area: thumb;
    width: 60px;
    height: 60px;
  }

  .mini-info {
    grid-area: info;
  }

  .mini-cart {
    grid-area: btn;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .mini-product img {
    width: 60px;
  }
}
/* =========================
   HERO GRID -> WIDE SLIDER (<=900px)
========================= */
@media (max-width: 900px) {

  /* hide full grid layout on mobile */
  .hero-grid .firstLine,
  .hero-grid .secondLine {
    display: none !important;
  }

  .hero-grid.hero-slider {
    width: 100%;
    position: relative;
  }

  .hero-slider-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
  }

  .hero-slider-track {
    display: flex;
    transition: transform 0.45s ease;
    will-change: transform;
  }

  .hero-slide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hero-slide img {
    width: 100%;
    display: block;
    border-radius: 18px;
    object-fit: cover;
  }

  /* dots */
  .hero-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
  }

  .hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 99px;
    border: 0;
    cursor: pointer;
    background: rgba(0,0,0,.18);
  }

  .hero-dot.active {
    background: rgba(0,0,0,.55);
    width: 18px;
  }
  .modern-list h3 {
    text-align: center;
    font-size:23px;
    padding-bottom:10px;
    color:#5F9A56;
  }
}
/* ===========================
   MOBILE REDESIGN: mini-product rows
   (Popüler / İndirim)
=========================== */
@media (max-width: 768px) {

  .modern-list {
    padding: 5px 18px 18px 18px;
    border-radius: 22px;
  }

  .mini-product {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #eef2f7;
    text-align: center;
  }

  /* First line: image + text in a centered block */
  .mini-product > .mini-thumb,
  .mini-product > .mini-info {
    margin: 0 auto;
  }

  /* Bigger image */
  .mini-thumb {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    background: #f3f4f6;
    overflow: hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position: relative;
  }

  .mini-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  
  }

  /* Center title + price */
  .mini-info {
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .mini-title {
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    color: #111827;

    /* clamp 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mini-price {
    display:flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .mini-price del {
    font-size: 12px;
    color: #9ca3af;
  }

  .mini-price strong {
    font-size: 16px;
    font-weight: 900;
    color: #16a34a;
  }

  /* Slimmer, cleaner button */
  .mini-cart {
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 900;
    margin-top: 4px;
  }

  /* Discount badge stays on top of image */
  .discount-badge {
    top: -8px;
    right: -8px;
    font-size: 10px;
    padding: 6px;
  }
}
/* ===========================
   FOOTER (CTA + FLOAT CARD)
=========================== */

.site-footer{
  background: #f6f8fa;         /* matches your body */
  padding: 70px 0 30px;
}

.footer-float{
  width: min(1500px, calc(100% - 48px));
  margin: 0 auto;

  background: #ffffff;
  border-radius: 30px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 22px 60px rgba(0,0,0,.10);
  overflow: hidden;
}

/* CTA TOP STRIP */
.footer-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
  padding: 26px 28px;

  background: linear-gradient(90deg, rgba(9,116,184,.12), rgba(34,197,94,.12));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.footer-cta-left h3{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  letter-spacing: -.2px;
}

.footer-cta-left p{
  margin: 6px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.45;
  max-width: 560px;
}

.footer-cta-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.fbtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.fbtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.10);
}

.fbtn-icon{
  width: 18px;
  height: 18px;
  display:inline-flex;
}
.fbtn-icon svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.fbtn-whatsapp{
  background: #22c55e;
  color: #fff;
}
.fbtn-whatsapp:hover{
  background: #16a34a;
}

.fbtn-call{
  background: #0974b8;
  color: #fff;
}
.fbtn-call:hover{
  background: #0a83cf;
}

.fbtn-map{
  background: #111827;
  color: #fff;
}
.fbtn-map:hover{
  background: #0b1220;
}

/* BODY */
.footer-body{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 28px;
  padding: 26px 28px 18px;
}

.footer-col h4{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  color: #009fe3;
}

.footer-col a{
  display:block;
  text-decoration:none;
  color: #334155;
  font-weight: 600;
  font-size: 14px;
  padding: 7px 0;
  transition: color .15s ease, transform .15s ease;
}

.footer-col a:hover{
  color: #0974b8;
  transform: translateX(2px);
}

.footer-logo{
  height: 100px;
  width: auto;
  margin-bottom: 10px;
}

.footer-text{
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
  max-width: 360px;
}

/* BOTTOM */
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;

  padding: 14px 28px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  color: #64748b;
  font-size: 13px;
}

.footer-mini{
  color: #6b7280;
  font-weight: 600;
}

/* ===========================
   FOOTER RESPONSIVE
=========================== */
@media (max-width: 900px){
  .site-footer{
    padding: 55px 0 26px;
  }

  .footer-float{
    width: calc(100% - 28px);
    border-radius: 24px;
  }

  .footer-cta{
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }

  .footer-cta-actions{
    width:100%;
    justify-content:flex-start;
  }

  .fbtn{
    width: 100%;
    justify-content:center;
    padding: 12px 14px;
  }

  .footer-body{
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 18px;
  }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 20px 18px;
  }
}
.product-features{
display:flex;
flex-direction:column;
gap:12px;
margin-top:40px;
padding:0;
list-style:none;
}

.product-features li{
display:flex;
align-items:center;
gap:15px;
font-size:15px;
color:#333;
padding:15px;
background-color:white;
width:36%;
border-radius:10px;

}

.pf-icon{
width:24px;
height:24px;
stroke:#16a34a;
stroke-width:2;
fill:none;
flex-shrink:0;
}


/* Genel Responsive */

@media (max-width:720px) {
    
    .product-image img {
        height:250px;
    }
    .product-title {
        font-size:27px;
    }
    .product-price strong {
        font-size:25px;
    }
    .product-single-grid {
        gap:30px;
    }
       .product-features{
        gap:10px;
        margin-top:16px;
        flex-direction:row;
    }

    .product-features li{
        gap:9px;
        font-size:14px;
        flex-direction:column;
    }

    .pf-icon{
        width:18px;
        height:18px;
        min-width:18px;
    }
    .product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    
    .product-price {
        align-self:flex-start;
        padding-left:30px;
    }
    .product-description {
        margin-top:20px;
        padding:30px;
        padding-top:10px;
    }
    .desc-content h2 {
        font-size:20px;
    }
    .desc-content {
        font-size:15px;
    }
    .about-title {
        font-size:29px;
    }
    .about-hero-left, .about-hero-right, .about-grid {
        padding:15px !important;
    }
    .about-story {
        padding:35px;
        font-size:15px;
    }
    .about-image-card img {
        height:250px !important;
        object-fit:contain;
        
    }
    .modern-three {
        margin-top:0 !important;
    }
    .promo-card {
        margin-bottom:30px;
    }
    .mini-title { 
        font-size:16px !important;
    }
    .mini-price strong {
        font-size:15px !important;
    }
    .mini-thumb {
        overflow:visible;
    }
    .about-hero {
        padding:13px 0 10px;
    }
    .shop-layout {
        margin-top:13px;
    }
}