/* ============================================
   KISAKOLLU.COM — Hypeform-Inspired Design
   Bold typography, orange accent, modern grid,
   ticker bands, scroll reveals, FAQ accordion
   ============================================ */

/* -- Reset & Tokens ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:        #ffffff;
  --surface:   #f2f2f2;
  --text:      #2e3537;
  --text-2:    #6b6b6b;
  --accent:    #FD6036;
  --dark:      #090909;
  --white:     #ffffff;
  --placeholder: #d9d9d9;
  --border:    #c0c0c0;
  --muted:     #a1a1a1;
  --whatsapp:  #25d366;
  --radius:    24px;
  --radius-sm: 12px;
  --radius-pill: 100px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,.08);
  --font:      'Manrope', sans-serif;
  --font-d:    'Anton', sans-serif;
  --ease:      cubic-bezier(.22,1,.36,1);
  --nav-h:     80px;
  --page-pad:  40px;
}

::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-2)}

html{
  scroll-behavior:smooth;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.container{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--page-pad)}

/* -- Typography -------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:400;line-height:1.1;letter-spacing:-0.01em}
h1{font-size:clamp(3rem,10vw,13.75rem);letter-spacing:-0.02em}
h2{font-size:clamp(2.5rem,6vw,6.25rem);letter-spacing:-0.01em}
h3{font-size:clamp(1.5rem,3vw,2rem)}

.section-pad{padding:80px 0}

/* -- Buttons ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-d);font-weight:400;
  border:none;cursor:pointer;transition:all .3s var(--ease);
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);color:var(--text);
  padding:14px 32px;border-radius:var(--radius-pill);
  font-size:1.25rem;letter-spacing:-0.02em;
}
.btn-primary:hover{background:#e5502a;transform:translateY(-2px)}
.btn-outline{
  background:transparent;color:var(--text);
  padding:14px 32px;border-radius:var(--radius-pill);
  border:2px solid var(--text);font-size:1.25rem;
}
.btn-outline:hover{background:var(--text);color:var(--white)}
.btn-outline-light{
  background:transparent;color:var(--white);
  padding:14px 32px;border-radius:var(--radius-pill);
  border:2px solid var(--white);font-size:1.25rem;
}
.btn-outline-light:hover{background:var(--white);color:var(--text)}
.btn-whatsapp{
  background:var(--whatsapp);color:#fff;
  padding:14px 32px;border-radius:var(--radius-pill);
  font-size:1.25rem;
}
.btn-whatsapp:hover{background:#1da851;transform:translateY(-2px)}
.btn-sm{padding:10px 24px;font-size:1rem}
.btn-block{width:100%;justify-content:center}

.icon-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  transition:transform .3s var(--ease);
}
.icon-circle:hover{transform:scale(1.1)}
.icon-circle-accent{background:var(--accent)}
.icon-circle-dark{background:var(--dark)}
.icon-circle svg{width:24px;height:24px}

/* -- Navigation -------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--surface);
  transition:all .4s var(--ease);
  height:var(--nav-h);
}
.nav.scrolled{
  background:rgba(242,242,242,.95);
  backdrop-filter:blur(20px);
  box-shadow:0 2px 20px rgba(0,0,0,.08);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);
}
.nav-logo{
  font-family:var(--font-d);font-size:2rem;color:var(--text);
  letter-spacing:-0.02em;
}
.nav-logo em{font-style:normal;color:var(--accent)}
.nav-links{
  display:flex;align-items:center;gap:32px;list-style:none;
}
.nav-links a{
  font-family:var(--font-d);font-size:1.25rem;color:var(--text);
  letter-spacing:-0.02em;position:relative;
  transition:color .3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:2px;background:var(--accent);transform:scaleX(0);
  transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

/* Mega Menu */
.has-dropdown{position:relative}
.mega-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:32px;min-width:700px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:all .3s var(--ease);
}
.has-dropdown:hover .mega-menu{opacity:1;visibility:visible;pointer-events:all}
.mega-menu-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mega-col a{display:block;padding:4px 0;font-family:var(--font);font-size:.9rem;color:var(--text-2)}
.mega-col a:hover{color:var(--accent)}
.mega-title{font-family:var(--font-d)!important;font-size:1.1rem!important;color:var(--text)!important;margin-bottom:8px}
.mega-col ul{list-style:none}
.mega-more{color:var(--accent)!important;font-weight:600}
.dd-arrow{margin-left:4px;transition:transform .3s}
.has-dropdown:hover .dd-arrow{transform:rotate(180deg)}

/* Nav CTA */
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--white);
  padding:10px 24px;border-radius:var(--radius-pill);
  font-family:var(--font-d);font-size:1rem;
  transition:all .3s var(--ease);
}
.nav-cta:hover{background:#e5502a;transform:translateY(-2px)}

/* Hamburger */
.hamburger{
  display:none;background:none;border:none;cursor:pointer;
  width:32px;height:24px;position:relative;z-index:1001;
}
.hamburger span{
  display:block;width:100%;height:2px;background:var(--text);
  position:absolute;left:0;transition:all .3s;
}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:50%;transform:translateY(-50%)}
.hamburger span:nth-child(3){bottom:0}
.hamburger.open span:nth-child(1){top:50%;transform:rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){bottom:50%;transform:rotate(-45deg)}

/* Mobile Nav */
.mobile-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:998;opacity:0;visibility:hidden;
  transition:all .3s;
}
.mobile-overlay.open{opacity:1;visibility:visible}
.mobile-nav{
  position:fixed;top:0;right:-320px;width:320px;height:100vh;
  background:var(--white);z-index:999;padding:100px 24px 24px;
  overflow-y:auto;transition:right .4s var(--ease);
}
.mobile-nav.open{right:0}
.mobile-nav a{
  display:block;padding:14px 0;font-family:var(--font-d);
  font-size:1.25rem;color:var(--text);border-bottom:1px solid var(--surface);
}
.mobile-nav a.active{color:var(--accent)}
.mobile-sub{font-size:1rem!important;padding-left:16px!important;color:var(--text-2)!important}
.mobile-nav-cta{margin-top:24px}

/* Breadcrumb */
.breadcrumb-bar{padding:12px 0;margin-top:var(--nav-h);background:var(--surface)}
.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:.85rem}
.breadcrumbs a{color:var(--text-2)}
.breadcrumbs a:hover{color:var(--accent)}
.bc-sep{color:var(--border)}
.bc-current{color:var(--text);font-weight:600}

main{margin-top:var(--nav-h)}

/* -- Hero Section ------------------------------------------ */
.hero{
  background:var(--surface);
  padding:40px 0 0;
  position:relative;overflow:clip;
  min-height:85vh;
}
.hero-heading{
  font-family:var(--font-d);
  font-size:clamp(3.5rem,12vw,13.75rem);
  line-height:1.05;letter-spacing:-0.02em;
  color:var(--text);text-align:center;
  padding:0 var(--page-pad);
  position:relative;z-index:2;
}
.hero-heading .accent{color:var(--accent)}
.hero-badge{
  position:absolute;top:60px;right:60px;
  width:180px;height:180px;
  background:var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
  animation:spin-slow 20s linear infinite;
}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-badge svg{width:60px;height:60px;fill:var(--surface)}
.hero-pattern{
  position:absolute;top:120px;left:-40px;
  width:250px;height:250px;
  background:rgba(156,156,156,.12);
  transform:rotate(-6deg);
  border-radius:24px;z-index:1;
}
.hero-bottom{
  position:relative;margin-top:-60px;z-index:4;
}
.hero-image-row{
  display:flex;gap:24px;padding:0 var(--page-pad);
  margin-top:40px;
}
.hero-image-row .hero-img{
  flex:1;aspect-ratio:3/4;border-radius:var(--radius);
  overflow:hidden;position:relative;
}
.hero-image-row .hero-img img{
  width:100%;height:100%;object-fit:cover;
}

/* -- Ticker / Marquee Band --------------------------------- */
.ticker-wrap{
  position:relative;z-index:5;
  overflow:visible;padding:20px 0;
  margin-top:-100px;
  pointer-events:none;
}
.ticker-band{
  display:flex;align-items:center;
  width:max-content;
  background:var(--accent);
  padding:16px 0;
  transform:rotate(-3deg);
  margin-left:-100px;
  animation:ticker-scroll 25s linear infinite;
}
.ticker-band.reverse{
  transform:rotate(3deg);
  animation:ticker-scroll-reverse 25s linear infinite;
  margin-top:-20px;
}
@keyframes ticker-scroll{
  from{transform:rotate(-3deg) translateX(0)}
  to{transform:rotate(-3deg) translateX(-50%)}
}
@keyframes ticker-scroll-reverse{
  from{transform:rotate(3deg) translateX(0)}
  to{transform:rotate(3deg) translateX(-50%)}
}
.ticker-item{
  display:flex;align-items:center;gap:24px;
  padding:0 40px;white-space:nowrap;
}
.ticker-item span{
  font-family:var(--font-d);font-size:2rem;
  color:#000;letter-spacing:-0.02em;
}
.ticker-item svg{width:32px;height:32px}

/* -- Categories Section ------------------------------------ */
.categories-section{padding:80px 0}
.categories-section .section-header{text-align:center;margin-bottom:60px}
.categories-section .section-header h2{color:var(--text)}
.cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.cat-card{
  display:block;position:relative;
  border-radius:var(--radius);overflow:hidden;
  height:500px;transition:transform .4s var(--ease);
}
.cat-card:hover{transform:translateY(-8px)}
.cat-card-img{
  width:100%;height:100%;object-fit:cover;
  background:var(--placeholder);
}
.cat-card-img img{width:100%;height:100%;object-fit:cover}
.cat-card-label{
  position:absolute;bottom:24px;left:24px;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(20px);
  padding:10px 10px 10px 24px;
  border-radius:var(--radius-pill);
}
.cat-card-label span{
  font-family:var(--font-d);font-size:1.25rem;color:#000;
}

/* -- Products Section -------------------------------------- */
.products-section{padding:80px 0}
.products-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:48px;
}
.products-header h2{max-width:500px}
.products-header .see-all{
  font-family:var(--font-d);font-size:1.2rem;
  color:#000;display:flex;align-items:center;gap:8px;
}
.products-header .see-all:hover{color:var(--accent)}
.products-header .see-all svg{transition:transform .3s}
.products-header .see-all:hover svg{transform:translateX(4px)}

.product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.product-card{
  display:block;text-decoration:none;
  transition:transform .4s var(--ease);
}
.product-card:hover{transform:translateY(-6px)}
.product-card-img{
  position:relative;width:100%;
  aspect-ratio:3/4;border-radius:var(--radius);
  overflow:hidden;background:var(--placeholder);
  margin-bottom:16px;
}
.product-card-img img{width:100%;height:100%;object-fit:cover}
.product-card-price{
  position:absolute;bottom:20px;right:20px;
  font-family:var(--font-d);font-size:2rem;
  color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.product-card-info{
  display:flex;align-items:center;justify-content:space-between;
}
.product-card-name{
  font-family:var(--font-d);font-size:1.25rem;
  color:var(--text);letter-spacing:-0.02em;
}
.product-card-badge{
  display:inline-block;background:var(--accent);color:var(--white);
  padding:4px 12px;border-radius:var(--radius-pill);
  font-family:var(--font-d);font-size:.75rem;
  margin-bottom:4px;
}
.product-card .btn-primary{
  font-size:1rem;padding:10px 24px;
}

/* Product card — extended (renderProductCard) */
a.product-card{color:inherit}
.card-badge{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-block;background:var(--accent);color:var(--white);
  padding:4px 12px;border-radius:var(--radius-pill);
  font-family:var(--font-d);font-size:.75rem;
}
.card-img{position:relative;margin-bottom:14px}
.card-img .product-image{
  width:100%;aspect-ratio:3/4;border-radius:var(--radius);
  overflow:hidden;background:var(--placeholder);
}
.card-img .product-image img{width:100%;height:100%;object-fit:cover}
.card-body{padding:0 4px}
.card-category{
  font-size:.75rem;color:var(--accent);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:4px;font-weight:600;
}
.card-body h3{
  font-family:var(--font-d);font-size:1.15rem;
  color:var(--text);margin-bottom:6px;letter-spacing:-0.02em;
}
.card-meta{
  display:flex;align-items:center;gap:6px;
  font-size:.78rem;color:var(--text-2);margin-bottom:8px;
  flex-wrap:wrap;
}
.meta-sep{opacity:.4}
.card-colors{display:flex;align-items:center;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.color-dot{
  width:14px;height:14px;border-radius:50%;
  display:inline-block;border:1.5px solid transparent;
}
.color-dot.white-dot{border-color:var(--border)}
.color-more{font-size:.7rem;color:var(--text-2);margin-left:2px}
.card-price{font-size:.9rem;color:var(--text)}
.card-price .from{color:var(--text-2);margin-right:4px;font-size:.8rem}
.card-price strong{
  font-family:var(--font-d);font-size:1.4rem;
  color:var(--accent);margin-right:2px;
}
.card-price .currency{font-size:.85rem;color:var(--text-2)}

/* -- CTA Banner -------------------------------------------- */
.cta-banner{
  position:relative;width:100%;
  min-height:600px;
  background:var(--placeholder);
  overflow:hidden;margin:80px 0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.cta-banner-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.cta-banner-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.4);
}
.cta-banner-content{
  position:relative;z-index:2;
  padding:60px var(--page-pad);
  max-width:1200px;
}
.cta-banner-content h2{
  font-size:clamp(2.5rem,8vw,8rem);
  color:var(--white);line-height:1.1;
  letter-spacing:-0.01em;
  margin-bottom:32px;
}
.cta-banner-content p{
  color:var(--white);font-size:1.15rem;
  max-width:500px;margin:0 auto 32px;
  opacity:.9;
}

/* -- CTA Section (simple) ---------------------------------- */
.cta-section{
  background:var(--surface);padding:80px 0;text-align:center;
}
.cta-section h2{margin-bottom:16px}
.cta-section p{color:var(--text-2);margin-bottom:32px;font-size:1.1rem}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* -- FAQ Section ------------------------------------------- */
.faq-section{padding:80px 0}
.faq-section .section-header{text-align:center;margin-bottom:60px}
.faq-layout{
  display:grid;grid-template-columns:1fr 1fr;
  gap:60px;align-items:start;
}
.faq-list{max-width:700px}
.faq-item{border-bottom:1px solid var(--border);padding:24px 0}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;background:none;border:none;cursor:pointer;
  font-family:var(--font-d);font-size:1.25rem;color:#000;
  text-align:left;padding:0;
  letter-spacing:-0.02em;
}
.faq-question .faq-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);transition:all .3s;flex-shrink:0;
}
.faq-question .faq-icon svg{
  width:24px;height:24px;stroke:var(--muted);
  transition:transform .3s;
}
.faq-question[aria-expanded="true"] .faq-icon{background:var(--accent)}
.faq-question[aria-expanded="true"] .faq-icon svg{stroke:var(--white);transform:rotate(45deg)}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .4s var(--ease);
}
.faq-answer.open{max-height:300px}
.faq-answer-inner{
  padding:16px 0 8px;font-size:1rem;line-height:1.6;color:var(--text-2);
}
.faq-image{
  position:relative;
}
.faq-image-1{
  width:70%;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/4;background:var(--placeholder);
}
.faq-image-2{
  width:55%;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/4;background:var(--placeholder);
  position:absolute;bottom:-40px;right:0;
  box-shadow:var(--shadow-md);
}
.faq-image-1 img,.faq-image-2 img{width:100%;height:100%;object-fit:cover}

/* -- Testimonial Section ----------------------------------- */
.testimonial-section{
  padding:80px 0;position:relative;overflow:hidden;
}
.testimonial-card{
  max-width:900px;margin:0 auto;
  background:var(--white);border-radius:var(--radius);
  padding:48px;text-align:center;
  position:relative;z-index:3;
  box-shadow:var(--shadow-md);
}
.testimonial-quote{
  font-family:var(--font-d);
  font-size:clamp(1.5rem,3.5vw,3rem);
  line-height:1.2;color:#000;
  letter-spacing:-0.02em;margin-bottom:32px;
}
.testimonial-author{
  display:flex;align-items:center;justify-content:center;gap:16px;
}
.testimonial-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--placeholder);overflow:hidden;
}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover}
.testimonial-name{
  font-family:var(--font-d);font-size:1.25rem;color:#000;
}

/* -- Footer ------------------------------------------------ */
.footer{
  background:var(--dark);color:var(--white);
  padding:80px 0 40px;position:relative;overflow:hidden;
}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:60px;
}
.footer-brand{grid-column:1}
.footer-brand .nav-logo{font-size:2rem;color:var(--white);margin-bottom:16px;display:block}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.7;max-width:280px}
.footer-col h4{
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:1.1rem;margin-bottom:24px;color:var(--white);
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:12px}
.footer-col a{
  color:rgba(255,255,255,.6);font-size:.95rem;
  transition:color .3s;
}
.footer-col a:hover{color:var(--accent)}
.footer-giant{
  font-family:var(--font-d);
  font-size:clamp(5rem,20vw,20rem);
  line-height:.85;letter-spacing:-0.02em;
  color:rgba(255,255,255,.06);
  margin-top:40px;
  white-space:nowrap;
  user-select:none;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:24px;margin-top:24px;
  display:flex;justify-content:space-between;
  color:rgba(255,255,255,.4);font-size:.85rem;
}
.footer-bottom a{color:rgba(255,255,255,.4);transition:color .3s}
.footer-bottom a:hover{color:var(--white)}

/* -- Back to Top ------------------------------------------- */
#backToTop{
  position:fixed;bottom:32px;right:32px;z-index:900;
  width:48px;height:48px;border-radius:50%;
  background:var(--accent);color:var(--white);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:all .3s var(--ease);
  box-shadow:var(--shadow-md);
}
#backToTop.visible{opacity:1;visibility:visible;transform:translateY(0)}
#backToTop:hover{background:#e5502a;transform:translateY(-4px)}

/* -- WhatsApp Float ---------------------------------------- */
.wa-float{
  position:fixed;bottom:32px;left:32px;z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.4);
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.1)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* -- Scroll Reveal ----------------------------------------- */
.reveal{opacity:0;transform:translateY(40px);transition:all .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* -- Page Header (subpages) -------------------------------- */
.page-header{
  background:var(--surface);
  padding:80px 0 60px;text-align:center;
}
.page-header h1{
  font-size:clamp(2.5rem,6vw,6rem);
  margin-bottom:16px;
}
.page-header p{color:var(--text-2);font-size:1.15rem;max-width:600px;margin:0 auto}

/* -- Info Section (toptan-satis, kargo etc) ----------------- */
.info-section{padding:80px 0}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
.info-card{
  background:var(--surface);border-radius:var(--radius);
  padding:40px;transition:transform .3s var(--ease);
}
.info-card:hover{transform:translateY(-4px)}
.info-card h3{margin-bottom:12px}
.info-card p{color:var(--text-2);line-height:1.7}
.info-card .info-icon{
  width:64px;height:64px;border-radius:16px;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.info-card .info-icon img{width:40px;height:40px;object-fit:contain;border-radius:8px}
.info-highlight{border:2px solid var(--accent);background:rgba(253,96,54,.05)}

/* -- Trust Section ----------------------------------------- */
.trust-section{padding:80px 0}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.trust-content h2{margin-bottom:24px}
.trust-content h2 .gold{color:var(--accent)}
.trust-content p{color:var(--text-2);line-height:1.7;margin-bottom:16px}
.trust-btn{margin-top:16px}
.trust-features{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.trust-feat{text-align:center;padding:24px}
.trust-icon-wrap{
  width:80px;height:80px;border-radius:50%;overflow:hidden;
  margin:0 auto 12px;background:var(--placeholder);
}
.trust-icon-wrap .trust-icon-img{width:100%;height:100%;object-fit:cover}
.trust-feat h4{font-family:var(--font-d);font-size:1.1rem;margin-bottom:4px}
.trust-feat p{font-size:.85rem;color:var(--text-2)}
.trust-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
}
.trust-btn{margin-top:8px}

/* -- Page Header Accent ------------------------------------ */
.page-header-accent{background:var(--dark);color:var(--white)}
.page-header-accent h1,.page-header-accent p{color:var(--white)}

/* -- Info Section extras ----------------------------------- */
.info-grid-3{grid-template-columns:repeat(3,1fr)}
.info-icon-img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.info-highlight{
  font-family:var(--font-d);font-size:1.5rem;
  color:var(--accent);margin-bottom:12px;
}

/* -- Price Note -------------------------------------------- */
.price-note{margin-top:24px;color:var(--text-2);font-size:.85rem;font-style:italic}

/* -- Contact Page Extended --------------------------------- */
.contact-card{
  background:var(--white);border-radius:var(--radius);
  padding:32px;border:1px solid var(--surface);
  margin-bottom:24px;transition:transform .3s var(--ease);
}
.contact-card:hover{transform:translateY(-4px)}
.contact-card-icon{margin-bottom:16px}
.contact-card h3{font-family:var(--font-d);font-size:1.25rem;margin-bottom:8px}
.contact-card p{color:var(--text-2);font-size:.9rem;line-height:1.6;margin-bottom:16px}
.contact-main{
  background:var(--surface);border-radius:var(--radius);padding:48px;
}
.contact-main-inner h2{font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:16px}
.contact-main-inner p{color:var(--text-2);line-height:1.7;margin-bottom:24px}
.contact-steps{display:flex;flex-direction:column;gap:20px}
.contact-step{display:flex;gap:16px;align-items:flex-start}
.contact-step .step-num{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:.9rem;flex-shrink:0;
}
.contact-step h4{font-family:var(--font-d);font-size:1rem;margin-bottom:2px}
.contact-step p{font-size:.85rem;color:var(--text-2)}

/* -- Category Navigation ----------------------------------- */
.cat-nav-section{padding:24px 0;border-bottom:1px solid var(--surface)}
.cat-nav-pills{display:flex;flex-wrap:wrap;gap:8px}
.cat-pill{
  display:inline-block;padding:8px 20px;
  border-radius:var(--radius-pill);border:2px solid var(--border);
  font-family:var(--font-d);font-size:.9rem;
  color:var(--text);text-decoration:none;
  transition:all .3s;
}
.cat-pill:hover,.cat-pill.active{
  border-color:var(--accent);background:var(--accent);color:var(--white);
}
.product-count-bar{
  padding:16px 0;color:var(--text-2);font-size:.9rem;margin-bottom:16px;
}
.other-cats-section{padding:80px 0;background:var(--surface)}

/* -- Filter Bar -------------------------------------------- */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px;margin-bottom:40px;
}

/* -- Price Table ------------------------------------------- */
.pricing-section{padding:80px 0}
.price-table{
  width:100%;border-collapse:collapse;margin-top:32px;
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.price-table th{
  background:var(--dark);color:var(--white);
  padding:16px 20px;text-align:left;
  font-family:var(--font-d);font-size:1rem;
}
.price-table td{padding:14px 20px;border-bottom:1px solid var(--surface)}
.price-table tr:hover td{background:var(--surface)}

/* -- Steps Section ----------------------------------------- */
.steps-section{padding:80px 0;background:var(--surface)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.step-card{text-align:center;padding:32px 20px}
.step-num{
  font-family:var(--font-d);font-size:4rem;
  color:var(--accent);line-height:1;margin-bottom:16px;
}
.step-card h3{margin-bottom:8px;font-size:1.25rem}
.step-card p{color:var(--text-2);font-size:.9rem}

/* -- Audience Section -------------------------------------- */
.audience-section{padding:80px 0}
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:48px}
.audience-card{
  background:var(--surface);border-radius:var(--radius);
  padding:40px;text-align:center;transition:transform .3s;
}
.audience-card:hover{transform:translateY(-4px)}
.audience-card h3{margin-bottom:8px}
.audience-card p{color:var(--text-2);font-size:.9rem}

/* -- About Page -------------------------------------------- */
.about-story{padding:80px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-content h2{margin-bottom:24px}
.about-content p{color:var(--text-2);line-height:1.7;margin-bottom:16px}
.about-visual{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.about-visual .about-image{width:100%;height:100%;overflow:hidden;border-radius:var(--radius)}
.about-visual .about-image img{width:100%;height:100%;object-fit:cover}
.about-values{padding:80px 0;background:var(--surface)}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.value-card{background:var(--white);border-radius:var(--radius);padding:40px}
.value-number{
  font-family:var(--font-d);font-size:3rem;
  color:var(--accent);margin-bottom:12px;
}
.value-card h3{margin-bottom:8px}
.value-card p{color:var(--text-2);font-size:.9rem;line-height:1.6}
.about-numbers{padding:80px 0}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.number-item strong{
  display:block;font-family:var(--font-d);
  font-size:3.5rem;color:var(--accent);margin-bottom:8px;
}
.number-item span{color:var(--text-2);font-size:1rem}

/* -- Legal Pages ------------------------------------------- */
.legal-section{padding:80px 0}
.legal-section h2{margin-bottom:16px;font-size:clamp(1.5rem,3vw,2rem)}
.legal-section h3{margin-top:32px;margin-bottom:12px;font-size:1.25rem}
.legal-section p,.legal-section li{color:var(--text-2);line-height:1.7;margin-bottom:8px}
.legal-section ul,.legal-section ol{padding-left:24px}
.legal-table{width:100%;border-collapse:collapse;margin:16px 0}
.legal-table th,.legal-table td{padding:12px 16px;border:1px solid var(--surface);text-align:left}
.legal-table th{background:var(--surface);font-weight:600}
.legal-updated{margin-top:32px;padding:16px;background:var(--surface);border-radius:var(--radius-sm);font-size:.85rem;color:var(--text-2)}

/* -- Product Detail (urun.php) ----------------------------- */
.pd-section{padding:80px 0}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.pd-gallery{position:relative}
.pd-main-image{
  width:100%;border-radius:var(--radius);
  overflow:hidden;background:var(--placeholder);
}
.pd-main-image img{width:100%;height:auto;display:block;object-fit:contain}
.pd-thumbnails{display:flex;gap:12px;margin-top:16px}
.pd-thumb{
  width:80px;height:80px;border-radius:var(--radius-sm);
  overflow:hidden;border:2px solid transparent;
  cursor:pointer;transition:border-color .3s;background:none;padding:0;
}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--accent)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-info h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:8px}
.pd-badge{
  display:inline-block;background:var(--accent);color:var(--white);
  padding:4px 16px;border-radius:var(--radius-pill);
  font-family:var(--font-d);font-size:.85rem;margin-bottom:16px;
}
.pd-fabric{color:var(--text-2);margin-bottom:24px;font-size:.95rem}
.pd-price{margin-bottom:24px}
.pd-price-value{
  font-family:var(--font-d);font-size:2.5rem;color:var(--accent);
}
.pd-price-unit{font-size:1rem;color:var(--text-2)}
.pd-label{
  font-family:var(--font-d);font-size:1rem;
  margin-bottom:12px;color:var(--text);
}
.pd-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.swatch{
  width:36px;height:36px;border-radius:50%;
  border:3px solid transparent;cursor:pointer;
  transition:all .3s;
}
.swatch.selected,.swatch:hover{border-color:var(--accent);transform:scale(1.15)}
.pd-sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.size-btn{
  padding:8px 20px;border-radius:var(--radius-pill);
  border:2px solid var(--border);background:transparent;
  font-family:var(--font-d);font-size:1rem;cursor:pointer;
  transition:all .3s;
}
.size-btn.selected,.size-btn:hover{
  border-color:var(--accent);background:var(--accent);color:var(--white);
}
.pd-desc{color:var(--text-2);line-height:1.7;margin-top:24px}

/* Product detail — extended classes */
.pd-image{position:relative}
.pd-category{
  font-family:var(--font-d);font-size:.85rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;
}
.pd-description{
  color:var(--text-2);font-size:.95rem;line-height:1.7;margin-bottom:24px;
}
.pd-price-label{font-size:.9rem;color:var(--text-2);margin-right:8px}
.pd-price-currency{font-size:1.1rem;color:var(--text-2);margin-left:2px}
.pd-details{
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:28px;padding:20px;
  background:var(--surface);border-radius:var(--radius);
}
.pd-detail-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.92rem;
}
.pd-detail-label{
  font-weight:600;color:var(--text);min-width:80px;
}
.pd-detail-value{color:var(--text-2);text-align:right}
.pd-colors{margin-bottom:28px}
.pd-section-label{
  font-family:var(--font-d);font-size:.95rem;
  margin-bottom:12px;color:var(--text);
}
.pd-section-label span{font-weight:400;color:var(--accent)}
.swatch{position:relative}
.swatch .tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  background:var(--dark);color:var(--white);
  font-size:.7rem;padding:4px 8px;border-radius:4px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s;
}
.swatch:hover .tooltip{opacity:1}
.white-swatch{border-color:var(--border) !important}
.white-swatch.selected{border-color:var(--accent) !important}
.pd-price-table{margin-bottom:28px}
.pd-price-table table{
  width:100%;border-collapse:collapse;
  font-size:.85rem;text-align:center;
}
.pd-price-table th{
  padding:8px 6px;font-family:var(--font-d);font-weight:400;
  border-bottom:2px solid var(--border);color:var(--text);
}
.pd-price-table td{
  padding:8px 6px;color:var(--accent);font-weight:600;
  border-bottom:1px solid var(--border);
}
.pd-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;
}
.pd-actions .btn{flex:1;min-width:160px;justify-content:center}

