/* ==========================================================================
   AY-KA HIRDAVAT VE YAPI MARKET — Ön yüz stilleri
   Renkler logodan ölçülmüştür:
     lacivert  #043874  (oval çerçeve ve "ay-ka" yazısı)
     ay-ka mavisi #018CE3 (logo zemini)
     krem      #FAF4E8  (oval dolgusu)
   Yazı tipi: Manrope (değişken; kalınlık 200–800) — sunucudan,
   Google Fonts'a bağlanmadan yüklenir.
   ========================================================================== */

@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------- belirteçler */
:root {
  /* marka */
  --navy:       #043874;   /* logo laciverti — beyazda 11.6:1 */
  --navy-2:     #0A4A94;
  --navy-deep:  #032A57;   /* koyu zeminler */
  --sky:        #018CE3;   /* logo zemini — ikonlar, vurgu yüzeyleri */
  --sky-deep:   #0A78C8;   /* kahraman zemini — beyaz metin 4.6:1 */
  --sky-ink:    #0067B5;   /* beyazda bağlantı/küçük metin — 5.8:1 */
  --sky-soft:   #E3F1FC;
  --cream:      #FAF4E8;   /* logo dolgusu */
  --cream-2:    #F3EAD6;
  --signal:     #FFC23D;   /* indirim/yeni etiketi — yalnızca küçük işaretler */

  /* metin ve yüzey */
  --ink:        #0D1B2A;
  --ink-2:      #34465A;
  --muted:      #5E6E80;
  --muted-2:    #677789;
  --line:       #DCE5EE;
  --line-2:     #EDF2F7;
  --bg:         #FFFFFF;
  --bg-soft:    #F2F6FA;
  --bg-dark:    var(--navy-deep);
  --dark:       var(--navy-deep);
  --soft:       var(--sky-soft);

  /* eski adlar — mevcut bileşenler bu adlarla çalışır */
  --accent:     var(--navy);
  --accent-ink: var(--sky-ink);
  --accent-soft:var(--sky-soft);
  --brand-900:  #021D3D;
  --brand-800:  #032A57;
  --brand-700:  #043874;
  --brand-600:  #0A4A94;
  --brand-500:  #018CE3;
  --brand-400:  #36A6EC;
  --brand-300:  #7CC7F5;   /* koyu zeminde açık uç */
  --brand-200:  #B9E0FA;

  /* Degrade yok: tasarım düz renk yüzeylerle çalışır. Değişken adları,
     eski bileşenler bozulmasın diye düz renkli "degrade" olarak korunur. */
  --grad-brand:      linear-gradient(var(--navy), var(--navy));
  --grad-brand-hover:linear-gradient(var(--navy-deep), var(--navy-deep));
  --grad-brand-text: linear-gradient(var(--navy), var(--navy));
  --grad-decor:      linear-gradient(var(--sky), var(--sky));
  --grad-glow:       linear-gradient(var(--brand-300), var(--brand-300));
  --grad-dark:       linear-gradient(var(--navy-deep), var(--navy-deep));
  --grad-dark-2:     linear-gradient(var(--navy-deep), var(--navy-deep));
  --grad-soft:       linear-gradient(#fff, #fff);
  --grad-cream:      linear-gradient(var(--bg-soft), var(--bg-soft));
  --grad-line:       linear-gradient(var(--sky), var(--sky));

  --ok:         #0E7A4D;
  --ok-soft:    #E7F5EE;
  --warn:       #A35407;
  --warn-soft:  #FEF5E6;
  --err:        #B42318;
  --err-soft:   #FDEDEB;

  --r-sm: 8px;
  --r:    12px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --pill: 100px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 56px; --sp-8: 80px;

  --sh-sm: 0 1px 2px rgba(4,56,116,.06);
  --sh:    0 1px 2px rgba(4,56,116,.05), 0 8px 22px rgba(4,56,116,.07);
  --sh-lg: 0 2px 4px rgba(4,56,116,.05), 0 22px 48px rgba(4,56,116,.13);

  --wrap: 1280px;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------- temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  font-feature-settings: "kern", "liga";
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-ink); }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3); line-height: 1.12; font-weight: 750; letter-spacing: -.015em; color: inherit; }
h1, h2 { font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(30px, 4.4vw, 48px); }
h2 { font-size: clamp(25px, 3vw, 36px); }
h3 { font-size: 19px; }
p  { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--sky); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
@media (min-width: 760px) { .wrap { padding: 0 24px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; color: #fff; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- düğmeler */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 650; font-size: 15px;
  padding: 13px 26px; border-radius: var(--pill); border: 1.5px solid transparent;
  background: var(--navy); color: #fff; cursor: pointer; text-align: center; line-height: 1.2;
  transition: background .16s, border-color .16s, color .16s;
}
.btn:hover { background: var(--navy-deep); color: #fff; }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; transform: none; }

.btn--accent, .btn--primary { background: var(--navy); color: #fff; border-color: transparent; }
.btn--accent:hover, .btn--primary:hover { background: var(--sky-ink); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: #D9DEE4; }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn--quiet { background: var(--bg-soft); color: var(--ink-2); }
.btn--quiet:hover { background: var(--line-2); color: var(--ink); box-shadow: var(--sh-sm); }
.btn--sm { padding: 9px 18px; font-size: 13.5px; }
.btn--lg { padding: 16px 32px; font-size: 15.5px; }
.btn--block { display: flex; width: 100%; }
.btn--danger { background: #fff; color: var(--err); border-color: #E9C7C7; }
.btn--danger:hover { background: var(--err); color: #fff; border-color: var(--err); box-shadow: none; }

/* --------------------------------------------------------- formlar */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }

.input, input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], input[type=date], select, textarea {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  padding: 12px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; transition: border-color .16s, box-shadow .16s;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea { min-height: 130px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236D7889' stroke-width='1.8' d='M1 1.8 6 6.4l5-4.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field { margin-bottom: var(--sp-4); }
.field__hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: var(--ink-2); }
.check input { width: 17px; height: 17px; margin: 3px 0 0; flex: none; accent-color: var(--accent); }

.grid-2 { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- uyarılar */
.alert {
  padding: 14px 18px; border-radius: var(--r); font-size: 14px;
  border: 1px solid transparent; margin-bottom: var(--sp-4);
}
.alert--ok   { background: var(--ok-soft);   border-color: #C6E6D7; color: #0B5C3B; }
.alert--warn { background: var(--warn-soft); border-color: #F3DFB4; color: #8A4708; }
.alert--err  { background: var(--err-soft);  border-color: #F0C9C9; color: #7E1216; }
.alert--info { background: var(--bg-soft);   border-color: var(--line); color: var(--ink-2); }
.alert ul { margin: 8px 0 0; }

/* --------------------------------------------------------- üst şerit */
.topbar { background: var(--navy); color: #C9DBEF; font-size: 13px; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 38px; }
.topbar__addr { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__addr svg { flex: none; color: var(--brand-300); }
.topbar a { color: #fff; }
.topbar a:hover { color: var(--brand-200); text-decoration: underline; text-underline-offset: 3px; }
.topbar__list { display: flex; gap: 22px; align-items: center; list-style: none; margin: 0; padding: 0; flex: none; }
.topbar__list li { display: flex; align-items: center; gap: 7px; }
@media (max-width: 900px) {
  .topbar__list li.topbar__hide { display: none; }
  .topbar__in { gap: 14px; }
  .topbar { font-size: 12.5px; }
}

/* --------------------------------------------------------- başlık */
.head {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.head__in {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
  gap: 28px; min-height: 92px;
}
.logo { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--navy); }
.logo:hover { color: var(--navy); }
.logo img { height: 64px; width: auto; flex: none; }
.logo__txt {
  font-size: 13.5px; line-height: 1.2; font-weight: 750;
  color: var(--navy); white-space: nowrap; padding-left: 12px; border-left: 2px solid var(--sky);
}

/* arama — ürün aramak sitenin ana işi; başlığın en geniş öğesi */
.search {
  position: relative; display: flex; align-items: center; background: #fff;
  border: 2px solid var(--navy); border-radius: var(--pill); max-width: 720px; width: 100%; justify-self: center;
  transition: box-shadow .16s;
}
.search:focus-within { box-shadow: 0 0 0 4px rgba(1,140,227,.22); }
.search__cat {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 650;
  color: var(--navy); padding: 0 14px 0 20px; cursor: pointer; max-width: 176px; height: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23043874' stroke-width='1.8' d='M1 1.8 6 6.4l5-4.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; padding-right: 22px;
  appearance: none; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none !important;
}
.search__cat:focus { outline: none; }
.search__cat:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
@media (max-width: 900px) { .search__cat { display: none; } }
.search input {
  flex: 1; border: 0; background: transparent; padding: 12px 16px; font-size: 15px; min-width: 0; height: 46px;
}
.search input:focus { box-shadow: none; outline: none; }
.search input::placeholder { color: var(--muted-2); }
.search button {
  flex: none; width: 42px; height: 42px; margin-right: 3px; border: 0; border-radius: 50%;
  background: var(--sky); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background .16s;
}
.search button:hover { background: var(--navy); }

.head__acts { display: flex; align-items: center; gap: 8px; }
.head__call {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; margin-right: 6px;
  border-radius: var(--pill); background: var(--cream); color: var(--navy); white-space: nowrap;
}
.head__call svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--navy); color: #fff; flex: none; }
.head__call span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.head__call small { font-size: 11.5px; font-weight: 550; color: var(--ink-2); }
.head__call:hover { background: var(--cream-2); color: var(--navy); }
@media (max-width: 1240px) { .head__call { display: none; } }

.iconbtn {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--navy);
  display: grid; place-items: center; cursor: pointer; font-family: inherit;
  transition: border-color .16s, background .16s;
}
.iconbtn:hover { border-color: var(--navy); color: var(--navy); }
.iconbtn svg { width: 21px; height: 21px; }
.iconbtn--cart { background: var(--navy); border-color: var(--navy); color: #fff; }
.iconbtn--cart:hover { background: var(--sky-ink); border-color: var(--sky-ink); color: #fff; }
.iconbtn__label { display: none; }
.badge[hidden] { display: none; }
.badge {
  position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--signal); color: var(--navy-deep); border: 2px solid #fff; border-radius: 11px;
  font-size: 11.5px; font-weight: 800; display: grid; place-items: center; line-height: 1;
}
.burger { display: grid; }
@media (min-width: 1024px) { .burger { display: none; } }

@media (max-width: 900px) {
  .head__in {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas: "burger logo acts" "search search search";
    row-gap: 10px; gap: 10px; min-height: 0; padding-top: 10px; padding-bottom: 12px;
  }
  .burger { grid-area: burger; }
  .logo   { grid-area: logo; }
  .head__acts { grid-area: acts; justify-self: end; }
  .search { grid-area: search; max-width: none; }
  .logo img { height: 46px; }
  .iconbtn { width: 42px; height: 42px; }
  .search input { height: 42px; padding: 10px 14px; }
  .search button { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
  .logo__txt { font-size: 12px; padding-left: 9px; }
  .logo img { height: 40px; }
  .head__acts { gap: 6px; }
}
@media (max-width: 350px) { .logo__txt { display: none; } }

/* --------------------------------------------------------- kategori menüsü */
.nav { background: #fff; border-bottom: 1px solid var(--line); display: none; }
@media (min-width: 1024px) { .nav { display: block; } }
.nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; align-items: center; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 7px; padding: 15px 13px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px;
  background: var(--sky); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .18s;
}
.nav__link:hover { color: var(--navy); }
.nav__item:hover > .nav__link::after, .nav__item:focus-within > .nav__link::after { transform: scaleX(1); }
.nav__link--all {
  background: var(--navy); color: #fff; border-radius: var(--pill); padding: 9px 18px; margin-right: 10px;
}
.nav__link--all:hover { background: var(--sky-ink); color: #fff; }
.nav__link--all::after { display: none; }
.nav__drop {
  position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg);
  padding: 8px; list-style: none; margin: 0; z-index: 40;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility .16s;
}
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a { display: block; padding: 9px 14px; font-size: 14.5px; border-radius: var(--r-sm); color: var(--ink-2); }
.nav__drop a:hover { background: var(--sky-soft); color: var(--navy); }

/* --------------------------------------------------------- mobil menü */
.mnav { position: fixed; inset: 0; z-index: 100; background: rgba(16,20,24,.5); opacity: 0; visibility: hidden; transition: opacity .2s; }
.mnav.is-open { opacity: 1; visibility: visible; }
.mnav__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(340px, 88vw); background: #fff;
  transform: translateX(-100%); transition: transform .24s ease; overflow-y: auto; display: flex; flex-direction: column;
}
.mnav.is-open .mnav__panel { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.mnav__body { padding: 8px 0 28px; }
.mnav__link { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 15px; font-weight: 550; border-bottom: 1px solid var(--line-2); }
.mnav__sub { list-style: none; margin: 0; padding: 0 0 10px; background: var(--bg-soft); display: none; }
.mnav__sub.is-open { display: block; }
.mnav__sub a { display: block; padding: 11px 20px 11px 34px; font-size: 14px; color: var(--ink-2); }
.mnav__toggle { background: none; border: 0; padding: 7px; cursor: pointer; color: var(--muted); }

/* --------------------------------------------------------- hızlı sipariş (A'dan) */
.quick { background: var(--cream); border-bottom: 1px solid var(--line); }
.quick__in { display: flex; align-items: center; gap: 18px; padding: 14px 0; flex-wrap: wrap; }
.quick__t { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14px; white-space: nowrap; }
.quick__t i {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none;
}
.quick form { display: flex; gap: 8px; flex: 1; min-width: 300px; }
.quick input { border-radius: var(--pill); padding: 11px 18px; font-size: 14px; background: #fff; }
.quick input.quick__qty { max-width: 92px; flex: none; text-align: center; font-weight: 600; }
.quick .btn { padding: 11px 22px; font-size: 14px; }
.quick__hint { font-size: 13px; color: var(--muted); }
.quick__hint a { color: var(--accent-ink); font-weight: 600; }
@media (max-width: 860px) {
  .quick__hint { display: none; }
  .quick__in { gap: 12px; padding: 12px 0; }
  .quick form { flex-wrap: wrap; min-width: 0; width: 100%; }
  .quick form input[name="kod"] { flex: 1 1 100%; }
  .quick input.quick__qty { max-width: 84px; }
  .quick .btn { flex: 1; }
}

/* --------------------------------------------------------- kırıntı yolu */
.crumb { font-size: 13.5px; color: var(--muted); padding: 20px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb span { color: var(--muted-2); }

/* --------------------------------------------------------- kahraman */
.hero { position: relative; background: var(--cream); overflow: hidden; }
.hero__in { display: grid; gap: 40px; padding: var(--sp-8) 0; align-items: center; }
@media (min-width: 980px) { .hero__in { grid-template-columns: 1.05fr .95fr; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--sp-5);
}
.hero__eyebrow::before { content: ""; width: 30px; height: 1.5px; background: var(--accent); }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.03; margin-bottom: var(--sp-5); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { font-size: 16.5px; color: var(--muted); max-width: 46ch; margin: 0 0 var(--sp-6); line-height: 1.65; }
.hero__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* kahraman sahnesi + yüzen rozetler */
.hstage { position: relative; aspect-ratio: 1/.9; display: grid; place-items: center; }
.hstage::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, rgba(255,255,255,0) 70%),
              linear-gradient(140deg, var(--accent-soft), #EEF2F6);
}
.hstage img { position: relative; width: 64%; object-fit: contain; filter: drop-shadow(0 26px 44px rgba(16,20,24,.20)); }
.hchip {
  position: absolute; background: #fff; border-radius: 16px; padding: 12px 16px;
  box-shadow: var(--sh); display: flex; gap: 11px; align-items: center;
}
.hchip b { display: block; font-size: 14px; font-weight: 650; }
.hchip span { font-size: 12px; color: var(--muted); }
.hchip i { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.hchip--1 { top: 6%; left: -2%; }
.hchip--2 { bottom: 16%; right: -3%; }
.hchip--3 { bottom: 0; left: 6%; }
@media (max-width: 640px) {
  .hchip--1 { left: 0; }
  .hchip--2 { right: 0; }
  .hchip--3 { display: none; }
  .hchip { padding: 10px 13px; }
  .hstage { aspect-ratio: 1/.78; }
  .hstage img { width: 58%; }
}

/* eski istatistik kutusu (yedek) */
.hero__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.hero__stat { background: #fff; padding: 22px 18px; }
.hero__stat b { display: block; font-size: 26px; letter-spacing: -.03em; }
.hero__stat span { font-size: 12.5px; color: var(--muted); }

/* --------------------------------------------------------- güven şeridi */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust__in { display: grid; grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px) { .trust__in { grid-template-columns: repeat(4,1fr); } }
.trust__i { padding: 26px 24px; display: flex; gap: 14px; align-items: flex-start; border-right: 1px solid var(--line); }
.trust__i:last-child { border-right: 0; }
@media (max-width: 899px) { .trust__i:nth-child(2n) { border-right: 0; } .trust__i:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.trust__i svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.trust__i b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.trust__i span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------- bölümler */
.sec { padding: var(--sp-8) 0; }
.sec--soft { background: var(--bg-soft); }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.sec__head h2 { margin: 0; }
.sec__head p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.sec__more {
  font-size: 14.5px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1.5px solid var(--accent); padding-bottom: 3px;
}
.sec__more:hover { color: var(--accent-ink); }

/* --------------------------------------------------------- kategori kartları */
.cats { display: grid; gap: 16px; grid-template-columns: repeat(2,1fr); }
@media (min-width: 700px) { .cats { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px) { .cats { grid-template-columns: repeat(4,1fr); } }
.cat {
  position: relative; overflow: hidden; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--sh); padding: 26px; min-height: 180px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .25s, box-shadow .25s;
}
.cat:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); color: var(--ink); }
.cat__img { position: absolute; right: -8px; top: -6px; width: 48%; height: auto; display: grid; place-items: center; transition: transform .35s; }
.cat:hover .cat__img { transform: scale(1.06) rotate(-3deg); }
.cat__img img { max-height: 120px; width: auto; object-fit: contain; }
.cat__ph {
  width: 62px; height: 62px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 800; font-size: 19px;
}
.cat b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; display: block; position: relative; margin-bottom: 3px; }
.cat span { font-size: 13px; color: var(--muted); position: relative; }
.cat--wide { grid-column: span 2; }
.cat--dark { background: var(--bg-dark); color: #fff; }
.cat--dark:hover { color: #fff; }
.cat--dark span { color: #98A2B0; }

/* --------------------------------------------------------- ürün kartları */
.plist { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (min-width: 700px)  { .plist { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px) { .plist { grid-template-columns: repeat(4,1fr); } }
.plist--5 { grid-template-columns: repeat(2,1fr); }
@media (min-width: 700px)  { .plist--5 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1040px) { .plist--5 { grid-template-columns: repeat(5,1fr); } }

.card {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh);
  transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.card__media { position: relative; display: block; aspect-ratio: 1/1; background: var(--cream); padding: 22px; }
.card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.card:hover .card__media img { transform: scale(1.06); }
.card__tags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--pill); background: var(--ink); color: #fff; align-self: flex-start;
}
.tag--new  { background: var(--ok); }
.tag--sale { background: var(--grad-brand); }
.tag--out  { background: var(--muted); }

.card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.card__cat { font-size: 11px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.card__title {
  font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.8em;
}
.card__sku { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* teknik özellik etiketleri (A'dan) */
.specs { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; }
.specs .spec { width: auto; flex: 0 0 auto; }
.specs .spec {
  font-size: 10.5px; background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink-2); padding: 3px 8px; border-radius: var(--pill); font-weight: 550;
}

/* stok göstergesi (A'dan) */
.stockline { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: var(--ok); }
.stockline--low { color: var(--warn); }
.stockline--out { color: var(--err); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.dot--low { background: var(--warn); }
.dot--out { background: var(--err); }

.card__price { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price { font-size: 20px; font-weight: 750; letter-spacing: -.03em; }
.price small { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.price--old { font-size: 13.5px; color: var(--muted-2); text-decoration: line-through; font-weight: 500; }
.price--ask { font-size: 14.5px; font-weight: 650; color: var(--accent-ink); }
.card__foot { display: flex; gap: 7px; margin-top: 12px; align-items: stretch; }
.card__foot .btn { flex: 1; padding: 11px 12px; font-size: 13.5px; }

/* kart içi adet kutusu (A'dan) */
.qty--mini { flex: none; border-radius: var(--pill); }
.qty--mini button { width: 30px; font-size: 15px; }
.qty--mini input { width: 34px; font-size: 13px; padding: 8px 0; }

/* --------------------------------------------------------- listeleme */
.shop { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 980px) { .shop { grid-template-columns: 262px 1fr; gap: var(--sp-6); } }

.side { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); }
.side__block + .side__block { border-top: 1px solid var(--line); }
.side__title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 18px 20px 10px; margin: 0; }
.side__list { list-style: none; margin: 0; padding: 0 10px 14px; }
.side__list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2); }
.side__list a:hover { background: var(--bg-soft); color: var(--accent-ink); }
.side__list a.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.side__list em { font-style: normal; color: var(--muted-2); font-size: 12px; }
.side__body { padding: 0 20px 20px; }

.sidetoggle { display: flex; width: 100%; }
@media (min-width: 980px) { .sidetoggle { display: none; } }
@media (max-width: 979px) { .side.is-collapsed { display: none; } }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 0 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5);
}
.toolbar__count { font-size: 14px; color: var(--muted); }
.toolbar__count b { color: var(--ink); font-weight: 700; }
.toolbar__right { display: flex; align-items: center; gap: 10px; }
.toolbar select { width: auto; min-width: 180px; font-size: 13.5px; padding: 10px 34px 10px 14px; border-radius: var(--pill); }

.empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--muted); background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.empty svg { width: 52px; height: 52px; color: var(--muted-2); margin: 0 auto var(--sp-4); }
.empty h3 { color: var(--ink); font-size: 21px; }

/* --------------------------------------------------------- sayfalama */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: var(--sp-7) 0 0; }
.pager__i {
  min-width: 42px; height: 42px; padding: 0 12px; display: grid; place-items: center;
  border: 1.5px solid var(--line); border-radius: var(--pill); font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: #fff; transition: .16s;
}
.pager__i:hover { border-color: var(--ink); color: var(--ink); }
.pager__i.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager__gap { display: grid; place-items: center; min-width: 26px; color: var(--muted-2); }

/* --------------------------------------------------------- ürün detay */
.pd { display: grid; gap: var(--sp-7); }
@media (min-width: 940px) { .pd { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.gallery__main {
  border-radius: var(--r-xl); background: var(--cream); aspect-ratio: 1/1;
  display: grid; place-items: center; padding: 40px; overflow: hidden; box-shadow: var(--sh-sm);
}
.gallery__main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.gallery__thumb {
  width: 76px; height: 76px; border: 1.5px solid var(--line); border-radius: var(--r);
  padding: 7px; background: #fff; cursor: pointer; transition: .16s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.pd__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--muted); margin-bottom: var(--sp-4); }
.pd__meta b { color: var(--ink-2); font-weight: 650; }
.pd h1 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: var(--sp-3); }

.pricebox { background: var(--cream); border-radius: var(--r-lg); padding: 24px; margin: var(--sp-5) 0; }
.pricebox__main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pricebox__big { font-size: 36px; font-weight: 780; letter-spacing: -.04em; }
.pricebox__vat { font-size: 13.5px; color: var(--muted); }
.pricebox__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(16,20,24,.07); }
.pricebox__row b { color: var(--ink-2); }

.buyrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin: var(--sp-5) 0; }
.qty { display: flex; border: 1.5px solid var(--line); border-radius: var(--pill); overflow: hidden; background: #fff; }
.qty button { width: 44px; border: 0; background: #fff; cursor: pointer; font-size: 19px; color: var(--ink-2); transition: background .15s; }
.qty button:hover { background: var(--bg-soft); }
.qty input { width: 56px; border: 0; text-align: center; font-weight: 650; padding: 12px 0; background: transparent; }
.qty input:focus { box-shadow: none; }
.buyrow .btn--accent { flex: 1; min-width: 200px; }

.tabs { margin-top: var(--sp-8); }
.tabs__nav { display: flex; gap: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs__btn {
  padding: 13px 20px; font: inherit; font-size: 14.5px; font-weight: 650; color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.tabs__btn.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs__panel { padding: var(--sp-6) 0; display: none; }
.tabs__panel.is-active { display: block; }

table.spec { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
table.spec th, table.spec td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec th { width: 40%; font-weight: 650; color: var(--ink-2); background: var(--bg-soft); }
table.spec tr:first-child th { border-top-left-radius: var(--r); }
table.spec tr:last-child th { border-bottom-left-radius: var(--r); }

.prose { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); max-width: 74ch; }
.prose h2, .prose h3 { color: var(--ink); margin-top: var(--sp-6); }
.prose img { border-radius: var(--r); margin: var(--sp-4) 0; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; }

/* --------------------------------------------------------- sepet */
.cart { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 980px) { .cart { grid-template-columns: 1fr 370px; gap: var(--sp-6); } }

.cartlist { border-radius: var(--r-lg); background: #fff; overflow: hidden; box-shadow: var(--sh); }
.cartrow { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line-2); align-items: start; }
.cartrow:last-child { border-bottom: 0; }
@media (min-width: 720px) { .cartrow { grid-template-columns: 88px 1fr 140px 130px 40px; align-items: center; } }
.cartrow__img { width: 88px; height: 88px; border-radius: var(--r); background: var(--cream); padding: 10px; }
.cartrow__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cartrow__name { font-size: 15px; font-weight: 650; line-height: 1.4; }
.cartrow__sku { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.cartrow__tot { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; }
.cartrow__del { background: none; border: 0; color: var(--muted-2); cursor: pointer; padding: 8px; border-radius: 50%; }
.cartrow__del:hover { color: var(--err); background: var(--err-soft); }
@media (max-width: 719px) {
  .cartrow__mobile { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
}

.summary { border-radius: var(--r-lg); background: #fff; padding: 24px; position: sticky; top: 104px; box-shadow: var(--sh); }
.summary h3 { font-size: 17px; margin-bottom: var(--sp-4); }
.summary__row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 8px 0; color: var(--ink-2); }
.summary__row b { font-variant-numeric: tabular-nums; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px; margin-top: 10px; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 650; }
.summary__total b { font-size: 26px; letter-spacing: -.03em; }
.summary .btn { margin-top: var(--sp-5); }

.progress { height: 7px; background: var(--line-2); border-radius: var(--pill); overflow: hidden; margin: 10px 0 4px; }
.progress i { display: block; height: 100%; background: var(--ok); border-radius: var(--pill); transition: width .3s; }

.coupon { display: flex; gap: 8px; margin-top: var(--sp-4); }
.coupon input { flex: 1; border-radius: var(--pill); }

/* --------------------------------------------------------- ödeme adımları */
.steps { display: flex; gap: 8px; justify-content: center; margin: var(--sp-5) 0 var(--sp-7); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.step i { width: 28px; height: 28px; border-radius: 50%; background: var(--line-2); color: var(--muted); display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; }
.step.is-active { color: var(--ink); font-weight: 650; }
.step.is-active i { background: var(--accent); color: #fff; }
.step.is-done i { background: var(--ok); color: #fff; }
.step::after { content: ""; width: 30px; height: 1px; background: var(--line); margin-left: 8px; }
.step:last-child::after { display: none; }

.panel { border-radius: var(--r-lg); background: #fff; padding: 26px; margin-bottom: var(--sp-4); box-shadow: var(--sh); }
.panel__title { font-size: 16.5px; font-weight: 700; margin-bottom: var(--sp-5); display: flex; align-items: center; gap: 10px; }

.payopt { display: block; border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px 18px; cursor: pointer; margin-bottom: 12px; transition: border-color .16s, background .16s, box-shadow .16s; }
.payopt:hover { border-color: var(--muted-2); }
.payopt input { display: none; }
.payopt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.payopt b { display: block; font-size: 15px; margin-bottom: 2px; }
.payopt span { font-size: 13.5px; color: var(--muted); }

/* --------------------------------------------------------- hesabım */
.acct { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .acct { grid-template-columns: 250px 1fr; gap: var(--sp-6); } }
.acctnav { border-radius: var(--r-lg); background: #fff; padding: 10px; box-shadow: var(--sh); }
.acctnav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--ink-2); }
.acctnav a:hover { background: var(--bg-soft); }
.acctnav a.is-active { background: var(--ink); color: #fff; font-weight: 650; }
.acctnav svg { width: 18px; height: 18px; flex: none; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
.table td { padding: 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table--card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 5px 12px; border-radius: var(--pill); background: var(--bg-soft); color: var(--ink-2); }
.chip--ok   { background: var(--ok-soft);   color: #0B5C3B; }
.chip--warn { background: var(--warn-soft); color: #8A4708; }
.chip--err  { background: var(--err-soft);  color: #7E1216; }
.chip--info { background: #EAF2FD; color: #1B4F9C; }

/* --------------------------------------------------------- bayi bandı */
.split { display: grid; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; } }
.split__l { background: var(--bg-dark); color: #fff; padding: 56px 48px; position: relative; overflow: hidden; }
.split__l::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 340px at 100% 0, rgba(4,56,116,.22), transparent 60%); }
.split__l > * { position: relative; }
.split__l h2 { color: #fff; margin-bottom: var(--sp-4); }
.split__l p { color: #A9B2BE; margin: 0 0 var(--sp-6); font-size: 15.5px; }
.split__r { background: var(--cream); padding: 46px 44px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
@media (max-width: 899px) { .split__l, .split__r { padding: 38px 26px; } }
.li { display: flex; gap: 15px; align-items: flex-start; }
.li i { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; font-size: 13.5px; font-weight: 700; font-style: normal; }
.li b { display: block; font-size: 15px; margin-bottom: 2px; }
.li span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------- markalar */
.brands { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.brandpill {
  padding: 16px 28px; border: 1.5px solid var(--line); border-radius: var(--pill);
  font-weight: 650; font-size: 15px; color: var(--muted); background: #fff; transition: .18s;
  display: flex; align-items: center; gap: 10px;
}
.brandpill:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh); }
.brandpill img { max-height: 26px; width: auto; }

/* --------------------------------------------------------- alt bilgi */
.foot { background: var(--navy-deep); color: #C3D3E6; margin-top: var(--sp-8); font-size: 15px; }
.foot__top { display: grid; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
@media (min-width: 760px)  { .foot__top { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .foot__top { grid-template-columns: 1.45fr 1fr 1fr 1fr; } }
.foot__logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #fff; }
.foot__logo img { height: 64px; width: auto; }
.foot__logo span { font-size: 14px; line-height: 1.2; font-weight: 750; padding-left: 12px; border-left: 2px solid var(--sky); }
.foot__logo:hover { color: #fff; }
.foot__about { max-width: 38ch; margin: 0 0 22px; line-height: 1.65; }
.foot__nl-lb { color: #fff; font-size: 13.5px; font-weight: 650; margin-bottom: 8px; }

/* iletişim şeridi — boş bırakılan alan görünmez */
.foot__info {
  display: grid; gap: 18px; grid-template-columns: minmax(0,1fr);
  padding-top: 28px; padding-bottom: 30px; border-top: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 640px)  { .foot__info { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 32px; } }
@media (min-width: 1000px) { .foot__info { grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 28px; } }
.foot__info-i { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: #DCE6F2; }
.foot__info-i b { display: block; margin-bottom: 3px; color: var(--brand-300); font-size: 13px; font-weight: 700; }
.foot__info-i a { color: #fff; }
.foot__info-i a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__tel { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.foot__dir { display: inline-block; margin-top: 6px; font-weight: 650; color: var(--brand-300) !important; }
.foot__info-soft { color: #A9BCD2; font-size: 13.5px; }
.foot__info-ic {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: var(--brand-300);
}
.foot__info-ic svg { width: 20px; height: 20px; }
.foot h4 { color: #fff; font-size: 15px; font-weight: 750; letter-spacing: 0; text-transform: none; margin-bottom: 16px; }
.foot a { color: #DCE6F2; }
.foot a:hover { color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; }
.foot__bar { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; padding-bottom: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: #A9BCD2; }

.nl { margin-top: 4px; max-width: 420px; }
.nl__row { display: flex; gap: 8px; }
.nl input { flex: 1; min-width: 0; border: 1.5px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); border-radius: var(--pill); padding: 11px 18px; font-size: 14.5px; color: #fff; }
.nl input::placeholder { color: #9FB4CC; }
.nl input:focus { border-color: var(--brand-300); box-shadow: none; background: rgba(255,255,255,.1); }
.nl button { border: 0; background: var(--sky); color: #fff; border-radius: var(--pill); padding: 0 20px; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.nl button:hover { background: #fff; color: var(--navy); }

/* --------------------------------------------------------- bildirim */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 120%);
  visibility: hidden; opacity: 0;
  background: var(--ink); color: #fff; padding: 14px 24px; border-radius: var(--pill);
  font-size: 14.5px; font-weight: 550; box-shadow: var(--sh-lg); z-index: 200;
  transition: transform .28s ease, opacity .2s ease; max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; opacity: 1; }
.toast--err { background: var(--err); }

/* --------------------------------------------------------- yazdırma */
@media print {
  .head, .nav, .topbar, .quick, .foot, .btn, .toolbar, .side { display: none !important; }
  body { font-size: 12px; }
  .panel, .summary, .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================================
   ÜRÜN YORUMLARI
   ============================================================ */
.revs { max-width: 760px; }
.stars { color: #F5A524; letter-spacing: 1px; font-size: 14px; }

.revs__top { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center;
  background: #fff; border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); margin-bottom: var(--sp-5); }
.revs__score { text-align: center; min-width: 128px; }
.revs__score b { display: block; font-size: 38px; line-height: 1.05; letter-spacing: -1px; }
.revs__score .stars { font-size: 17px; }
.revs__score small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.revs__bars { flex: 1; min-width: 220px; display: grid; gap: 5px; }
.revs__bar { display: grid; grid-template-columns: auto 1fr 28px; align-items: center; gap: 10px; }
.revs__bar i { display: block; height: 7px; border-radius: 100px; background: var(--line); overflow: hidden; }
.revs__bar i b { display: block; height: 100%; border-radius: 100px; background: #F5A524; }
.revs__bar small { color: var(--muted); font-size: 12px; text-align: right; }

.rev { background: #fff; border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); margin-bottom: var(--sp-3); }
.rev__head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rev__head b { font-size: 14px; }
.rev__head time { color: var(--muted); font-size: 12px; margin-left: auto; }
.rev__title { margin: 8px 0 4px; font-size: 15px; }
.rev__body { margin: 6px 0 0; color: var(--ink-2, #444); line-height: 1.65; font-size: 14px; }
.rev__reply { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--accent);
  background: var(--soft); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 13.5px; line-height: 1.6; }

.rev__form { background: #fff; border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); margin-top: var(--sp-5); }
.rev__form h3 { margin: 0 0 var(--sp-4); font-size: 17px; }
.rev__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.rev__form .field { display: block; margin-bottom: var(--sp-3); }
.rev__form .field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.rev__form .small { font-size: 12px; margin: 8px 0 0; }

@media (max-width: 620px) {
  .rev__grid { grid-template-columns: 1fr; }
  .revs__score { min-width: 100%; }
}

/* ============================================================
   KAHRAMAN ALANI (hs)
   Tam genişlik fotoğraf + lacivert örtü. Solda başlık, sağda cam kartlar,
   altta kontrol çubuğu / slogan / sabit butonlar. Slaytlar üst üste
   (grid-area 1/1) durur; yükseklik en uzun slayta göre kendiliğinden ayarlanır.
   ============================================================ */
.hs {
  --hs-pad: clamp(24px, 3.6vw, 60px);
  --hs-cards: 400px;
  --hs-ui: 176px;                       /* alt şeridin kapladığı yükseklik */
  position: relative; margin: 16px auto 0; max-width: 1880px; padding: 0 20px;
}
.hs__track {
  display: grid; position: relative; isolation: isolate;
  border-radius: 28px; overflow: hidden; background: var(--navy-deep); color: #fff;
}
.hs__slide {
  grid-area: 1 / 1; position: relative; min-height: clamp(600px, 80vh, 740px);
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s;
}
.hs__slide.is-on, .hs__slide:only-child { opacity: 1; visibility: visible; }

.hs__bg { position: absolute; inset: 0; display: block; }
.hs__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  transform: scale(1.05); transition: transform 8s ease-out;
}
.hs__slide.is-on .hs__bg img { transform: scale(1); }
.hs__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,24,50,.94) 0%, rgba(3,24,50,.80) 34%, rgba(3,24,50,.38) 64%, rgba(3,24,50,.30) 100%),
    linear-gradient(0deg, rgba(3,24,50,.88) 0%, rgba(3,24,50,0) 42%),
    linear-gradient(180deg, rgba(3,24,50,.55) 0%, rgba(3,24,50,0) 24%);
  background-color: rgba(3,24,50, calc(var(--ov, .3) * .45));
}

.hs__in {
  position: relative; z-index: 1; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--hs-cards); grid-template-rows: auto 1fr;
  gap: 28px 48px; padding: calc(var(--hs-pad) * .7) var(--hs-pad) var(--hs-ui);
}
.hs__eyes {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 24px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.hs__content { grid-column: 1; grid-row: 2; align-self: center; max-width: 820px; min-width: 0; }
.hs__badge {
  display: inline-block; margin-bottom: 22px; padding: 9px 16px; border-radius: var(--pill);
  background: var(--sky-deep); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.hs__title {
  margin: 0; color: #fff; font-weight: 800; letter-spacing: -.035em; line-height: 1.12;
  font-size: clamp(38px, 4.3vw, 74px); text-wrap: balance;
}
/* Vurgu kutusu Manrope ölçülerine göre çizilir (ascent 1.066em, descent .3em):
   taban çizgisinin .88em üstünden .24em altına kadar — üst satırın kuyruklarına binmez. */
.hs__title mark {
  color: #fff; padding: 0 .16em; margin: 0 .02em;
  background: linear-gradient(var(--sky), var(--sky)) 0 .186em / 100% 1.12em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hs__sub { margin: 20px 0 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(255,255,255,.92); max-width: 54ch; }
.hs__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hs__btn, .hs__cta {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  border-radius: var(--pill); padding: 7px 7px 7px 22px; font-size: 16px; font-weight: 700;
  transition: background .18s, color .18s, border-color .18s;
}
.hs__btn i, .hs__cta i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; transition: transform .2s; }
.hs__btn:hover i, .hs__cta:hover i { transform: rotate(45deg); }
.hs__btn { color: #fff; border: 1.5px solid rgba(255,255,255,.6); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hs__btn i { background: #fff; color: var(--navy); }
.hs__btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hs__btn:hover i { background: var(--navy); color: #fff; }

/* sağdaki cam kartlar */
.hs__cards { grid-column: 2; grid-row: 2; align-self: end; display: grid; gap: 14px; margin-bottom: calc(var(--hs-pad) * .7 - var(--hs-ui)); }
.hs__card {
  position: relative; display: block; padding: 22px 76px 22px 24px; border-radius: 22px; color: #fff;
  background: rgba(4,32,66,.55); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background .18s, border-color .18s;
}
a.hs__card:hover { background: rgba(4,32,66,.75); border-color: rgba(255,255,255,.4); color: #fff; }
.hs__card-lb {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--brand-300);
}
.hs__card-lb svg { width: 17px; height: 17px; flex: none; }
.hs__card-v { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.12; font-variant-numeric: tabular-nums; }
.hs__card--sm .hs__card-v { font-size: 21px; letter-spacing: -.015em; }
.hs__card-s { display: block; margin-top: 6px; font-size: 15px; color: rgba(255,255,255,.86); }
.hs__card-go {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy);
}

/* alt şerit — tüm slaytlarda sabit */
.hs__ui {
  position: absolute; z-index: 2; left: calc(20px + var(--hs-pad)); bottom: calc(var(--hs-pad) * .7);
  right: calc(20px + var(--hs-pad) + var(--hs-cards) + 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 26px 24px; pointer-events: none;
}
.hs__ui > * { pointer-events: auto; }
.hs__ctrl { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.hs__nav {
  width: 50px; height: 50px; border-radius: 50%; flex: none; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.04); color: #fff;
  display: grid; place-items: center; transition: background .16s, color .16s, border-color .16s;
}
.hs__nav:hover { background: #fff; color: var(--navy); border-color: #fff; }
.hs__pause { margin-left: 4px; }
.hs__pause .hs__ic-play { display: none; }
.hs.is-paused .hs__pause .hs__ic-play { display: block; }
.hs.is-paused .hs__pause .hs__ic-pause { display: none; }
.hs__dots { display: flex; align-items: center; gap: 4px; }
.hs__dot { border: 0; background: none; padding: 10px 6px; cursor: pointer; line-height: 0; }
.hs__dot i { display: block; width: 9px; height: 9px; border-radius: 9px; background: rgba(255,255,255,.5); transition: width .3s, background .3s; }
.hs__dot:hover i { background: rgba(255,255,255,.85); }
.hs__dot.is-on i { width: 30px; background: #fff; }

.hs__tag { margin: 0; color: #fff; font-size: clamp(24px, 2.1vw, 36px); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; max-width: 22ch; }
.hs__tag em { font-style: normal; color: var(--brand-300); }
.hs__acts { display: flex; gap: 12px; }
.hs__cta { background: #fff; color: var(--navy); padding-left: 26px; }
.hs__cta i { background: var(--navy); color: #fff; }
.hs__cta:hover { background: var(--cream); color: var(--navy); }
.hs__cta--ghost { background: rgba(255,255,255,.06); color: #fff; border: 1.5px solid rgba(255,255,255,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hs__cta--ghost i { background: #fff; color: var(--navy); }
.hs__cta--ghost:hover { background: #fff; color: var(--navy); }

/* ---- dar masaüstü: slogan gizlenir, kontroller ve butonlar tek satır */
@media (max-width: 1400px) {
  .hs { --hs-cards: 360px; --hs-ui: 116px; }
  .hs__tag { display: none; }
  .hs__ui { grid-template-columns: auto auto; justify-content: space-between; }
  .hs__ctrl { grid-column: 1; }
  .hs__acts { grid-column: 2; }
}
/* ---- tablet: kartlar gizlenir */
@media (max-width: 1100px) {
  .hs__in { grid-template-columns: minmax(0, 1fr); }
  .hs__cards { display: none; }
  .hs__ui { right: calc(20px + var(--hs-pad)); }
}
/* ---- telefon */
@media (max-width: 760px) {
  .hs { --hs-pad: 22px; --hs-ui: 150px; padding: 0 10px; margin-top: 10px; }
  .hs__track { border-radius: 22px; }
  .hs__slide { min-height: 620px; }
  .hs__bg img { object-position: 62% 50%; }
  .hs__veil {
    background:
      linear-gradient(0deg, rgba(3,24,50,.96) 0%, rgba(3,24,50,.78) 46%, rgba(3,24,50,.45) 100%);
  }
  .hs__in { padding-top: 22px; gap: 20px; }
  .hs__eyes { font-size: 11px; letter-spacing: .16em; }
  .hs__eyeR { display: none; }
  .hs__content { align-self: end; }
  .hs__badge { font-size: 11px; padding: 7px 12px; margin-bottom: 16px; }
  .hs__title { font-size: clamp(31px, 8.6vw, 42px); }
  .hs__sub { font-size: 15.5px; margin-top: 14px; }
  .hs__btns { margin-top: 22px; }
  .hs__ui { left: calc(10px + var(--hs-pad)); right: calc(10px + var(--hs-pad)); bottom: 20px;
            grid-template-columns: 1fr; justify-content: stretch; gap: 16px; }
  .hs__ctrl, .hs__acts { grid-column: 1; }
  .hs__nav { width: 42px; height: 42px; }
  .hs__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hs__cta { justify-content: space-between; padding-left: 18px; font-size: 15px; }
  .hs:not(.hs--multi) { --hs-ui: 92px; }
}
@media (max-width: 380px) {
  .hs__acts { grid-template-columns: 1fr; }
  .hs { --hs-ui: 208px; }
  .hs:not(.hs--multi) { --hs-ui: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs__slide { transition: none; }
  .hs__bg img { transition: none; transform: none; }
}

/* ============================================================
   REFERANS LOGO ŞERİDİ (slider altı)
   ============================================================ */
.refs { border-bottom: 1px solid var(--line); background: #fff; }
.refs__in {
  display: flex; align-items: center; gap: var(--sp-7);
  padding: 22px 0; flex-wrap: nowrap;
}
.refs__t { flex: none; min-width: 190px; }
.refs__t span {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.refs__t h2 {
  margin: 0; font-size: 25px; letter-spacing: -.02em; position: relative; padding-bottom: 8px;
}
.refs__t h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px;
  border-radius: 100px; background: var(--accent);
}
.refs__logos {
  flex: 1; min-width: 0; overflow: hidden; position: relative;
  display: flex; gap: var(--sp-7);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
.refs__track {
  flex: none; display: flex; align-items: center; gap: var(--sp-7);
  padding-right: var(--sp-7);
  animation: refsKay 46s linear infinite;
  will-change: transform;
}
@keyframes refsKay { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.refs__logos:hover .refs__track,
.refs__logos:focus-within .refs__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .refs__track { animation: none; }
  .refs__logos { overflow-x: auto; }
}
.refs__logo {
  flex: none; display: grid; place-items: center; height: 46px;
  opacity: .55; filter: grayscale(1); transition: opacity .22s, filter .22s;
}
.refs__logo:hover, .refs__logo:focus-visible { opacity: 1; filter: grayscale(0); }
.refs__logo img { height: 38px; max-width: 150px; width: auto; object-fit: contain; }
.refs__logo span {
  font-size: 17px; font-weight: 750; letter-spacing: -.02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .refs__in { flex-wrap: wrap; gap: var(--sp-4); padding: 18px 0; }
  .refs__t { min-width: 100%; }
  .refs__t h2 { font-size: 21px; }
  .refs__logos { gap: var(--sp-6); }
  .refs__track { gap: var(--sp-6); padding-right: var(--sp-6); animation-duration: 34s; }
}
@media (max-width: 700px) {
  .hs { --hs-chrome: 300px; }
  .refs__logo { height: 38px; }
  .refs__logo img { height: 31px; max-width: 122px; }
}

/* ============================================================
   ÜRÜN BELGELERİ
   ============================================================ */
.docs { display: grid; gap: 8px; max-width: 620px; }
.doc {
  display: flex; align-items: center; gap: 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 16px; transition: .18s;
}
.doc:hover { border-color: var(--accent); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.doc__ic { font-size: 19px; flex: none; width: 26px; text-align: center; }
.doc__t { flex: 1; min-width: 0; }
.doc__t b { display: block; font-size: 14.5px; }
.doc__t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.doc__ok {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--soft); color: var(--accent); font-weight: 700; transition: .18s;
}
.doc:hover .doc__ok { background: var(--accent); color: #fff; }

/* sepette indirim kaynağı rozeti */
.cartrow__old{color:var(--muted);margin-left:6px;font-size:12px}
.cartrow__promo{
  display:inline-block;margin-top:5px;padding:2px 9px;border-radius:100px;
  background:var(--soft);color:var(--accent-ink);font-size:11.5px;font-weight:700;
}

/* ---------------------------------------------------------- hızlı sipariş */
.qo{display:grid;gap:22px;align-items:start}
@media(min-width:900px){.qo{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.qo__form textarea{
  width:100%;min-height:280px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  font-family:var(--font);font-variant-numeric:tabular-nums;font-size:14.5px;line-height:1.9;resize:vertical;
  background:#fff;color:var(--ink);
}
.qo__form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.qo__label{display:block;font-weight:800;margin-bottom:8px}
.qo__hint{color:var(--muted);font-size:13px;line-height:1.7;margin:10px 0 16px}
.qo__h2{font-size:16px;margin:0 0 12px}
.qo__steps{margin:0 0 14px;padding-left:20px;line-height:1.9;font-size:14px}
.qo__ul{margin:0;padding-left:18px;line-height:1.9;font-size:14px}
.qo__pre{
  background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:13px;line-height:1.9;overflow-x:auto;margin:0;
}
.qo__list{margin:10px 0;padding-left:18px;line-height:1.9;font-size:14px}
.qo__code{font-family:var(--font);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:700}
.card2{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:18px}
.note{border-radius:14px;padding:16px 18px;margin-bottom:18px;border:1px solid}
.note--ok{background:#F0FAF4;border-color:#BFE6CE;color:#14532D}
.note--warn{background:#FFF8EC;border-color:#F3DCA9;color:#713F12}
.note--err{background:var(--soft);border-color:#F3C7C9;color:var(--accent-ink)}
.note .btn{margin-top:6px}

/* ------------------------------------------------- stok gelince haber ver */
.stalert{margin-top:14px;padding:16px 18px;border:1px dashed var(--line);border-radius:14px;background:var(--cream)}
.stalert__lb{display:block;font-weight:800;font-size:14px;margin-bottom:9px}
.stalert__row{display:flex;gap:8px;flex-wrap:wrap}
.stalert__row input{flex:1;min-width:190px;padding:11px 14px;border:1px solid var(--line);border-radius:100px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.stalert__row input:focus{outline:2px solid var(--accent);outline-offset:1px}
.stalert__hint{margin:9px 0 0;font-size:12.5px;color:var(--muted)}
.nav__item--right{margin-left:auto}
.nav__link--quick{color:var(--accent-ink);font-weight:800;display:inline-flex;align-items:center;gap:7px}
.nav__link--quick:hover{color:var(--accent)}

/* ------------------------------------------------------ KVKK çerez bandı */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--dark);color:#EDEDEF;padding:16px 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.22);
  animation:cookieUp .3s ease-out;
}
@keyframes cookieUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie__in{
  max-width:var(--wrap,1240px);margin:0 auto;padding:0 20px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cookie__txt{flex:1;min-width:260px;font-size:13.5px;line-height:1.7;color:#C9CBD1}
.cookie__txt b{color:#fff}
.cookie__txt a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cookie__btns{display:flex;gap:9px;flex-wrap:wrap}
.cookie__btns .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cookie__btns .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media(prefers-reduced-motion:reduce){.cookie{animation:none}}

/* ==========================================================================
   ANA SAYFA MODÜLLERİ
   ========================================================================== */

/* ---------------------------------------- ürün grubu (kaydırmalı kartlar) */
.grp{padding:var(--sp-7) 0}
.grp__head{
  display:grid;gap:14px 32px;align-items:start;margin-bottom:26px;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .grp__head{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
}
.grp__title{margin:0;line-height:1.05;letter-spacing:-.02em}
.grp__title span{display:block;font-size:clamp(26px,4vw,38px);font-weight:800;color:var(--ink)}
.grp__title b{display:block;font-size:clamp(26px,4vw,38px);font-weight:800;color:var(--accent)}
.grp__desc{margin:0;color:var(--muted);font-size:15px;line-height:1.7;max-width:46ch}
.grp__nav{display:flex;gap:10px}
.grp__btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.16s;flex:none;
}
.grp__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.grp__btn[disabled]{opacity:.35;cursor:default}
.grp__btn[disabled]:hover{background:var(--bg);color:var(--ink);border-color:var(--line)}

.grp__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:18px;
  overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:4px 4px 18px;margin:0 -4px;
  scrollbar-width:none;
}
.grp__rail::-webkit-scrollbar{display:none}
@media(min-width:700px){.grp__rail{grid-auto-columns:minmax(0,calc((100% - 36px)/3))}}
@media(min-width:1050px){.grp__rail{grid-auto-columns:minmax(0,calc((100% - 72px)/5))}}

.grpc{
  scroll-snap-align:start;background:var(--bg);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.18s;
}
.grpc:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,20,24,.10);border-color:var(--line-2)}
.grpc__media{display:block;aspect-ratio:5/4;background:var(--cream);overflow:hidden}
.grpc__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.grpc:hover .grpc__media img{transform:scale(1.05)}
.grpc__body{display:block;padding:16px 18px 18px}
.grpc__name{display:block;font-weight:800;font-size:16px;color:var(--ink);margin-bottom:5px}
.grpc__meta{display:block;font-size:11.5px;letter-spacing:.06em;color:var(--accent-ink);font-weight:700}

/* -------------------------------------- kurumsal tanıtım + sayaç + video */
.corp{padding:var(--sp-7) 0;background:var(--grad-cream)}
.corp__in{display:grid;gap:38px;align-items:center}
@media(min-width:960px){.corp__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}}
.corp__tag{
  display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:800;
  letter-spacing:.14em;color:var(--accent-ink);margin-bottom:16px;text-transform:uppercase;
}
.corp__tag i{width:34px;height:2px;background:var(--grad-line);border-radius:2px;flex:none}
.corp__h{margin:0 0 16px;font-size:clamp(28px,4.2vw,44px);line-height:1.15;letter-spacing:-.025em;font-weight:800}
.corp__h b{display:block;color:var(--accent);font-weight:800}
.corp__p{margin:0 0 26px;color:var(--ink-2);font-size:16px;line-height:1.8;max-width:52ch}
.corp__stats{display:flex;gap:36px;flex-wrap:wrap;margin-bottom:26px}
.corp__stat b{display:block;font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1}
.corp__stat span{display:block;margin-top:7px;font-size:13.5px;color:var(--muted)}
.corp__more{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);
  border-bottom:2px solid var(--accent);padding-bottom:5px;
}
.corp__more:hover{color:var(--accent)}
.corp__frame{
  border-radius:20px;padding:10px;
  background:var(--grad-decor);
  box-shadow:0 22px 50px rgba(16,20,24,.16);
}
.corp__frame > img{width:100%;border-radius:12px;display:block}
.corp__video{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#0C0D0F}
.corp__video img,.corp__video iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.corp__play{
  position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);border:0;cursor:pointer;
  display:grid;place-items:center;transition:.18s;padding-left:5px;
}
.corp__play:hover{transform:scale(1.08);background:#fff}
.corp__video.is-playing .corp__play,
.corp__video.is-playing .corp__cap{display:none}
.corp__cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px;color:#fff;font-size:13px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
}

/* --------------------------------------------- teklif / iletişim bandı */
.cta2{
  position:relative;padding:var(--sp-7) 0;background:var(--grad-dark-2);color:#fff;overflow:hidden;
}
.cta2::before{
  content:"";position:absolute;inset:0;
  background:var(--cta-bg,none) center/cover no-repeat;
  opacity:.42;
}
.cta2::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(12,13,15,.94) 0%,rgba(12,13,15,.72) 45%,rgba(12,13,15,.55) 100%);
}
.cta2__in{position:relative;z-index:1;display:grid;gap:34px;align-items:center}
@media(min-width:980px){.cta2__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:52px}}
.cta2__tag{
  display:inline-block;border:1px solid rgba(255,255,255,.3);border-radius:100px;
  padding:8px 20px;font-size:13px;font-weight:700;margin-bottom:22px;color:#fff;
}
.cta2__h{margin:0 0 18px;font-size:clamp(32px,5vw,54px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
.cta2__h b{display:block;color:var(--accent);font-weight:800}
.cta2__p{margin:0 0 24px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.8;max-width:46ch}
.cta2__chips{display:flex;gap:10px;flex-wrap:wrap}
.cta2__chips span{
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:9px 20px;
  font-size:13.5px;font-weight:650;color:#fff;
}
.cta2__form{
  background:rgba(28,29,33,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:30px 28px;
}
.cta2__row{display:grid;gap:0 22px}
@media(min-width:560px){.cta2__row{grid-template-columns:1fr 1fr}}
.cta2__f{margin-bottom:20px}
.cta2__f label{display:block;font-size:13.5px;color:rgba(255,255,255,.62);margin-bottom:5px}
.cta2__f label i{color:var(--accent);font-style:normal}
.cta2__f input,.cta2__f textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.24);
  color:#fff;font:inherit;font-size:15px;padding:7px 0 9px;border-radius:0;
}
.cta2__f textarea{resize:vertical;min-height:44px}
.cta2__f input:focus,.cta2__f textarea:focus{outline:0;border-bottom-color:var(--accent)}
.cta2__send{margin:6px 0 12px}
.cta2__btn{
  display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--ink);
  border:0;border-radius:100px;padding:14px 16px 14px 30px;font:inherit;font-weight:800;
  font-size:15px;cursor:pointer;transition:.16s;
}
.cta2__btn span{
  width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none;
}
.cta2__btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.cta2__note{margin:0;font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.7}
.corp__in--solo{grid-template-columns:1fr!important}
.corp__in--solo .corp__p{max-width:64ch}

/* ------------------------------------------------------------ hizmetler */
.svc__head{max-width:60ch;margin-bottom:30px}
.svc__tag{
  display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:800;
  letter-spacing:.14em;color:var(--accent-ink);margin-bottom:14px;text-transform:uppercase;
}
.svc__tag i{width:30px;height:2px;background:var(--grad-line);border-radius:2px;flex:none}
.svc__h{margin:0 0 10px;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;font-weight:800}
.svc__p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.75}
.svc__grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.svcc{
  background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 24px 22px;
  display:flex;flex-direction:column;transition:.18s;overflow:hidden;
}
.svcc:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,20,24,.10)}
.svcc__img{display:block;margin:-26px -24px 18px;aspect-ratio:16/9;overflow:hidden;background:var(--cream)}
.svcc__img img{width:100%;height:100%;object-fit:cover}
.svcc__ic{
  width:48px;height:48px;border-radius:14px;background:var(--grad-decor);color:#fff;
  display:grid;place-items:center;margin-bottom:16px;flex:none;
  box-shadow:0 8px 20px rgba(4,56,116,.26);
}
.svcc__ic svg{width:23px;height:23px}
.svcc__t{display:block;font-weight:800;font-size:17px;margin-bottom:8px;color:var(--ink)}
.svcc__d{display:block;color:var(--muted);font-size:14px;line-height:1.7;flex:1}
.svcc__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:800;color:var(--accent-ink);
}
.svcc:hover .svcc__go{gap:11px}

/* -------------------------------------------------------- proje / blog */
.prj__grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.prjc{
  background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s;
}
.prjc:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(16,20,24,.12)}
.prjc__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.prjc__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.prjc:hover .prjc__media img{transform:scale(1.05)}
.prjc__body{display:block;padding:18px 20px 20px}
.prjc__cat{
  display:inline-block;font-size:11px;letter-spacing:.09em;font-weight:800;
  color:var(--accent-ink);text-transform:uppercase;margin-bottom:8px;
}
.prjc__t{display:block;font-weight:800;font-size:17px;color:var(--ink);margin-bottom:6px;line-height:1.35}
.prjc__m{display:block;color:var(--muted);font-size:13.5px;line-height:1.65}

/* --------------------------------------------------------------- SSS */
.faq__in{display:grid;gap:34px;align-items:start}
@media(min-width:900px){.faq__in{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:52px}}
.faq__h{margin:0 0 10px;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;font-weight:800}
.faq__p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.75}
.faq__list{display:grid;gap:10px}
.faq__i{border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden}
.faq__i[open]{border-color:var(--accent);box-shadow:0 8px 26px rgba(4,56,116,.08)}
.faq__i summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding:18px 20px;font-weight:750;font-size:15.5px;color:var(--ink);list-style:none;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary i{
  width:26px;height:26px;border-radius:50%;background:var(--line-2);flex:none;position:relative;transition:.18s;
}
.faq__i summary i::before,.faq__i summary i::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--ink-2);border-radius:2px;transition:.18s;
}
.faq__i summary i::before{width:11px;height:2px}
.faq__i summary i::after{width:2px;height:11px}
.faq__i[open] summary i{background:var(--grad-brand)}
.faq__i[open] summary i::before,.faq__i[open] summary i::after{background:#fff}
.faq__i[open] summary i::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 20px 20px;color:var(--ink-2);font-size:14.5px;line-height:1.8}

/* ==========================================================================
   DEGRADE UYGULAMALARI
   Kural: degrade YAZI yalnızca büyük başlıklarda (>=24px, 700+) kullanılır;
   her iki uç da zeminde en az 3:1 kontrast verir. Küçük metin düz renktir.
   ========================================================================== */

.grad-text,
.grp__title b,
.corp__h b,
.svc__h em,
.faq__h em{
  background:var(--grad-brand-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* degrade desteklenmeyen tarayıcıda düz renge düşer */
  @supports not (background-clip: text){ color:var(--accent); -webkit-text-fill-color:currentColor; }
}
/* koyu zeminde başlık degradesi parlak uçtan kurulur */
.cta2__h b,
.hs__title b,
.foot .grad-text{
  background:var(--grad-glow);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* --------------------------------------------------- bölüm ayraç şeritleri */
.sec__head{position:relative}


/* ------------------------------------------------------- ürün grubu kartı */
.grpc__media{position:relative}
.grpc__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(transparent,rgba(16,20,24,.16));
  opacity:0;transition:.25s;
}
.grpc:hover .grpc__media::after{opacity:1}
.grpc{position:relative}
.grpc::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-decor);opacity:0;transition:.2s;z-index:1;
}
.grpc:hover::before{opacity:1}
.grp__btn:hover{background:var(--grad-brand);color:#fff;border-color:transparent}

/* ------------------------------------------------------------ hizmet kartı */
.svcc{position:relative}
.svcc::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:3px;
  background:var(--grad-decor);transition:width .3s;
}
.svcc:hover::after{width:100%}

/* -------------------------------------------------------------- proje kartı */
.prjc__media{position:relative}
.prjc__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(4,56,116,0) 40%,rgba(4,56,116,.22) 100%);
  opacity:0;transition:.3s;
}
.prjc:hover .prjc__media::after{opacity:1}

/* --------------------------------------------------------- güven şeridi */
.trust{background:var(--grad-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ------------------------------------------------------- teklif bandı düğme */
.cta2__btn span{background:var(--grad-brand);color:#fff}
.cta2__tag{background:rgba(255,255,255,.06)}

/* ------------------------------------------------------------------ footer */


/* ------------------------------------------------------- footer eklentileri */
.foot__social{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.foot__social a{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#DCE6F2;border:0;transition:background .16s;
}
.foot__social a:hover{background:var(--sky);color:#fff}
.foot__social svg{width:18px;height:18px}
.foot__bottom{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot__legal{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
.foot__legal a,.foot__legal button{
  color:#C3D3E6;font:inherit;font-size:13px;background:none;border:0;padding:0;cursor:pointer;
}
.foot__legal a:hover,.foot__legal button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------ sabit iletişim düğmeleri */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:90;
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
}
.fab__b{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 10px 26px rgba(16,20,24,.30);transition:.18s;position:relative;
}
.fab__b svg{width:24px;height:24px}
.fab__b--tel{background:var(--grad-brand)}
.fab__b--wa{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%)}
.fab__b:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 32px rgba(16,20,24,.38);color:#fff}
.fab__t{
  position:absolute;right:64px;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;
  padding:7px 13px;border-radius:8px;opacity:0;pointer-events:none;transition:.18s;
}
.fab__b:hover .fab__t{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:640px){
  .fab{right:14px;bottom:14px;gap:10px}
  .fab__b{width:50px;height:50px}
  .fab__t{display:none}
}
@media print{.fab,.cookie{display:none!important}}

/* Sayfa koyu bir bölümle bitiyorsa footer'la arasında beyaz şerit kalmasın */
main:has(> .cta2:last-child) + .foot,
main:has(> section:last-child.cta2) + .foot{ margin-top:0 }

/* ------------------------------------------------- hizmet / proje detay */
.detay{max-width:900px}
.detay__head{margin-bottom:26px}
.detay__h{margin:14px 0 12px;font-size:clamp(28px,4vw,40px);letter-spacing:-.025em;font-weight:800;line-height:1.15}
.detay__ozet{margin:0;color:var(--ink-2);font-size:17px;line-height:1.8}
.detay__gorsel{width:100%;border-radius:var(--r-lg);margin:0 0 26px;display:block}
.detay__cta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0;padding:26px;border-radius:var(--r-lg);background:var(--grad-cream);border:1px solid var(--line)}
.detay__alt{margin:38px 0 18px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.prjmeta{display:grid;gap:0 32px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:0 0 26px;padding:20px 24px;border-radius:var(--r);background:var(--bg-soft);border:1px solid var(--line)}
.prjmeta dt{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.prjmeta dd{margin:0 0 10px;font-weight:700;font-size:15px}
.prjgal{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:26px 0}
.prjgal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block;transition:.2s}
.prjgal a:hover img{transform:scale(1.02);box-shadow:var(--sh)}
.prjfilt{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.prjfilt__i{padding:9px 20px;border-radius:var(--pill);border:1px solid var(--line);font-size:14px;font-weight:650;color:var(--ink-2)}
.prjfilt__i:hover{border-color:var(--ink);color:var(--ink)}
.prjfilt__i.is-on{background:var(--grad-brand);color:#fff;border-color:transparent}
.faq__kat{font-size:15px;font-weight:800;letter-spacing:.02em;margin:0 0 12px;color:var(--accent-ink)}
.grp--krem{background:var(--grad-cream)}
.grp--koyu{background:var(--grad-dark);color:#fff}
.grp--koyu .grp__title span{color:#fff}
.grp--koyu .grp__title b{background:var(--grad-glow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grp--koyu .grp__desc{color:rgba(255,255,255,.72)}
.grp--koyu .grp__btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.grp--koyu .grpc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.grp--koyu .grpc__name{color:#fff}
.grp--koyu .grpc__meta{color:var(--brand-300)}
.grp__all{
  display:inline-flex;align-items:center;padding:0 18px;height:46px;border-radius:var(--pill);
  border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--ink);margin-right:4px;
}
.grp__all:hover{background:var(--grad-brand);color:#fff;border-color:transparent}

/* ============================================================
   v10 — YENİ ANA SAYFA MODÜLLERİ
   Rakamlar, Neden Biz, Süreç, Karşılaştırma, Sektörler,
   Kampanya, Yorumlar, Belgeler, Katalog, Harita
   ============================================================ */

/* ---------------------------------------------- ortak parçalar */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:10px;
  font-size:11.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--muted);
}
.eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--grad-brand); }
.sec__sub{ margin:10px 0 0; color:var(--muted); max-width:62ch; font-size:15.5px; }

/* numaralı etiket: (01) Rakamlar */
.pillno{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:16px;
  padding:5px 14px 5px 5px; border-radius:var(--pill);
  background:var(--ink); color:#fff; font-size:12px; font-weight:650; letter-spacing:.04em;
}
.pillno i{
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--grad-brand); color:#fff; font-style:normal; font-size:11px; font-weight:800;
}

/* degrade başlık parçası */
.grad{
  background:var(--grad-brand-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* kalemle daire içine alınmış kelime */
.circled{ position:relative; display:inline-block; white-space:nowrap; padding:0 .18em; }
.circled__ring{
  position:absolute; left:-9%; top:50%; transform:translateY(-50%);
  width:120%; height:178%; color:var(--brand-500); opacity:.9; pointer-events:none;
}

/* çentikli, ok butonlu blok kart */
.blob{
  --cut:var(--bg);
  position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  min-height:232px; padding:26px; border-radius:var(--r-xl); overflow:hidden;
  transition:transform .22s, box-shadow .22s;
}
.blob::after{
  content:""; position:absolute; top:0; right:0; width:76px; height:76px;
  background:var(--cut); border-bottom-left-radius:24px;
}
.blob__go{
  position:absolute; top:8px; right:8px; z-index:2;
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--ink); color:var(--ink); background:transparent; transition:.2s;
}
.blob__go svg{ width:19px; height:19px; }
.blob:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.blob:hover .blob__go{ background:var(--ink); color:#fff; border-color:var(--ink); }
.blob__n{ font-size:clamp(40px, 5vw, 62px); font-weight:800; letter-spacing:-.045em; line-height:1; }
.blob__t{ font-size:14.5px; line-height:1.5; max-width:30ch; }
.blob--soft{ background:var(--bg-soft); color:var(--ink); }
.blob--soft .blob__t{ color:var(--muted); }
.blob--ink{ background:var(--grad-dark); color:#fff; }
.blob--ink .blob__t{ color:rgba(255,255,255,.75); }
.blob--brand{ background:var(--grad-decor); color:#fff; }
.blob--brand .blob__t{ color:rgba(255,255,255,.88); }

/* ------------------------------------------------- 1) rakamlar */
.stat__top{ display:grid; gap:20px; grid-template-columns:minmax(0,1fr); margin-bottom:var(--sp-6); }
@media (min-width:900px){ .stat__top{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:end; gap:48px; } }
.stat__h{ margin:0; font-size:clamp(30px, 4.2vw, 50px); letter-spacing:-.035em; line-height:1.05; }
.stat__h .grad{ display:block; }
.stat__p{ margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.stat__grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width:1040px){ .stat__grid--img{ grid-template-columns:repeat(3, minmax(0,1fr)) minmax(0,.86fr); } }
.stat__img{ border-radius:var(--r-xl); overflow:hidden; min-height:232px; }
.stat__img img{ width:100%; height:100%; min-height:232px; object-fit:cover; }

/* --------------------------------------------- 2) neden biz */
.adv__box{ background:var(--bg-soft); border-radius:34px; padding:clamp(22px,3vw,42px); }
.adv__grid{ display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:920px){ .adv__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:44px; } }
.adv__h{ margin:0 0 20px; font-size:clamp(30px, 4vw, 48px); line-height:1.08; letter-spacing:-.035em; }
.adv__h2{ display:block; }
.adv__chip{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:var(--pill);
  background:var(--ink); color:#fff; font-size:13.5px; font-weight:650; transition:.2s;
}
.adv__chip:hover{ background:var(--grad-brand); color:#fff; }
.adv__p{ margin:20px 0 0; color:var(--ink-2); font-size:15.5px; line-height:1.7; max-width:56ch; }
.adv__img{ border-radius:26px; overflow:hidden; }
.adv__img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.adv__nums{
  margin-top:clamp(22px,3vw,38px); background:#fff; border-radius:24px; padding:26px clamp(16px,2.4vw,32px);
  display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
}
.adv__num{ position:relative; padding-left:22px; }
.adv__num::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:2px; border-radius:2px; background:var(--line-2); }
.adv__num:first-child::before{ background:var(--grad-brand); }
.adv__num b{ display:block; font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.04em; line-height:1.1; }
.adv__num span{ display:block; margin-top:5px; color:var(--muted); font-size:13.5px; line-height:1.45; }

/* ------------------------------------------------- 3) süreç */
.prc__list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(238px,1fr)); }
.prc__i{
  position:relative; padding:28px 22px 24px; border-radius:var(--r-xl);
  background:#fff; border:1px solid var(--line); transition:.22s;
}
.prc__i:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:transparent; }
.prc__n{
  display:inline-grid; place-items:center; width:46px; height:46px; margin-bottom:16px; border-radius:14px;
  background:var(--grad-brand); color:#fff; font-size:15px; font-weight:800; letter-spacing:.01em;
}
.prc__t{ margin:0 0 8px; font-size:18px; }
.prc__d{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ----------------------------------------- 4) karşılaştırma */
.cmp__grid{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){ .cmp__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cmp__col{ border-radius:var(--r-xl); padding:clamp(20px,2.6vw,32px); }
.cmp__col h3{ margin:0 0 18px; font-size:20px; }
.cmp__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.cmp__col li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; }
.cmp__ic{ flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; margin-top:1px; }
.cmp__ic svg{ width:13px; height:13px; }
.cmp__col--iyi{ background:var(--grad-dark); color:#fff; }
.cmp__col--iyi .cmp__ic{ background:var(--grad-brand); color:#fff; }
.cmp__col--kotu{ background:var(--bg-soft); color:var(--ink-2); }
.cmp__col--kotu .cmp__ic{ background:var(--line-2); color:var(--muted); }
.cmp__col--kotu li{ color:var(--muted); }

/* -------------------------------------------- 5) sektörler */
.sct__grid{ display:grid; gap:16px; grid-template-columns:repeat(var(--sut,4), minmax(0,1fr)); }
@media (max-width:1100px){ .sct__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .sct__grid{ grid-template-columns:minmax(0,1fr); } }
.sctc{ padding:24px 20px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); transition:.22s; }
.sctc:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:transparent; }
.sctc__ic{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:14px; border-radius:13px;
  background:var(--grad-decor); color:#fff;
}
.sctc__ic svg{ width:23px; height:23px; }
.sctc__t{ margin:0 0 6px; font-size:16.5px; }
.sctc__d{ margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

/* --------------------------------------------- 6) kampanya */
.cmpg__box{
  position:relative; overflow:hidden; border-radius:32px; color:#fff;
  background:var(--grad-decor); padding:clamp(26px,3.4vw,48px);
  display:grid; gap:26px; align-items:center; grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){ .cmpg__box{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:40px; } }
.cmpg__box::before{
  content:""; position:absolute; inset:0; background-image:var(--bg, none);
  background-size:cover; background-position:center; opacity:.20; mix-blend-mode:luminosity;
}
.cmpg__copy, .cmpg__cd{ position:relative; }
.cmpg__tag{
  display:inline-block; margin-bottom:14px; padding:6px 14px; border-radius:var(--pill);
  background:rgba(255,255,255,.2); font-size:11.5px; font-weight:750; letter-spacing:.16em; text-transform:uppercase;
}
.cmpg__h{ margin:0 0 12px; font-size:clamp(25px,3.2vw,40px); letter-spacing:-.032em; line-height:1.1; }
.cmpg__p{ margin:0 0 22px; color:rgba(255,255,255,.9); font-size:15.5px; line-height:1.65; max-width:56ch; }
.btn--light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--light:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.cmpg__cdt{ display:block; margin-bottom:10px; font-size:12px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.cmpg__cdb{ display:flex; gap:10px; }
.cmpg__cdb span{
  flex:1; min-width:0; text-align:center; padding:14px 6px; border-radius:16px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(3px);
}
.cmpg__cdb b{ display:block; font-size:clamp(22px,2.6vw,32px); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.cmpg__cdb small{ display:block; margin-top:3px; font-size:11.5px; color:rgba(255,255,255,.8); }

/* --------------------------------------------- 7) yorumlar */
.tst__head{ align-items:center; }
.tst__score{ display:flex; align-items:center; gap:12px; padding:11px 18px; border-radius:var(--pill);
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm); }
.tst__score span{ display:flex; align-items:center; gap:9px; }
.tst__score b{ font-size:20px; font-weight:800; letter-spacing:-.03em; }
.glogo{ width:22px; height:22px; flex:none; }
.tst__stars{ display:inline-flex; gap:3px; }
.tst__stars svg{ width:15px; height:15px; fill:var(--line-2); }
.tst__stars svg.is-on{ fill:#F5A623; }
.tst__stars--sm svg{ width:13px; height:13px; }

.tst__grid{ display:grid; gap:18px; grid-template-columns:repeat(var(--sut,3), minmax(0,1fr)); }
@media (max-width:1100px){ .tst__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .tst__grid{ grid-template-columns:minmax(0,1fr); } }

.tstc{ margin:0; padding:24px 24px 20px; border-radius:var(--r-xl); background:#fff;
  border:1px solid var(--line); display:flex; flex-direction:column; transition:.22s; }
.tstc:hover{ box-shadow:var(--sh-lg); border-color:transparent; transform:translateY(-3px); }
/* üst satır sola, alt satır sağa yaslı */
.tstc__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tstc__src{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--bg-soft); transition:.2s; }
.tstc__src:hover{ background:var(--line-2); transform:scale(1.06); }
.tstc__src .glogo{ width:16px; height:16px; }
.tstc__q{ margin:0 0 22px; font-size:15.5px; line-height:1.68; color:var(--ink-2); flex:1; }
.tstc__q::before{ content:"\201C"; }
.tstc__q::after{ content:"\201D"; }
.tstc__f{ display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding-top:16px; border-top:1px solid var(--line-2); }
.tstc__who{ text-align:right; min-width:0; }
.tstc__f b{ display:block; font-size:14.5px; letter-spacing:-.01em; }
.tstc__f small{ display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.tstc__av{ flex:none; width:42px; height:42px; border-radius:50%; object-fit:cover; }
.tstc__av--tx{ display:grid; place-items:center; background:var(--grad-brand); color:#fff;
  font-size:13.5px; font-weight:800; letter-spacing:.02em; }

/* --------------------------------------------- 8) belgeler */
.crt__grid{ display:grid; gap:16px; grid-template-columns:repeat(var(--sut,3), minmax(0,1fr)); }
@media (max-width:1100px){ .crt__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .crt__grid{ grid-template-columns:minmax(0,1fr); } }
.crtc{ display:block; padding:24px 22px; border-radius:var(--r-lg); background:var(--bg-soft); transition:.22s; }
a.crtc:hover{ background:#fff; box-shadow:var(--sh-lg); transform:translateY(-3px); }
.crtc__ic{ display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px; border-radius:12px; background:#fff; color:var(--brand-500); box-shadow:var(--sh-sm); }
.crtc__ic svg{ width:22px; height:22px; }
.crtc__t{ display:block; font-size:15.5px; font-weight:700; line-height:1.4; letter-spacing:-.015em; }
.crtc__m{ display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.5; }
.crtc__m i{ font-style:normal; font-variant-numeric:tabular-nums; }
.crtc__v{ display:inline-block; margin-top:10px; padding:3px 10px; border-radius:var(--pill); background:#fff; color:var(--ink-2); font-size:11.5px; font-weight:650; }

/* ------------------------------------- 9) katalog indirme */
.dl__in{ display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:960px){ .dl__in{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:44px; } }
.dl__h{ margin:0 0 10px; font-size:clamp(24px,2.9vw,34px); letter-spacing:-.032em; }
.dl__p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.65; }
.dl__grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); }
.dlc{ position:relative; display:block; padding:22px 20px; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; transition:.22s; }
a.dlc:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:transparent; }
.dlc__ic{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:12px; border-radius:12px; background:var(--bg-soft); color:var(--brand-500); }
.dlc__ic svg{ width:21px; height:21px; }
a.dlc:hover .dlc__ic{ background:var(--grad-brand); color:#fff; }
.dlc__t{ display:block; font-size:15px; font-weight:700; letter-spacing:-.015em; }
.dlc__n{ display:block; margin-top:5px; color:var(--muted); font-size:13px; line-height:1.5; }
.dlc__soon{ position:absolute; top:16px; right:16px; padding:3px 9px; border-radius:var(--pill); background:var(--bg-soft); color:var(--muted); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

/* ----------------------------------------------- 10) harita */
.eyebrow--light{ color:rgba(255,255,255,.62); }
.eyebrow--light::before{ background:var(--grad-glow); }

.map__box{
  position:relative; overflow:hidden; border-radius:34px; color:#fff;
  background:
    radial-gradient(115% 130% at 6% 0%, rgba(4,56,116,.28) 0%, rgba(4,56,116,0) 56%),
    radial-gradient(90% 120% at 100% 100%, rgba(255,90,96,.20) 0%, rgba(255,90,96,0) 55%),
    var(--grad-dark);
  padding:clamp(24px,3.2vw,46px);
}
/* köşedeki yumuşak parıltı */
.map__glow{
  position:absolute; right:-140px; top:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(1,140,227,.34) 0%, rgba(1,140,227,0) 68%);
  filter:blur(8px); pointer-events:none;
}
/* ince ızgara dokusu — boşluğu doldurur, dikkat dağıtmaz */
.map__box::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 100% at 0% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(120% 100% at 0% 0%, #000 0%, transparent 72%);
}
.map__grid{ position:relative; display:grid; gap:24px; grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:900px){ .map__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:38px; } }

.map__h{ margin:0 0 24px; font-size:clamp(27px,3.2vw,40px); letter-spacing:-.035em; line-height:1.08; color:#fff; }
.map__info{ display:grid; gap:15px; align-content:start; }
.map__row{ display:flex; gap:14px; align-items:flex-start; font-size:15px; line-height:1.55; color:rgba(255,255,255,.86); }
.map__row b{ display:block; font-size:11px; font-weight:750; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:3px; }
.map__row a{ color:#fff; }
.map__row a:hover{ color:var(--brand-200,#B9E0FA); }
.map__ic{
  flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); color:#7CC7F5;
}
.map__ic svg{ width:20px; height:20px; }
.map__hours{
  margin-top:6px; padding:18px 20px; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12); display:grid; gap:7px;
}
.map__hours b{ font-size:11px; font-weight:750; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:3px; }
.map__hours span{ font-size:14.5px; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }
.map__hours span.is-off{ color:rgba(255,255,255,.5); }
.map__btn{
  justify-self:start; margin-top:4px; display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:var(--pill); background:var(--grad-brand); color:#fff;
  font-size:14px; font-weight:700; transition:.2s; box-shadow:0 10px 26px rgba(4,56,116,.34);
}
.map__btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(4,56,116,.44); }

.map__frame{
  position:relative; border-radius:24px; overflow:hidden; min-height:340px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  box-shadow:0 26px 60px rgba(0,0,0,.34);
}
.map__frame iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }
.map__frame img{ width:100%; height:100%; min-height:340px; object-fit:cover; }
.map__empty{ display:grid; place-items:center; height:100%; min-height:340px; padding:26px; text-align:center;
  color:rgba(255,255,255,.6); font-size:14px; }

/* ==========================================================================
   AY-KA KATMANI — ana sayfa modülleri ve ortak bileşenler
   Kural: başlıklar lacivert ve düz renk; ikinci satır ("vurgu") aynı renkte,
   yalnızca alt satıra iner. Kartlar gölge yerine ince çerçeve kullanır;
   üzerine gelince çerçeve maviye döner. Hareket yalnızca kullanıcı eylemine yanıttır.
   ========================================================================== */

/* ---------------------------------------------------- bölüm başlıkları */
.sec { padding: var(--sp-8) 0; }
.sec__head { margin-bottom: 30px; align-items: flex-end; }
.sec__head h2, .grp__title, .svc__h, .faq__h, .corp__h, .map__h, .detay__h { color: var(--navy); letter-spacing: -.03em; }
.sec__head p, .sec__sub, .svc__p, .grp__desc, .faq__p { color: var(--muted); font-size: 16px; }
.grad-text, .grp__title b, .corp__h b, .svc__h em, .faq__h em, .cta2__h b, .grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: inherit;
}
.sec__more {
  font-size: 15px; font-weight: 700; color: var(--navy); border: 1.5px solid var(--line);
  padding: 10px 18px; border-radius: var(--pill); white-space: nowrap; transition: border-color .16s, background .16s;
}
.sec__more:hover { border-color: var(--navy); color: var(--navy); background: #fff; }
.eyebrow, .svc__tag, .corp__tag {
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-ink);
}
.eyebrow::before, .svc__tag i, .corp__tag i { display: none; }

/* ---------------------------------------------------- güven şeridi */
.trust { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); }
.trust__in { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 900px) { .trust__in { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.trust__i { padding: 26px 22px; color: var(--ink); transition: background .16s; }
.trust__i:hover { background: var(--bg-soft); color: var(--ink); }
.trust__i svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--sky-soft); color: var(--navy); margin-top: 0; }
.trust__i b { font-size: 15.5px; color: var(--navy); }
.trust__i span { font-size: 14px; }

/* ---------------------------------------------------- ürün grubu şeridi */
.grp { padding: var(--sp-8) 0 var(--sp-7); }
.grp__title b, .grp__title span { font-size: clamp(26px, 3vw, 38px); color: var(--navy); }
.grp__btn { border-color: var(--line); color: var(--navy); }
.grp__btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.grp__all { color: var(--navy); }
.grp__all:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.grpc { border-radius: 18px; border-color: var(--line); }
.grpc::before { display: none; }
.grpc:hover { transform: none; box-shadow: none; border-color: var(--navy); }
.grpc__media { aspect-ratio: 4/3; background: var(--bg-soft); }
.grpc__name { font-size: 17px; color: var(--navy); }
.grpc__meta { font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* ---------------------------------------------------- ürün kartı */
.plist { gap: 18px; }
.card { border: 1px solid var(--line); border-radius: 18px; box-shadow: none; transition: border-color .18s; }
.card:hover { transform: none; box-shadow: none; border-color: var(--navy); }
.card__media { background: #fff; padding: 18px; border-bottom: 1px solid var(--line-2); }
.card__media img { mix-blend-mode: normal; border-radius: 10px; object-fit: cover; }
.card:hover .card__media img { transform: none; }
.card__body { padding: 16px 18px 18px; gap: 7px; }
.card__cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sky-ink); }
.card__title { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.card__title a:hover { color: var(--navy); }
.card__sku { font-size: 12.5px; color: var(--muted); letter-spacing: 0; }
.price { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price small { color: var(--muted); font-weight: 600; }
.price--ask { color: var(--sky-ink); }
.tag { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 5px 10px; border-radius: 6px; }
.tag--new  { background: var(--signal); color: var(--navy-deep); }
.tag--sale { background: var(--navy); color: #fff; }
.tag--out  { background: var(--muted); color: #fff; }
.qty--mini { border-color: var(--line); }
.card__foot .btn--accent { background: var(--navy); }
.card__foot .btn--accent:hover { background: var(--sky-ink); }

/* ---------------------------------------------------- tanıtım bloğu */
.corp { background: var(--bg-soft); }
.corp__h { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; }
.corp__h b { color: var(--navy); }
.corp__p { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.corp__more { color: var(--navy); border: 1.5px solid var(--navy); border-radius: var(--pill); padding: 12px 22px; }
.corp__more:hover { background: var(--navy); color: #fff; }
.corp__frame { background: none; padding: 0; box-shadow: none; border-radius: 24px; overflow: hidden; }
.corp__frame > img { border-radius: 24px; aspect-ratio: 16/10; object-fit: cover; }

/* ---------------------------------------------------- hizmetler */
.svc__head { max-width: 62ch; margin-bottom: 30px; }
.svc__h { font-size: clamp(26px, 3vw, 38px); }
.svc__grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 1040px) { .svc__grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.svcc { border-radius: 18px; padding: 26px 24px 22px; transition: border-color .18s; }
.svcc:hover { transform: none; box-shadow: none; border-color: var(--navy); }
.svcc::after { display: none; }
.svcc__ic { width: 50px; height: 50px; border-radius: 50%; background: var(--navy); box-shadow: none; }
.svcc__t { font-size: 18px; color: var(--navy); }
.svcc__d { font-size: 15px; color: var(--muted); }
.svcc__go { color: var(--sky-ink); font-weight: 700; }

/* ---------------------------------------------------- süreç (gerçek sıra — numara anlamlı) */
.prc { background: var(--bg-soft); }
.prc__list { counter-reset: none; gap: 0; border: 1px solid var(--line); border-radius: 20px; background: #fff; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.prc__i { border: 0; border-radius: 0; padding: 30px 26px; border-right: 1px solid var(--line); }
.prc__i:last-child { border-right: 0; }
.prc__i:hover { transform: none; box-shadow: none; }
.prc__n { width: auto; height: auto; background: none; color: var(--sky-ink); font-size: 14px; font-weight: 800; letter-spacing: .12em; border-radius: 0; margin-bottom: 14px; }
.prc__t { color: var(--navy); font-size: 19px; }
.prc__d { font-size: 15px; }
@media (max-width: 960px) { .prc__i { border-right: 0; border-bottom: 1px solid var(--line); } .prc__i:last-child { border-bottom: 0; } }

/* ---------------------------------------------------- SSS */
.faq__i { border-radius: 14px; }
.faq__i[open] { border-color: var(--navy); box-shadow: none; }
.faq__i summary { font-weight: 700; font-size: 16px; }
.faq__i[open] summary i { background: var(--navy); }
.faq__a { font-size: 15.5px; }

/* ---------------------------------------------------- markalar */
.brands { gap: 12px; }
.brandpill { padding: 12px 22px; border: 1px solid var(--line); border-radius: 14px; min-height: 64px; justify-content: center; color: var(--navy); }
.brandpill:hover { transform: none; box-shadow: none; border-color: var(--navy); }
.brandpill img { max-height: 36px; }

/* ---------------------------------------------------- teklif bandı */
.cta2 { background: var(--navy-deep); }
.cta2::before { opacity: .35; }
.cta2::after { background: linear-gradient(100deg, rgba(3,24,50,.95) 0%, rgba(3,24,50,.82) 48%, rgba(3,24,50,.66) 100%); }
.cta2__h { font-size: clamp(32px, 4.2vw, 54px); }
.cta2__h b { color: var(--brand-300); -webkit-text-fill-color: currentColor; }
.cta2__chips span { border-color: rgba(255,255,255,.35); }
.cta2__form { background: rgba(4,32,66,.6); border-color: rgba(255,255,255,.18); border-radius: 22px; }
.cta2__f label { color: rgba(255,255,255,.8); }
.cta2__f label i { color: var(--brand-300); }
.cta2__f input:focus, .cta2__f textarea:focus { border-bottom-color: var(--brand-300); }
.cta2__btn span { background: var(--navy); }
.cta2__note { color: rgba(255,255,255,.7); }

/* ---------------------------------------------------- harita — açık zemin */
.map__box { background: var(--cream); color: var(--ink); border-radius: 28px; }
.map__box::before, .map__glow { display: none; }
.map__h { color: var(--navy); }
.map__row { color: var(--ink-2); font-size: 16px; }
.map__row b { color: var(--sky-ink); font-size: 12.5px; letter-spacing: .14em; }
.map__row a { color: var(--navy); font-weight: 700; }
.map__row a:hover { color: var(--sky-ink); }
.map__ic { background: #fff; border: 0; color: var(--navy); border-radius: 50%; }
.map__hours { background: #fff; border-color: var(--cream-2); }
.map__hours b { color: var(--sky-ink); }
.map__hours span { color: var(--ink); }
.map__hours span.is-off { color: var(--muted); }
.map__btn { background: var(--navy); box-shadow: none; }
.map__btn:hover { background: var(--sky-ink); transform: none; box-shadow: none; }
.map__frame { border: 0; background: #fff; box-shadow: none; }
.map__empty { color: var(--muted); }

/* ---------------------------------------------------- sabit iletişim düğmeleri */
.fab__b--tel { background: var(--navy); }
.fab__b { box-shadow: 0 10px 24px rgba(3,24,50,.28); }
.fab__b:hover { transform: none; }

/* ---------------------------------------------------- mobil menü */
.mnav__panel { background: #fff; }
.mnav__head strong { color: var(--navy); }
.mnav__call { display: block; margin: 18px 20px 0; padding: 14px 18px; border-radius: var(--pill); background: var(--navy); color: #fff; font-weight: 700; text-align: center; }
.mnav__call:hover { color: #fff; background: var(--sky-ink); }

/* ---------------------------------------------------- çerez bandı */
.cookie { background: var(--navy-deep); }
.cookie__txt { color: #DCE6F2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   WHATSAPP — yüzen düğme + panel
   WhatsApp'ın kendi koyu yeşilleri: #128C7E (düğme, beyaz ikon 4.1:1),
   #075E54 (başlık, beyaz yazı 7.7:1), #0A6E52 (gönder, beyaz yazı 6.2:1).
   ========================================================================== */
.fab { gap: 12px; }
.fab__b--wa { background: #128C7E; width: 58px; height: 58px; }
.fab__b--wa:hover { background: #075E54; color: #fff; }
.fab__b--wa[aria-expanded="true"] { background: #075E54; }

.wa {
  position: fixed; right: 18px; bottom: 156px; z-index: 110;
  width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 180px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(3,24,50,.32), 0 2px 6px rgba(3,24,50,.12);
  opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease;
}
.wa.is-open { opacity: 1; transform: none; }
.wa[hidden] { display: none; }
.wa__head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 16px; background: #075E54; color: #fff; }
.wa__av { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.wa__av img { width: 38px; height: auto; }
.wa__who { flex: 1; min-width: 0; line-height: 1.3; }
.wa__who b { display: block; font-size: 16px; font-weight: 800; }
.wa__who span { display: block; font-size: 13px; color: #D5EDE8; font-variant-numeric: tabular-nums; }
.wa__x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.wa__x:hover { background: rgba(255,255,255,.24); }

.wa__body { padding: 16px; background: #EFEAE2; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.wa__msg {
  position: relative; justify-self: start; max-width: 92%;
  background: #fff; color: var(--ink); padding: 10px 13px; border-radius: 0 12px 12px 12px;
  font-size: 14.5px; line-height: 1.5; box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.wa__msg::before { content: ""; position: absolute; left: -8px; top: 0; border: 8px solid transparent; border-top-color: #fff; border-right-color: #fff; border-width: 0 8px 8px 0; }
.wa__ctx {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px;
  background: #fff; border: 1.5px solid #CFE9DC; cursor: pointer; font-weight: 400; font-size: 13.5px; color: var(--ink-2);
}
.wa__ctx input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0A6E52; flex: none; }
.wa__ctx b { display: block; color: #075E54; font-size: 12.5px; font-weight: 800; }
.wa__lb { margin: 2px 0 -4px; font-size: 12.5px; font-weight: 700; color: #4A5A55; }
.wa__topics { display: flex; flex-wrap: wrap; gap: 7px; }
.wa__topic {
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
  padding: 8px 12px; border-radius: 18px; border: 1.5px solid #B9DDCC; background: #fff; color: #075E54;
  transition: background .14s, border-color .14s, color .14s;
}
.wa__topic:hover { border-color: #0A6E52; }
.wa__topic[aria-pressed="true"] { background: #0A6E52; border-color: #0A6E52; color: #fff; }

.wa__form { display: grid; gap: 10px; padding: 12px 14px 4px; background: #fff; border-top: 1px solid #E3E8E6; }
.wa__form textarea { min-height: 0; resize: none; border-radius: 14px; font-size: 15px; padding: 10px 14px; border: 1.5px solid #D5DDE5; }
.wa__form textarea:focus { border-color: #0A6E52; box-shadow: 0 0 0 3px rgba(10,110,82,.15); }
.wa__send {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 12px 18px; border: 0; border-radius: var(--pill); background: #0A6E52; color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .14s;
}
.wa__send:hover { background: #075E54; }
.wa__note { margin: 0; padding: 6px 16px 14px; background: #fff; font-size: 12.5px; color: var(--muted); text-align: center; }

@media (max-width: 640px) {
  .wa { right: 12px; left: 12px; width: auto; bottom: 136px; max-height: calc(100vh - 150px); }
  .fab__b--wa { width: 54px; height: 54px; }
}

/* ---- sayfa içi WhatsApp düğmeleri (ürün, sepet, sipariş sonucu) */
.btn--wa { background: #0A6E52; color: #fff; border-color: transparent; }
.btn--wa:hover { background: #075E54; color: #fff; }
.btn--wa svg { flex: none; }
.wa-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14.5px; color: var(--ink-2); }
.wa-line a { color: #0A6E52; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.wa-line a:hover { color: #075E54; }
.topbar__wa { display: inline-flex; align-items: center; gap: 6px; }
.topbar__wa svg { color: #7FE0B3; }
.mnav__call--wa { background: #0A6E52; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.mnav__call--wa:hover { background: #075E54; }
.hs__card--wa .hs__card-lb { color: #7FE0B3; }
.trust__i--wa > svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #E3F4EC; color: #0A6E52; flex: none; }

/* ---- listeleme: kenar çubuğu olan sayfada kartlar 3 sütun; alt kısım sıkışınca alt alta dizilir */
@media (min-width: 1040px) { .shop .plist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card__foot form { flex-wrap: wrap; }
.card__foot form .btn { flex: 1 1 110px; min-width: 0; }

/* ==========================================================================
   AY-KA ÖZEL MODÜLLER
   ========================================================================== */

/* ---------------------------------------------- AY-KA Rakamlarla (kart ızgarası) */
.akr { padding: var(--sp-8) 0; }
.akr__in { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .akr__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; } }
.akr__tag {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: var(--pill);
  background: var(--sky-soft); color: var(--navy);
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.akr__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(1,140,227,.18); }
.akr__h { margin: 20px 0 18px; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -.035em; color: var(--navy); }
.akr__h em { position: relative; font-style: normal; color: var(--sky); white-space: nowrap; }
.akr__swash { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .3em; color: rgba(1,140,227,.32); pointer-events: none; }
.akr__p { margin: 0 0 30px; font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 46ch; }
.akr__btn {
  display: inline-flex; align-items: center; gap: 16px; padding: 8px 8px 8px 26px; border-radius: var(--pill);
  background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; transition: background .16s;
}
.akr__btn i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--navy); transition: transform .2s; }
.akr__btn:hover { background: var(--navy-deep); color: #fff; }
.akr__btn:hover i { transform: rotate(45deg); }

.akr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.akr__col { display: grid; gap: 22px; align-content: start; }
.akr__col--2 { margin-top: 34px; }
.akc {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 248px; padding: 28px; border-radius: 28px; color: #fff;
  transition: transform .22s ease;
}
a.akc:hover { transform: translateY(-3px); color: #fff; }
.akc__ic {
  position: absolute; top: 22px; right: 22px; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.14); color: #fff;
}
.akc__v { font-size: clamp(42px, 4.4vw, 66px); font-weight: 800; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.akc__a { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.akc--navy { background: radial-gradient(110% 95% at 100% 0%, rgba(1,140,227,.55) 0%, rgba(1,140,227,0) 58%), var(--navy-deep); }
.akc--sky  { background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%), var(--sky-deep); }
.akc--sky .akc__v { font-size: clamp(36px, 3.6vw, 54px); }
.akc--photo { background: var(--navy); }
.akc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
a.akc--photo:hover .akc__img { transform: scale(1.04); }
.akc--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3,24,50,.92) 0%, rgba(3,24,50,.35) 60%, rgba(3,24,50,.15) 100%); }
.akc--light { background: var(--bg-soft); border: 1px solid var(--line); color: var(--navy); }
a.akc--light:hover { color: var(--navy); }
.akc--light .akc__ic { background: #fff; color: var(--sky-ink); box-shadow: 0 4px 14px rgba(4,56,116,.10); }
.akc--light .akc__a { color: var(--ink-2); font-weight: 500; }
@media (max-width: 999px) { .akr__grid { max-width: 720px; } }
@media (max-width: 560px) {
  .akr__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .akr__col { gap: 12px; }
  .akr__col--2 { margin-top: 22px; }
  .akc { min-height: 178px; padding: 18px; border-radius: 20px; }
  .akc__ic { top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; }
  .akc__ic svg { width: 19px; height: 19px; }
  .akc__v { font-size: 34px; }
  .akc--sky .akc__v { font-size: 25px; }
  .akc__a { font-size: 13.5px; margin-top: 8px; }
}

/* ---------------------------------------------- AY-KA WhatsApp ile sipariş bandı */
.wab { padding: var(--sp-7) 0; }
.wab__box {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 40px; align-items: center;
  padding: clamp(28px, 4.4vw, 64px); border-radius: 30px; color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgba(37,211,102,.30) 0%, rgba(37,211,102,0) 60%), #064E45;
}
@media (min-width: 980px) { .wab__box { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; } }
.wab__tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--pill);
  background: rgba(255,255,255,.12); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.wab__tag svg { color: #7FE0B3; }
.wab__h { margin: 18px 0 16px; color: #fff; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.03em; }
.wab__h em { font-style: normal; color: #7FE0B3; }
.wab__p { margin: 0 0 26px; font-size: 17.5px; line-height: 1.65; color: #E3F4EC; max-width: 52ch; }
.wab__steps { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.wab__steps li { display: flex; align-items: center; gap: 14px; font-size: 16.5px; font-weight: 650; }
.wab__steps span {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(127,224,179,.6); color: #7FE0B3; font-weight: 800; font-size: 15px;
}
.wab__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.wab__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: var(--pill);
  background: #25D366; color: #0B2E26; font-size: 16.5px; font-weight: 800; transition: background .16s;
}
.wab__btn:hover { background: #fff; color: #064E45; }
.wab__num { display: flex; flex-direction: column; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wab__num small { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9FD9C2; }
.wab__num:hover { color: #7FE0B3; }

.wab__chat { justify-self: center; width: 100%; max-width: 420px; border-radius: 24px; overflow: hidden; background: #EFEAE2; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); transform: rotate(1.5deg); }
.wab__chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #075E54; }
.wab__chat-head b { display: block; font-size: 15px; }
.wab__chat-head small { display: block; font-size: 12.5px; color: #CDE9E2; font-variant-numeric: tabular-nums; }
.wab__av { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.wab__av img { width: 34px; height: auto; }
.wab__chat-body { display: grid; gap: 10px; padding: 18px 16px 22px; }
.wab__b { max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; color: #111B21; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wab__b--out { justify-self: end; background: #D9FDD3; border-top-right-radius: 3px; }
.wab__b--in  { justify-self: start; background: #fff; border-top-left-radius: 3px; }
.wab__b--list { padding: 6px; }
.wab__paper {
  display: grid; gap: 0; padding: 12px 14px; border-radius: 8px; background-color: #FFFDF5;
  /* çizgiler her satırın tabanına oturur: 12px üst boşluk + 26px satır yüksekliği */
  background-image: repeating-linear-gradient(transparent 0 25px, #E7DFC7 25px 26px);
  background-position: 0 12px;
  font-size: 14px; line-height: 26px; color: #2B3A4A; transform: rotate(-1.2deg);
}
.wab__paper span::before { content: "– "; color: #8A97A6; }
@media (max-width: 979px) { .wab__chat { transform: none; } }
@media (prefers-reduced-motion: reduce) { .akc, .akc__img { transition: none; } }

/* ---- teklif formu: liste özeti */
.qlist { margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.qlist__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--bg-soft); font-size: 14.5px; }
.qlist__head a { color: var(--sky-ink); font-weight: 700; font-size: 14px; }
.qlist ul { list-style: none; margin: 0; padding: 6px 16px 10px; max-height: 260px; overflow-y: auto; }
.qlist li { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.qlist li:last-child { border-bottom: 0; }
.qlist li span { flex: none; min-width: 72px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }