/* =========================================================
   Ses Can Yapı — absalci.com.tr düzeni
   Açık/beyaz havadar kurumsal tema + turuncu vurgu
   Tam genişlik hero slider · fotoğraf ürün kartları · koyu footer
   ========================================================= */

:root {
  --orange: #F15A22;
  --orange-dark: #D2481A;
  --orange-soft: #FFF1EB;
  --ink: #1B1B1F;
  --ink-2: #3A3F47;
  --muted: #6B7280;
  --muted-2: #9AA1AC;
  --line: #E8EAEE;
  --bg: #FFFFFF;
  --bg-soft: #F5F6F8;
  --footer: #16181D;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(20,23,28,.05), 0 4px 14px rgba(20,23,28,.06);
  --shadow-md: 0 12px 34px rgba(20,23,28,.10);
  --shadow-lg: 0 30px 70px rgba(20,23,28,.16);

  --maxw: 1200px;
  --sp: clamp(56px, 8vw, 100px);

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Sora', var(--font-body);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; color: var(--ink); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.section { padding-block: var(--sp); }
.section--soft { background: var(--bg-soft); }

.section-head { max-width: 640px; margin-bottom: clamp(32px, 4.5vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block; font: 700 13px/1 var(--font-body);
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(26px, 4vw, 40px); }
.section-head h2 .u { color: var(--orange); }
.section-head p { margin-top: 14px; color: var(--muted); font-size: clamp(15.5px, 2vw, 17.5px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 6px;
  font: 700 15px/1 var(--font-body); transition: all .18s ease; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-outline { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--orange); color: var(--orange); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* =========================================================
   HEADER
   ========================================================= */
.topbar { background: var(--ink); color: #C9CED6; font-size: 13.5px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 20px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .15s; }
.topbar a:hover { color: #fff; }
.topbar__left { display: flex; align-items: center; gap: 20px; }
.topbar__left span { display: inline-flex; align-items: center; gap: 7px; }
.topbar__right { display: flex; align-items: center; gap: 18px; }
.topbar svg { width: 15px; height: 15px; color: var(--orange); flex: none; }
.topbar__left .sep { color: rgba(255,255,255,.28); font-size: 10px; }
@media (max-width: 720px){ .topbar__left { display: none; } }

.header {
  position: sticky; top: 0; z-index: 60; background: #fff;
  border-bottom: 1px solid var(--line); transition: box-shadow .2s;
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 24px; }
.nav__logo img { height: 48px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 2px; }
.nav__menu a {
  padding: 10px 14px; font-weight: 600; font-size: 15px; color: var(--ink-2);
  position: relative; transition: color .15s; white-space: nowrap;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.nav__menu a:hover, .nav__menu a.active { color: var(--orange); }
.nav__menu a.active::after, .nav__menu a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 16px; }
.nav__phone { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.nav__phone svg { width: 22px; height: 22px; color: var(--orange); }
.nav__phone span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; display: block; line-height: 1; margin-bottom: 3px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 8px; align-items: center; justify-content: center; }
.nav__toggle svg { width: 26px; height: 26px; }
@media (max-width: 1180px){ .nav__phone { display: none; } }
@media (max-width: 980px){ .nav__menu { display: none; } .nav__toggle { display: inline-flex; } }
@media (max-width: 560px){ .nav__cta > .btn-primary { display: none; } .nav { height: 64px; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; }
.drawer.open { visibility: visible; opacity: 1; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20,23,28,.5); }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(84vw, 330px);
  background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,1,.36,1); box-shadow: var(--shadow-lg);
}
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.drawer__head img { height: 40px; }
.drawer__close { width: 42px; height: 42px; border-radius: 8px; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; }
.drawer__panel a.link { padding: 13px 12px; font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); }
.drawer__panel a.link:hover { color: var(--orange); }
.drawer__panel .btn { margin-top: 16px; }
.drawer__contact { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 14px; }

/* =========================================================
   HERO SLIDER (full-width, edge-to-edge)
   ========================================================= */
.hero { position: relative; }
.slider { position: relative; height: clamp(440px, 68vh, 640px); overflow: hidden;
  background: linear-gradient(120deg, #16181D 0%, #1E1A16 55%, #2A1A10 100%); }
.slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; z-index: 1;
  background-size: cover; background-position: center;
}
.slide.active { opacity: 1; z-index: 2; }
.slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,17,21,.86) 0%, rgba(15,17,21,.66) 40%, rgba(15,17,21,.28) 100%);
}
.slide__inner { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; }
.slide__inner .container { width: 100%; }
.slide__box { max-width: 620px; color: #fff; }
.slide__tag {
  display: inline-block; font: 700 12.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--orange); padding: 8px 15px; border-radius: 4px; margin-bottom: 20px;
}
.slide__box h1, .slide__box h2 { color: #fff; font-size: clamp(30px, 5.2vw, 56px); line-height: 1.05; }
.slide__box h1 .u, .slide__box h2 .u { color: var(--orange); }
.slide__box p { margin-top: 18px; font-size: clamp(15.5px, 2vw, 19px); color: #D7DBE0; max-width: 520px; }
.slide__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; }

/* slider controls */
.slider__dots { position: absolute; z-index: 5; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.slider__dots button { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .2s; }
.slider__dots button.active { background: var(--orange); width: 30px; border-radius: 6px; }
.slider__arrow {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; transition: background .2s; border: 1px solid rgba(255,255,255,.2);
}
.slider__arrow:hover { background: var(--orange); border-color: var(--orange); }
.slider__arrow svg { width: 24px; height: 24px; color: #fff; }
.slider__arrow.prev { left: 20px; } .slider__arrow.next { right: 20px; }
@media (max-width: 720px){ .slider__arrow { display: none; } }

/* hero feature strip under slider */
.hero-strip { background: var(--ink); }
.hero-strip .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.hstrip { display: flex; align-items: center; gap: 14px; padding: 22px 20px; color: #fff; border-right: 1px solid rgba(255,255,255,.08); }
.hstrip:last-child { border-right: none; }
.hstrip__ic { width: 44px; height: 44px; flex: none; border-radius: 10px; background: rgba(241,90,34,.16); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.hstrip__ic svg { width: 24px; height: 24px; }
.hstrip b { display: block; font-family: var(--font-head); font-size: 15px; }
.hstrip span { font-size: 12.5px; color: #9AA1AC; }
@media (max-width: 860px){ .hero-strip .container { grid-template-columns: 1fr 1fr; } .hstrip:nth-child(2){ border-right: none; } }
@media (max-width: 480px){ .hero-strip .container { grid-template-columns: 1fr; } .hstrip { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); } }

/* =========================================================
   PRODUCT PHOTO TILES
   ========================================================= */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px){ .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .tiles { grid-template-columns: 1fr; } }
.tile {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.3;
  display: flex; align-items: flex-end; box-shadow: var(--shadow-sm); background: var(--ink);
}
@media (max-width: 1080px){ .tile { aspect-ratio: 4 / 3.1; } }
@media (max-width: 520px){ .tile { aspect-ratio: 4 / 3.4; } }
.tile__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; }
.tile:hover .tile__img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,17,21,0) 30%, rgba(15,17,21,.85) 100%); }
.tile__body { position: relative; z-index: 2; padding: 22px; color: #fff; width: 100%; }
.tile__body h3 { color: #fff; font-size: 19px; margin-bottom: 5px; line-height: 1.15; }
.tile__body p { color: #D7DBE0; font-size: 13.5px; margin-bottom: 13px; }
.tile__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #fff; transition: gap .2s, color .2s; }
.tile__link svg { width: 17px; height: 17px; color: var(--orange); transition: transform .2s; }
.tile:hover .tile__link { color: var(--orange); }
.tile:hover .tile__link svg { transform: translateX(4px); }
.tile__badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--orange); color: #fff; font: 700 12px/1 var(--font-body); padding: 6px 12px; border-radius: 4px; }

/* =========================================================
   STEPS (3-adım "kolay tedarik")
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px){ .steps { grid-template-columns: 1fr; } }
.step { text-align: center; padding: 12px; position: relative; }
.step__ic {
  width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%; background: var(--orange-soft); color: var(--orange);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.step__ic svg { width: 40px; height: 40px; }
.step__no {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange); color: #fff; font: 800 14px/30px var(--font-head); text-align: center;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; max-width: 300px; margin-inline: auto; }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 42px; right: -12px; width: 24px; height: 2px;
  background: var(--line); background-image: linear-gradient(90deg, var(--line) 60%, transparent 0); background-size: 8px 2px;
}
@media (max-width: 820px){ .step:not(:last-child)::after { display: none; } }

/* =========================================================
   SUPPORT / FEATURE CARDS (4)
   ========================================================= */
.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px){ .cards4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .cards4 { grid-template-columns: 1fr; } }
.card4 {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card4:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.card4__ic { width: 56px; height: 56px; border-radius: 12px; background: var(--ink); color: var(--orange); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.card4__ic svg { width: 28px; height: 28px; }
.card4 h3 { font-size: 17px; margin-bottom: 8px; }
.card4 p { color: var(--muted); font-size: 14px; }

/* =========================================================
   ABOUT SPLIT
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; } }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; box-shadow: var(--shadow-md); }
.split__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.split__badge { position: absolute; left: 20px; bottom: 20px; z-index: 2; background: var(--orange); color: #fff; border-radius: var(--radius); padding: 16px 22px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-md); }
.split__badge .n { font: 800 30px/1 var(--font-head); }
.split__badge .t { font-size: 13px; line-height: 1.3; }
.split h2 { font-size: clamp(26px, 4vw, 40px); }
.split h2 .u { color: var(--orange); }
.split > .split__content > p { margin-top: 16px; color: var(--muted); font-size: 16px; }
.checklist { margin-top: 24px; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-2); font-weight: 500; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--orange); margin-top: 1px; }

/* =========================================================
   PARTNERS
   ========================================================= */
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.partner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: 800 17px/1.1 var(--font-head); color: var(--ink); text-align: center;
  transition: transform .18s, box-shadow .18s, color .18s;
}
.partner small { display: block; font: 600 10px/1 var(--font-body); letter-spacing: .08em; color: var(--muted-2); margin-top: 5px; text-transform: uppercase; }
.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--orange); }

/* =========================================================
   CTA STRIP
   ========================================================= */
.ctastrip { background: var(--orange); color: #fff; }
.ctastrip .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: clamp(40px, 6vw, 60px); }
.ctastrip h2 { color: #fff; font-size: clamp(23px, 3.2vw, 34px); max-width: 620px; }
.ctastrip p { margin-top: 8px; color: rgba(255,255,255,.9); font-size: 16px; }
.ctastrip__actions { display: flex; gap: 13px; flex-wrap: wrap; }
.ctastrip .btn-primary { background: #fff; color: var(--orange-dark); }
.ctastrip .btn-primary:hover { background: var(--ink); color: #fff; }

/* =========================================================
   PAGE HEADER (inner pages)
   ========================================================= */
.pagehead { background-color: var(--ink); background-size: cover; background-position: center; color: #fff; position: relative; overflow: hidden; }
.pagehead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,17,21,.93), rgba(15,17,21,.74)); }
.pagehead .container { position: relative; z-index: 2; padding-block: clamp(50px, 7vw, 84px); }
.pagehead h1 { font-size: clamp(30px, 5vw, 48px); color: #fff; }
.pagehead p { margin-top: 12px; color: #B4BAC4; font-size: 17px; max-width: 620px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #9AA1AC; margin-bottom: 18px; }
.crumbs a:hover { color: var(--orange); }
.crumbs .sep { color: rgba(255,255,255,.3); }

/* product detail rows (urunler.html) */
.prod { display: grid; grid-template-columns: 280px 1fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s; }
.prod:hover { box-shadow: var(--shadow-md); }
.prod + .prod { margin-top: 22px; }
.prod__img { min-height: 220px; background-size: cover; background-position: center; }
.prod__body { padding: 30px; }
.prod__body h3 { font-size: 22px; margin-bottom: 8px; }
.prod__body p { color: var(--muted); font-size: 15px; }
.prod__brands { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.prod__brands span { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); padding: 6px 13px; border-radius: 999px; }
@media (max-width: 640px){ .prod { grid-template-columns: 1fr; } .prod__img { min-height: 180px; } }

/* contact (iletisim.html) */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 46px); align-items: start; }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; } }
.info-card { display: flex; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.info-card + .info-card { margin-top: 14px; }
.info-card__icon { width: 48px; height: 48px; flex: none; border-radius: 11px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.info-card__icon svg { width: 24px; height: 24px; }
.info-card h4 { font-size: 15px; margin-bottom: 4px; }
.info-card p, .info-card a { color: var(--muted); font-size: 15px; }
.info-card a:hover { color: var(--orange); }
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); }
.form h3 { font-size: 22px; margin-bottom: 6px; }
.form > p { color: var(--muted); font-size: 15px; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.field label .req { color: var(--orange); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; font-family: inherit; font-size: 16px; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); transition: border-color .15s, background .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .field-row { grid-template-columns: 1fr; } }
.form .btn { width: 100%; }
.form__note { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); margin-top: 38px; }
.map-embed iframe { width: 100%; height: 360px; border: 0; display: block; filter: grayscale(.15); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--footer); color: #9AA1AC; padding-top: clamp(52px, 7vw, 78px); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 46px); padding-bottom: 44px; }
@media (max-width: 860px){ .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 26px; } }
@media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { height: 50px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer__brand p { font-size: 14.5px; max-width: 320px; line-height: 1.7; }
.footer__social { display: flex; gap: 10px; margin-top: 20px; }
.footer__social a { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; }
.footer__social a:hover { background: var(--orange); transform: translateY(-3px); }
.footer__social svg { width: 19px; height: 19px; color: #fff; }
.footer__col h4 { color: #fff; font-size: 15px; margin-bottom: 18px; }
.footer__col li { margin-bottom: 11px; }
.footer__col a, .footer__col span { font-size: 14.5px; transition: color .15s; display: inline-flex; align-items: center; gap: 8px; }
.footer__col a:hover { color: var(--orange); }
.footer__col svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.footer__bottom a:hover { color: #fff; }

/* whatsapp float */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,.45); transition: transform .18s; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; color: #fff; }

/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .marquee__track { animation: none !important; } }

/* =========================================================
   PARTNERS — koyu zeminli kayan logo şeridi (marquee)
   ========================================================= */
.partners-band { background: var(--bg-soft); padding-block: 44px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners-band__cap {
  text-align: center; font: 700 12px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 16px;
}
.partners-band__cap::before, .partners-band__cap::after { content: ""; width: 40px; height: 2px; border-radius: 2px; background: var(--orange); }
.marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 20px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.mlogo {
  flex: none; width: 176px; height: 96px; padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,23,28,.04);
}
.mlogo img { max-height: 48px; max-width: 132px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .82; transition: filter .3s, opacity .3s; }
.mlogo:hover { border-color: var(--line); }
.mlogo:hover img { filter: none; opacity: 1; }
.mlogo--text span { color: var(--ink-2); }
.mlogo span { font: 800 18px/1.05 var(--font-head); color: var(--ink-2); text-align: center; letter-spacing: -.02em; }
.mlogo span small { display: block; font: 600 9px/1 var(--font-body); letter-spacing: .1em; color: var(--muted-2); margin-top: 5px; text-transform: uppercase; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px){ .mlogo { width: 140px; height: 80px; } .mlogo img { max-height: 40px; max-width: 100px; } }

/* full-width map (anasayfa alt) */
.map-full { position: relative; }
.map-full iframe { width: 100%; height: 440px; border: 0; display: block; filter: grayscale(.12) contrast(1.02); }

/* =========================================================
   ÜRÜNLER — grup banner + ürün kartları
   ========================================================= */
.pgroup { margin-top: clamp(52px, 7vw, 88px); }
.pgroup:first-of-type { margin-top: 0; }
.pgroup__banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 210px; display: flex; align-items: flex-end; margin-bottom: 28px; box-shadow: var(--shadow-sm); }
.pgroup__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pgroup__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,17,21,.92) 0%, rgba(15,17,21,.55) 55%, rgba(15,17,21,.18) 100%); }
.pgroup__banner .bx { position: relative; z-index: 2; padding: clamp(22px,3vw,34px); color: #fff; max-width: 660px; }
.pgroup__banner .eyebrow { color: #FFC7AE; margin-bottom: 10px; }
.pgroup__banner h2 { color: #fff; font-size: clamp(23px,3.2vw,33px); }
.pgroup__banner p { color: #D7DBE0; font-size: 15px; margin-top: 8px; }
.pgroup__banner .brands { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.pgroup__banner .brands span { font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); padding: 5px 12px; border-radius: 999px; }

.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px){ .pcards { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 680px){ .pcards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .pcards { grid-template-columns: 1fr; } }

.pcard-icon { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; }
.pcard-icon:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.pcard-icon__ic { width: 46px; height: 46px; border-radius: 11px; background: var(--orange-soft); color: var(--orange); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.pcard-icon__ic svg { width: 24px; height: 24px; }
.pcard-icon h3 { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: var(--ink); }
.pcard-icon .brand { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--orange); letter-spacing: .02em; }

.pcard-photo { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.pcard-photo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pcard-photo__img { aspect-ratio: 4/3; background:#f3f3f5 center/cover no-repeat; }
.pcard-photo .b { padding: 15px 17px; }
.pcard-photo h3 { font-size: 15px; font-weight: 700; margin-bottom: 5px; color: var(--ink); }
.pcard-photo .brand { font-size: 12px; font-weight: 700; color: var(--orange); }


/* =========================================================
   İNCE HAREKETLER (motion) — premium his
   ========================================================= */
/* hero ken burns (ayrı görsel katmanı) */
.slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transform: scale(1.06); will-change: transform; }
.slide::before { z-index: 1; }
.slide__inner { z-index: 3; }

@media (prefers-reduced-motion: no-preference){
  .slide.active .slide__bg { animation: kenburns 9s ease-out both; }
  @keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1.17); } }

  /* daha zarif beliriş + hafif kademeli */
  .reveal { transform: translateY(30px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
  .tiles > .reveal:nth-child(2), .cards4 > .reveal:nth-child(2), .steps > .reveal:nth-child(2), .features > .reveal:nth-child(2) { transition-delay: .09s; }
  .tiles > .reveal:nth-child(3), .cards4 > .reveal:nth-child(3), .steps > .reveal:nth-child(3), .features > .reveal:nth-child(3) { transition-delay: .18s; }
  .tiles > .reveal:nth-child(4), .cards4 > .reveal:nth-child(4), .features > .reveal:nth-child(4) { transition-delay: .27s; }
  .tiles > .reveal:nth-child(5) { transition-delay: .36s; }
  .tiles > .reveal:nth-child(6) { transition-delay: .45s; }
  .tiles > .reveal:nth-child(7) { transition-delay: .54s; }
  .tiles > .reveal:nth-child(8) { transition-delay: .63s; }

  /* WhatsApp nabız */
  .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: wa-pulse 2.6s ease-out infinite; }
  @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
}

/* zarif hover geçişleri */
.btn { transition: transform .22s cubic-bezier(.2,.8,.3,1), background .2s, color .2s, box-shadow .22s, border-color .2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(241,90,34,.34); }
.btn-dark:hover, .btn-outline:hover, .btn-ghost:hover { transform: translateY(-2px); }
.wa-float { transition: transform .2s cubic-bezier(.2,.8,.3,1); }
.wa-float svg { position: relative; z-index: 2; }
.info-card, .partner, .step__ic { transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, color .18s; }
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* slayt içeriği zarif beliriş (Ken Burns'ü tamamlar) */
.header .nav, .header .nav__logo img { transition: height .28s cubic-bezier(.2,.8,.3,1); }
.header.scrolled .nav { height: 64px; }
.header.scrolled .nav__logo img { height: 40px; }

@media (prefers-reduced-motion: no-preference){
  .slide.active .slide__tag { animation: heroUp .7s .10s both cubic-bezier(.22,1,.36,1); }
  .slide.active .slide__box h1, .slide.active .slide__box h2 { animation: heroUp .8s .20s both cubic-bezier(.22,1,.36,1); }
  .slide.active .slide__box p { animation: heroUp .8s .34s both cubic-bezier(.22,1,.36,1); }
  .slide.active .slide__actions { animation: heroUp .8s .48s both cubic-bezier(.22,1,.36,1); }
  @keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

/* =========================================================
   PREMIUM CİLA — tipografi + derinlik (renk/font değişmez)
   ========================================================= */
body { font-size: 16.5px; }
h1, h2, h3, h4 { letter-spacing: -.03em; }
.section-head h2 { font-size: clamp(28px, 4.3vw, 46px); line-height: 1.06; }
.section-head p { font-size: clamp(16px, 1.9vw, 18.5px); }
.slide__box h1, .slide__box h2 { line-height: 1.02; }

/* katmanlı, yumuşak gölgeler = derinlik */
.tile, .card4, .info-card, .prod, .form, .split__media {
  box-shadow: 0 1px 2px rgba(20,23,28,.04), 0 10px 28px -14px rgba(20,23,28,.14);
}
.tile:hover, .card4:hover, .prod:hover {
  box-shadow: 0 20px 46px -16px rgba(20,23,28,.24);
}
.card4__ic, .hero-strip .hstrip__ic { box-shadow: inset 0 0 0 1px rgba(241,90,34,.14); }

/* kartlarda ince üst-vurgu (hover'da açılır) */
.card4 { position: relative; overflow: hidden; }
.card4::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--orange), rgba(241,90,34,0));
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.card4:hover::before { transform: scaleX(1); }

/* koyu bölümlerde ince derinlik ışıması */
.footer { position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; top: -120px; right: -80px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(241,90,34,.10), transparent 65%); pointer-events: none; }
.footer .container { position: relative; z-index: 1; }
.hero-strip { position: relative; overflow: hidden; }
.hero-strip::before { content: ""; position: absolute; left: -60px; bottom: -140px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(241,90,34,.12), transparent 62%); pointer-events: none; }
.hero-strip .container { position: relative; z-index: 1; }

/* =========================================================
   GELİŞMİŞ KATMAN — istatistik, slider progress, to-top, SSS
   ========================================================= */
/* hakkımızda istatistik satırı (count-up) */
.statrow { display: flex; gap: clamp(22px, 4vw, 44px); margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.statrow__item b { display: block; font: 800 clamp(26px, 3.4vw, 36px)/1 var(--font-head); color: var(--orange); letter-spacing: -.02em; }
.statrow__item > span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 500; }

/* slider zamanlama çubuğu */
.slider__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; background: rgba(255,255,255,.14); }
.slider__progress i { display: block; height: 100%; width: 0; background: var(--orange); }
@media (prefers-reduced-motion: no-preference){
  .slider__progress i.run { animation: slideTimer 6s linear forwards; }
  @keyframes slideTimer { from { width: 0; } to { width: 100%; } }
}

/* sayfa kaydırma ilerleme çizgisi (header altı) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange-dark)); transition: width .1s linear; }

/* yukarı dön butonu (sol alt — WhatsApp sağda) */
.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, visibility .25s, transform .25s, background .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--orange); }
.to-top svg { width: 20px; height: 20px; }

/* SSS akordiyon (iletisim) */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; font-weight: 700; font-size: 15.5px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 22px/1 var(--font-head); color: var(--orange); transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.faq .faq__a a { color: var(--orange); font-weight: 600; }

/* ürün grubu WhatsApp teklif butonu */
.prod__cta { margin-top: 18px; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 6px;
  background: #25D366; color: #fff; font: 700 14.5px/1 var(--font-body); white-space: nowrap;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.btn-wa:hover { background: #1DA851; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.30); }
.btn-wa svg { width: 18px; height: 18px; }

/* Teklif formu — gönderim sonrası bilgilendirme */
.form__note--ok { color: #146c2e; font-weight: 600; }

/* =========================================================
   MÜŞTERİ GERİ BİLDİRİMİ DÜZELTMELERİ
   ========================================================= */

/* 1) CİHAZDAN CİHAZA RENK KAYMASI
   Site bir renk şeması beyan etmediği için Android Chrome'un
   "otomatik koyu tema" özelliği sayfayı kendiliğinden karartıp
   renkleri kaydırıyordu. Aşağıdaki beyan bunu kapatır ve site
   her cihazda AYNI renklerde görünür. */
:root { color-scheme: only light; }   /* "only" = tarayıcı bu sayfayı KARARTAMAZ */

/* Bazı tarayıcılar (Android Chrome auto-dark, Samsung Internet, bazı in-app
   tarayıcılar) koyu mod isteğinde sayfayı kendiliğinden ters çeviriyordu.
   Aşağıdaki blok koyu mod isteğinde bile aydınlık paleti sabitler. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body { background: #fff; color: var(--ink); }
  .hero-strip { background: var(--orange-soft); }
  .hstrip, .hstrip b { color: var(--ink); }
  .hstrip span { color: var(--muted); }
  .hstrip__ic { background: #fff; color: var(--orange); }
  .section, .section--soft { background: inherit; }
}
html { background: #fff; }

/* 2) AVANTAJ ŞERİDİ (Güncel Fiyat · Esnek Vade · Hızlı Teslimat · Güvenilir Tedarik)
   Siyah zemin bölümü boğuyor ve dikkat çekmiyordu → sıcak açık zemin,
   koyu metin, beyaz ikon kutusu. Kontrast da yükseldi. */
.hero-strip { background: var(--orange-soft); border-bottom: 1px solid #F4E0D5; }
.hero-strip::before { background: radial-gradient(circle, rgba(241,90,34,.10), transparent 62%); }
.hstrip { color: var(--ink); border-right: 1px solid rgba(27,27,31,.08); }
.hstrip:last-child { border-right: none; }
.hstrip__ic { background: #fff; color: var(--orange); box-shadow: 0 2px 6px rgba(27,27,31,.09); }
.hstrip b { color: var(--ink); }
.hstrip span { color: var(--muted); }
@media (max-width: 860px) { .hstrip:nth-child(2) { border-right: none; } }
@media (max-width: 480px) {
  .hstrip { border-right: none; border-bottom: 1px solid rgba(27,27,31,.08); }
  .hstrip:last-child { border-bottom: none; }
}

/* 3) GERÇEK MARKA LOGOSU
   Logo kare oranlı olduğu için başlıkta biraz büyütüldü. */
.nav__logo img { height: 54px; }
@media (max-width: 640px) { .nav__logo img { height: 46px; } }