/* -- Contact Page ------------------------------------------ */
.contact-section{padding:80px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-info h3{margin-bottom:24px}
.contact-item{display:flex;gap:16px;margin-bottom:20px}
.contact-item .ci-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.contact-item h4{font-family:var(--font-d);font-size:1rem;margin-bottom:4px}
.contact-item p{color:var(--text-2);font-size:.9rem}

/* -- Products Filter Page (urunler.php) -------------------- */
.filter-section{padding:80px 0}
.filter-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px;
}
.filter-tab{
  padding:10px 24px;border-radius:var(--radius-pill);
  border:2px solid var(--border);background:transparent;
  font-family:var(--font-d);font-size:1rem;cursor:pointer;
  transition:all .3s;
}
.filter-tab.active,.filter-tab:hover{
  border-color:var(--accent);background:var(--accent);color:var(--white);
}
.product-count{color:var(--text-2);margin-bottom:24px;font-size:.9rem}

/* -- Stats Bar --------------------------------------------- */
.stats-bar{padding:40px 0;background:var(--white)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;text-align:center;
}
.stat-item strong{
  display:block;font-family:var(--font-d);
  font-size:2.5rem;color:var(--accent);
}
.stat-item span{color:var(--text-2);font-size:.9rem}

/* -- Alt Bg ------------------------------------------------ */
.alt-bg{background:var(--surface)}

/* ========== RESPONSIVE ========== */
@media(max-width:1024px){
  :root{--page-pad:24px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .faq-layout{grid-template-columns:1fr}
  .faq-image{display:none}
  .trust-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .pd-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .numbers-grid{grid-template-columns:repeat(2,1fr)}
  .mega-menu{display:none!important}
  .hero-heading{font-size:clamp(2.5rem,8vw,6rem)}
  .hero-badge{width:120px;height:120px;top:20px;right:20px}
  .hero-badge svg{width:40px;height:40px}
}

@media(max-width:768px){
  :root{--page-pad:16px;--nav-h:64px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:block}
  .cat-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .cat-card{height:280px}
  .hero{min-height:auto;padding:24px 0 0;overflow:visible}
  .hero-heading{font-size:clamp(2rem,10vw,3.5rem);padding:0 var(--page-pad)}
  .hero-badge{width:60px;height:60px;top:8px;right:8px}
  .hero-badge svg{width:22px;height:22px}
  .hero-pattern{width:120px;height:120px;top:60px;left:-20px}
  .hero-image-row{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:12px;padding:0 var(--page-pad);margin-top:24px;
    scroll-padding:0 var(--page-pad);
  }
  .hero-image-row::-webkit-scrollbar{display:none}
  .hero-image-row .hero-img{
    flex:0 0 78%;scroll-snap-align:start;
    aspect-ratio:3/4;max-height:300px;border-radius:var(--radius-sm);
  }
  .ticker-wrap{margin-top:-14px;padding:4px 0}
  .ticker-band{padding:5px 0;animation-name:ticker-scroll-m}
  .ticker-band.reverse{margin-top:-4px;animation-name:ticker-scroll-reverse-m}
  @keyframes ticker-scroll-m{
    from{transform:rotate(-1.5deg) translateX(0)}
    to{transform:rotate(-1.5deg) translateX(-50%)}
  }
  @keyframes ticker-scroll-reverse-m{
    from{transform:rotate(1.5deg) translateX(0)}
    to{transform:rotate(1.5deg) translateX(-50%)}
  }
  .ticker-item{gap:8px;padding:0 12px}
  .ticker-item span{font-size:.7rem;letter-spacing:0}
  .ticker-item svg{width:10px;height:10px}
  .section-pad{padding:48px 0}
  .products-header{flex-direction:column;align-items:flex-start;gap:16px}
  .cta-banner{min-height:350px}
  .cta-banner-content h2{font-size:clamp(1.75rem,8vw,3rem)}
  .cta-banner-content p{font-size:.95rem}
  .footer-grid{grid-template-columns:1fr}
  .footer-giant{font-size:clamp(3rem,15vw,8rem)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .trust-features{grid-template-columns:repeat(2,1fr)}
  .info-grid{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr}
  .price-table{font-size:.85rem}
  .price-table th,.price-table td{padding:10px 12px}
  .breadcrumb-bar{display:none}
  .testimonial-card{padding:32px 20px}
  .testimonial-quote{font-size:1.25rem}
  .btn-primary,.btn-outline,.btn-outline-light,.btn-whatsapp{padding:12px 24px;font-size:1.05rem}
  .categories-section .section-header h2,
  .products-header h2{font-size:clamp(1.75rem,6vw,3rem)}
  h2{font-size:clamp(1.75rem,6vw,3.5rem)}
}

@media(max-width:480px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .numbers-grid{grid-template-columns:1fr}
  .hero-image-row .hero-img{max-height:260px;flex:0 0 82%}
  .hero-heading{font-size:clamp(1.75rem,9vw,2.5rem)}
  .cat-card{height:220px}
  .cat-card-label{bottom:12px;left:12px;padding:8px 8px 8px 16px}
  .cat-card-label span{font-size:1rem}
  .cta-banner{min-height:300px}
}