/* İlim Ticaret — site stili
   Renkler logodan: lacivert yazı, alev kırmızısı/turuncusu (tüp, soba) ve su mavisi.
   Yazı tipi Archivo: başlıklar geniş (tabela gibi), metin normal genişlikte. */

:root {
  --lacivert: #102a54;
  --lacivert-koyu: #0a1c3b;
  --lacivert-2: #1d3c70;
  --kirmizi: #e0262d;
  --kirmizi-koyu: #b81a20;
  --turuncu: #ff8a1f;
  --sari: #ffc23a;
  --mavi: #1c74d9;
  --mavi-acik: #e8f2fd;
  --kagit: #f5f7fa;
  --beyaz: #fff;
  --murekkep: #0f1b2d;
  --gri: #56627a;
  --gri-acik: #8792a6;
  --cizgi: #dce2eb;
  --wp: #25d366;
  --wp-yazi: #063d1d;

  --f: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --genis: 116%;
  --r: 18px;
  --golge: 0 1px 2px rgb(15 27 45 / .06), 0 18px 40px -22px rgb(15 27 45 / .45);
  --gecis: 220ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 1.0625rem/1.6 var(--f);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--f); font-stretch: var(--genis); line-height: 1.02; letter-spacing: -.012em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 3px; border-radius: 6px; }

.kap { width: min(100% - 32px, 1240px); margin-inline: auto; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--murekkep); color: #fff; }
.atla:focus { top: 12px; }
.ikon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Düğmeler ---------- */
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.35em;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 700 1rem/1 var(--f); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.dugme:hover { transform: translateY(-1px); }
.dugme .ikon { width: 1.15em; height: 1.15em; }
.dugme-buyuk { padding: 1em 1.6em; font-size: 1.06rem; }
.dugme-kirmizi { background: var(--kirmizi); color: #fff; box-shadow: 0 10px 24px -12px rgb(224 38 45 / .8); }
.dugme-kirmizi:hover { background: var(--kirmizi-koyu); }
.dugme-koyu { background: var(--lacivert); color: #fff; }
.dugme-koyu:hover { background: var(--lacivert-koyu); }
.dugme-acik { border-color: rgb(255 255 255 / .35); color: #fff; }
.dugme-acik:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.dugme-cizgi { border-color: var(--cizgi); background: var(--beyaz); color: var(--murekkep); }
.dugme-cizgi:hover { border-color: var(--murekkep); }
/* WhatsApp yeşili üzerinde koyu yazı: beyaz yazı bu yeşilde okunmaz */
.dugme-wp { background: var(--wp); color: var(--wp-yazi); }
.dugme-wp:hover { background: #2ee374; }
.dugme-ig { background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff; }
.dugme-ig:hover { filter: brightness(1.07); }

/* ---------- Üst şerit ve başlık ---------- */
.ust-serit { background: var(--lacivert-koyu); color: rgb(255 255 255 / .78); font-size: .86rem; }
.ust-serit-ic { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.ust-serit-bilgi { display: inline-flex; align-items: center; gap: 8px; }
.ust-serit-bilgi > span { opacity: .45; }
.ust-serit ul { display: flex; align-items: center; gap: 22px; }
.ust-serit a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.ust-serit a:hover { color: #fff; }
.ust-serit .ikon { width: 15px; height: 15px; color: var(--sari); }

.site-baslik {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--cizgi);
}
.site-baslik-ic { display: flex; align-items: center; gap: 22px; min-height: 78px; }
.marka { display: block; margin-right: auto; text-decoration: none; }
.marka img { width: auto; height: 42px; }

.ana-menu ul { display: flex; gap: 2px; }
.ana-menu a {
  position: relative; display: block; padding: 10px 12px; white-space: nowrap;
  font: 600 .98rem/1 var(--f); text-decoration: none; color: var(--lacivert);
}
.ana-menu a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 3px;
  background: var(--kirmizi); transform: scaleX(0); transform-origin: left; transition: transform var(--gecis);
}
.ana-menu a:hover::after, .ana-menu a[aria-current="page"]::after { transform: scaleX(1); }

.hat-dugme {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px;
  border-radius: 999px; background: var(--kirmizi); color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px -14px rgb(224 38 45 / .9); transition: background var(--gecis), transform var(--gecis);
}
.hat-dugme:hover { background: var(--kirmizi-koyu); transform: translateY(-1px); }
.hat-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.hat-ikon .ikon { width: 20px; height: 20px; }
.hat-yazi { display: grid; line-height: 1.1; }
.hat-yazi small { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hat-yazi strong { white-space: nowrap; font-size: 1.12rem; font-stretch: 108%; font-variant-numeric: tabular-nums; }

.menu-dugmesi {
  display: none; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--beyaz); color: var(--murekkep); cursor: pointer;
}
.menu-dugmesi .ikon-kapat, .menu-dugmesi[aria-expanded="true"] .ikon-ac { display: none; }
.menu-dugmesi[aria-expanded="true"] .ikon-kapat { display: block; }

/* ---------- Bölüm ortakları ---------- */
.bolum { padding-block: clamp(64px, 9vw, 116px); }
.bolum--ince { padding-block: clamp(36px, 5vw, 64px) clamp(64px, 8vw, 100px); }
.bolum--acik { background: var(--beyaz); }
.bolum-baslik { display: grid; gap: 16px; max-width: 780px; margin-bottom: clamp(32px, 5vw, 52px); }
.bolum-baslik h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 800; color: var(--lacivert); }
.bolum-baslik p:not(.ust-yazi) { max-width: 62ch; font-size: 1.12rem; color: var(--gri); }
.bolum-baslik--yatay { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.bolum-baslik--yatay > div { display: grid; gap: 16px; max-width: 780px; }
.ust-yazi {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .8rem/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--kirmizi);
}
.ust-yazi::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--kirmizi), var(--turuncu)); }
.ust-yazi--acik { color: var(--sari); }
.bos { padding: 64px 16px; text-align: center; color: var(--gri); }
.kucuk-baslik { font-size: 1.35rem; font-weight: 800; color: var(--lacivert); }

/* ---------- Kahraman ---------- */
.kahraman {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(720px 460px at 8% 0%, rgb(224 38 45 / .28), transparent 64%),
    radial-gradient(760px 520px at 96% 100%, rgb(28 116 217 / .38), transparent 62%),
    linear-gradient(160deg, var(--lacivert-2) 0%, var(--lacivert) 46%, var(--lacivert-koyu) 100%);
}
.kahraman::before {
  content: ""; position: absolute; right: -90px; bottom: -110px; width: 560px; aspect-ratio: 1;
  background: url("../img/simge-zeminsiz.svg") no-repeat center / contain; opacity: .07; pointer-events: none;
}
.kahraman-ic {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: clamp(44px, 6vw, 80px) clamp(88px, 9vw, 120px);
}
.rozetler { display: flex; flex-wrap: wrap; gap: 8px; }
.rozetler li {
  padding: 7px 14px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px;
  background: rgb(255 255 255 / .06); font-size: .86rem; color: rgb(255 255 255 / .82);
}
.rozetler strong { color: #fff; }
.kahraman h1 {
  margin-block: 24px 22px;
  font-size: clamp(2.6rem, 6.2vw, 5.1rem); font-weight: 850; line-height: .98; letter-spacing: -.02em;
}
.kahraman h1 span {
  display: block;
  background: linear-gradient(90deg, #ff6b4a, var(--sari)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kahraman-giris { max-width: 52ch; margin-bottom: 30px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: rgb(255 255 255 / .8); }
.kahraman-gruplar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.kahraman-gruplar a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 10px;
  border-radius: 10px; background: rgb(255 255 255 / .08); font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background var(--gecis);
}
.kahraman-gruplar a:hover { background: rgb(255 255 255 / .16); }
.kahraman-gruplar .ikon { width: 18px; height: 18px; color: var(--sari); }

/* ---------- Hızlı sipariş kutusu ---------- */
.siparis {
  display: grid; gap: 18px; padding: 24px;
  border-radius: 22px; background: var(--beyaz); color: var(--murekkep);
  box-shadow: 0 40px 80px -36px rgb(0 0 0 / .65), 0 0 0 1px rgb(15 27 45 / .04);
}
.siparis-bas { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px dashed var(--cizgi); }
.siparis-etiket {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px;
  border-radius: 999px; background: #fdecec; color: var(--kirmizi);
  font: 800 .74rem/1 var(--f); letter-spacing: .14em; text-transform: uppercase;
}
.canli { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--kirmizi); }
.canli::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--kirmizi); animation: nabiz 1.8s ease-out infinite; }
@keyframes nabiz { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
.siparis-tel {
  justify-self: start; margin-top: 4px;
  font: 850 clamp(2rem, 3.4vw, 2.5rem)/1 var(--f); font-stretch: 110%; letter-spacing: -.01em;
  color: var(--lacivert); text-decoration: none; font-variant-numeric: tabular-nums;
}
.siparis-tel:hover { color: var(--kirmizi); }
.siparis-gsm { display: flex; flex-wrap: wrap; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--gri); font-variant-numeric: tabular-nums; }
.siparis-gsm a { text-decoration: none; }
.siparis-gsm a:hover { color: var(--kirmizi); }
.siparis-govde { display: grid; gap: 12px; }
.siparis-baslik { margin-bottom: 2px; font: 800 1.05rem/1.2 var(--f); color: var(--lacivert); }
.siparis-urun {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 10px 10px 10px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kagit);
}
.siparis-urun-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--beyaz); color: var(--kirmizi); }
.siparis-urun:nth-of-type(2) .siparis-urun-ikon { color: var(--mavi); }
.siparis-urun-ikon .ikon { width: 24px; height: 24px; }
.siparis-urun-ad { display: grid; line-height: 1.2; }
.siparis-urun-ad strong { font-size: 1rem; }
.siparis-urun-ad small { font-size: .8rem; color: var(--gri); }
.adet { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: var(--beyaz); border: 1px solid var(--cizgi); }
.adet button {
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: var(--kagit); color: var(--lacivert); cursor: pointer;
}
.adet button:hover { background: var(--lacivert); color: #fff; }
.adet button .ikon { width: 16px; height: 16px; }
.adet input {
  width: 36px; border: 0; background: none; text-align: center;
  font: 800 1.1rem/1 var(--f); color: var(--murekkep); -moz-appearance: textfield; appearance: textfield;
}
.adet input::-webkit-inner-spin-button, .adet input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.alan { display: grid; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--lacivert); }
.alan small { font-weight: 500; color: var(--gri-acik); }
.alan input, .alan textarea, .boya-alanlar input, .boya-alanlar select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--cizgi); border-radius: 12px; background: var(--beyaz);
  font: 500 1rem/1.35 var(--f); color: var(--murekkep); resize: vertical;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:focus, .alan textarea:focus, .boya-alanlar input:focus, .boya-alanlar select:focus {
  outline: 0; border-color: var(--mavi); box-shadow: 0 0 0 4px rgb(28 116 217 / .15);
}
.alan [aria-invalid="true"] { border-color: var(--kirmizi); box-shadow: 0 0 0 4px rgb(224 38 45 / .12); }
.hatirla { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--gri); cursor: pointer; }
.hatirla input { width: 18px; height: 18px; accent-color: var(--lacivert); }
.siparis-uyari { padding: 10px 12px; border-radius: 10px; background: #fdecec; color: var(--kirmizi-koyu); font-size: .9rem; font-weight: 600; }
.siparis-dugmeler { display: flex; gap: 10px; }
.siparis-dugmeler .dugme-wp { flex: 1; }
.siparis-not { font-size: .8rem; color: var(--gri-acik); }

/* ---------- Güven şeridi ---------- */
.guven-serit { position: relative; z-index: 2; margin-top: -54px; }
.guven {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 20px; background: var(--beyaz); box-shadow: var(--golge);
}
.guven li { display: grid; grid-template-columns: 48px 1fr; gap: 2px 14px; align-items: center; padding: 22px 24px; }
.guven li + li { border-left: 1px solid var(--cizgi); }
.guven-ikon { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fdecec; color: var(--kirmizi); }
.guven li:nth-child(2) .guven-ikon { background: var(--mavi-acik); color: var(--mavi); }
.guven li:nth-child(3) .guven-ikon { background: #fff3e4; color: #d96a00; }
.guven li:nth-child(4) .guven-ikon { background: #e9edf5; color: var(--lacivert); }
.guven-ikon .ikon { width: 24px; height: 24px; }
.guven strong { font-size: 1.04rem; font-stretch: 108%; color: var(--lacivert); line-height: 1.2; }
.guven li > span:last-child { font-size: .88rem; color: var(--gri); line-height: 1.35; }

/* ---------- Ürün grupları ---------- */
.urun-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.urun-kart {
  --vurgu: var(--kirmizi);
  position: relative; display: flex; flex-direction: column; gap: 12px; overflow: hidden;
  padding: 26px 22px 20px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--beyaz);
  scroll-margin-top: 110px;
  transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.urun-kart::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--vurgu); }
.urun-kart:hover, .urun-kart:target { border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); transform: translateY(-3px); box-shadow: var(--golge); }
.urun-kart--su { --vurgu: var(--mavi); }
.urun-kart--soba { --vurgu: #e8590c; }
.urun-kart--boya { --vurgu: #7b4fd6; }
.urun-kart--beyaz-esya { --vurgu: #3f6fa8; }
.urun-kart--mobilya { --vurgu: #a8672e; }
.urun-kart--kucuk-ev { --vurgu: #0f9b8e; }
.urun-ikon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
  background: color-mix(in srgb, var(--vurgu) 11%, #fff); color: var(--vurgu);
}
.urun-ikon .ikon { width: 28px; height: 28px; }
.urun-kart h3 { font-size: 1.32rem; font-weight: 800; color: var(--lacivert); }
.urun-kart p { font-size: .96rem; color: var(--gri); }
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cipler li { padding: 4px 10px; border-radius: 999px; background: var(--kagit); font-size: .78rem; font-weight: 600; color: var(--gri); }
.urun-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--cizgi); }
.urun-sor, .urun-gor { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 700; text-decoration: none; }
.urun-sor { color: #128c4b; }
.urun-sor .ikon { width: 18px; height: 18px; }
.urun-gor { color: var(--gri); }
.urun-gor .ikon { width: 16px; height: 16px; transition: transform var(--gecis); }
.urun-sor:hover, .urun-gor:hover { text-decoration: underline; text-underline-offset: 3px; }
.urun-gor:hover .ikon { transform: translateX(3px); }
.urun-kart--vurgu { border-color: var(--lacivert); background: var(--lacivert); color: #fff; }
.urun-kart--vurgu::before { background: linear-gradient(90deg, var(--kirmizi), var(--turuncu), var(--mavi)); }
.urun-kart--vurgu .urun-ikon { background: rgb(255 255 255 / .1); color: var(--sari); }
.urun-kart--vurgu h3 { color: #fff; }
.urun-kart--vurgu p { color: rgb(255 255 255 / .75); }
.urun-kart--vurgu .dugme { margin-top: auto; }
.buyuk-tel { font: 850 1.75rem/1 var(--f); font-stretch: 110%; text-decoration: none; font-variant-numeric: tabular-nums; }
.buyuk-tel:hover { color: var(--sari); }

/* ---------- Tüp & su ---------- */
.bolum--koyu {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(600px 420px at 18% 50%, rgb(28 116 217 / .32), transparent 64%),
    radial-gradient(520px 380px at 30% 70%, rgb(224 38 45 / .2), transparent 60%),
    var(--lacivert-koyu);
}
.bolum--koyu .bolum-baslik h2 { color: #fff; }
.bolum--koyu .bolum-baslik p:not(.ust-yazi) { color: rgb(255 255 255 / .75); }
.bolum--koyu .bolum-baslik { margin-bottom: 30px; }
.tup-su-ic { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.tup-su-gorsel { position: relative; display: grid; justify-items: center; }
.tup-su-cizim { width: min(100%, 420px); filter: drop-shadow(0 30px 40px rgb(0 0 0 / .35)); }
.tup-su-rozet {
  margin-top: 18px; padding: 9px 16px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px;
  background: rgb(255 255 255 / .06); font-size: .9rem; color: rgb(255 255 255 / .8);
}
.tup-su-rozet strong { color: #fff; }
.adimlar { display: grid; gap: 14px; margin-bottom: 30px; counter-reset: adim; }
.adimlar li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.adimlar li > span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--kirmizi), var(--turuncu)); font: 850 1.2rem/1 var(--f);
}
.adimlar strong { display: block; font-size: 1.12rem; font-stretch: 108%; }
.adimlar p { color: rgb(255 255 255 / .7); font-size: .96rem; }
.guvenlik {
  margin-top: 30px; padding: 16px 18px; border-left: 4px solid var(--sari); border-radius: 0 14px 14px 0;
  background: rgb(255 194 58 / .09); font-size: .92rem; color: rgb(255 255 255 / .8);
}
.guvenlik strong { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--sari); }
.guvenlik .ikon { width: 18px; height: 18px; }

/* ---------- Boya ---------- */
.bolum--boya { background: linear-gradient(180deg, #fbf8f3 0%, #f5f0e8 100%); }
.boya-ic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.boya-ic .bolum-baslik { margin-bottom: 26px; }
.renkler { display: flex; margin-bottom: 30px; }
.renkler li {
  width: 52px; height: 72px; margin-right: -10px; border: 3px solid #fff; border-radius: 10px; background: var(--r);
  box-shadow: 0 10px 18px -10px rgb(0 0 0 / .45); transition: transform var(--gecis);
}
.renkler li:nth-child(odd) { transform: rotate(-4deg); }
.renkler li:nth-child(even) { transform: rotate(3deg) translateY(4px); }
.renkler:hover li { transform: translateY(-4px); }
.boya-hesap { display: grid; gap: 14px; padding: 22px; border: 1px solid #e8dfd0; border-radius: var(--r); background: var(--beyaz); }
.boya-hesap h3 { font-size: 1.15rem; font-weight: 800; color: var(--lacivert); }
.boya-alanlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.boya-alanlar label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--gri); }
.boya-alanlar input, .boya-alanlar select { padding: 10px 12px; }
.boya-sonuc { font-size: 1.05rem; color: var(--gri); }
.boya-sonuc output { font: 850 1.6rem/1 var(--f); font-stretch: 110%; color: var(--lacivert); }
.boya-not { font-size: .8rem; color: var(--gri-acik); }
.boya-gorsel { position: relative; margin: 0; }
.boya-gorsel img { width: 100%; border-radius: var(--r); box-shadow: 0 40px 70px -34px rgb(60 40 10 / .55); }
.boya-gorsel figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: rgb(10 28 59 / .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .85rem; color: #fff;
}
.boya-gorsel figcaption .ikon { width: 16px; height: 16px; }

/* ---------- Instagram kartları ---------- */
.kart-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 32px 20px; }
.kart-baglanti { display: block; text-decoration: none; }
.kart-gorsel { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #e6ebf2; }
.kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 640ms cubic-bezier(.2, .7, .2, 1); }
.kart:hover .kart-gorsel img { transform: scale(1.045); }
.kart-ig {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--murekkep);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--gecis), transform var(--gecis);
}
.kart-ig .ikon { width: 17px; height: 17px; }
.kart:hover .kart-ig, .kart-baglanti:focus-visible .kart-ig { opacity: 1; transform: none; }
.kart-yeni, .kart-coklu, .kart-video {
  position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px; font: 700 .72rem/1 var(--f); letter-spacing: .08em; text-transform: uppercase;
}
.kart-yeni { left: 10px; background: var(--sari); color: var(--lacivert-koyu); }
.kart-coklu, .kart-video { right: 48px; background: rgb(10 28 59 / .72); color: #fff; }
.kart-coklu::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: 2px -2px 0 -0.5px currentColor; }
.kart-yedek {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 22px;
  background: var(--lacivert); color: #fff; text-align: center; font: 700 1.1rem/1.3 var(--f);
}
.kart-govde { display: grid; gap: 6px; padding: 14px 2px 0; }
.kart-etiket { font: 700 .72rem/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--kirmizi); }
.kart--genel .kart-etiket { color: var(--mavi); }
.kart--kampanya .kart-etiket { color: #d96a00; }
.kart-baslik { font: 750 1.14rem/1.2 var(--f); color: var(--lacivert); }
.kart-baglanti:hover .kart-baslik { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--kirmizi); }
.kart-alt { font-size: .86rem; color: var(--gri); }

.bolum-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.cip-satiri { display: flex; flex-wrap: wrap; gap: 8px; }
.cip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: var(--beyaz);
  font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--murekkep);
  transition: border-color var(--gecis), background var(--gecis), color var(--gecis);
}
.cip .ikon { width: 17px; height: 17px; color: var(--kirmizi); }
.cip small { font-size: .78rem; font-weight: 600; color: var(--gri-acik); }
.cip:hover { border-color: var(--murekkep); }
.cip[aria-current="true"] { border-color: var(--lacivert); background: var(--lacivert); color: #fff; }
.cip[aria-current="true"] small, .cip[aria-current="true"] .ikon { color: rgb(255 255 255 / .75); }

/* ---------- Hakkımızda ---------- */
.hakkimizda-ic { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.hakkimizda-yil { position: relative; display: grid; }
.hakkimizda-yil span {
  position: absolute; z-index: 0; left: -6px; top: -76px;
  font: 900 clamp(5rem, 11vw, 9rem)/1 var(--f); font-stretch: 120%; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px var(--kirmizi); opacity: .9;
}
.hakkimizda-yil img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: var(--golge); }
.hakkimizda-metin { display: grid; gap: 16px; font-size: 1.08rem; color: var(--gri); }
.aile { margin-top: 30px; padding: 20px 22px; border-radius: var(--r); background: var(--kagit); }
.aile-baslik { margin-bottom: 14px; font: 700 .78rem/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--gri-acik); }
.aile ul { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.aile li { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lacivert); }
.aile-bas {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lacivert); color: #fff; font: 800 1rem/1 var(--f);
}
.aile li:nth-child(2) .aile-bas { background: var(--kirmizi); }
.aile li:nth-child(3) .aile-bas { background: var(--mavi); }

/* ---------- İletişim ---------- */
.iletisim-izgara { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.magaza-kart { display: grid; align-content: start; gap: 18px; padding: 30px; border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--beyaz); }
.magaza-kart h3 { font-size: 1.9rem; font-weight: 850; color: var(--lacivert); }
.bilgi-listesi { display: grid; gap: 14px; margin: 0; }
.bilgi-listesi > div { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.bilgi-listesi dt { padding-top: 2px; color: var(--kirmizi); }
.bilgi-listesi dt .ikon { width: 20px; height: 20px; }
.bilgi-listesi dd { margin: 0; color: var(--gri); }
.bilgi-listesi dd a { font-weight: 700; color: var(--murekkep); text-decoration: none; }
.bilgi-listesi dd a:hover { color: var(--kirmizi); }
.bilgi-listesi address { font-style: normal; }
.bilgi-listesi strong { color: var(--murekkep); }
.tel-listesi { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.tel-listesi a { display: flex; gap: 10px; font-size: 1.05rem; }
.tel-listesi span { min-width: 104px; font-size: .86rem; font-weight: 500; color: var(--gri); }
.harita-kutu { min-height: 380px; overflow: hidden; border-radius: var(--r); background: #e6ebf2; }
.harita-kutu iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }
.iletisim-sayfa { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; gap: 24px; }
.iletisim-sayfa .iletisim-izgara { grid-template-columns: minmax(0, 1fr); }
.iletisim-siparis { position: sticky; top: 104px; display: grid; gap: 14px; }
.iletisim-siparis .siparis { box-shadow: var(--golge); border: 1px solid var(--cizgi); }

/* ---------- İç sayfa başlığı ve süzgeç ---------- */
.sayfa-baslik {
  color: #fff;
  background:
    radial-gradient(700px 360px at 90% 0%, rgb(28 116 217 / .35), transparent 62%),
    radial-gradient(500px 300px at 0% 100%, rgb(224 38 45 / .22), transparent 60%),
    var(--lacivert);
  padding-block: clamp(40px, 6vw, 76px);
}
.yol-izi { display: flex; gap: 8px; font-size: .86rem; color: rgb(255 255 255 / .62); }
.yol-izi a { text-decoration: none; }
.yol-izi a:hover { color: #fff; }
.sayfa-baslik h1 { margin-block: 16px 14px; font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 850; }
.sayfa-baslik p:not(.yol-izi) { max-width: 62ch; font-size: 1.1rem; color: rgb(255 255 255 / .8); }
.ig-rozet {
  display: grid; place-items: center; width: 46px; height: 46px; margin-top: 22px; border-radius: 14px;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff;
  box-shadow: 0 12px 26px -12px rgb(0 0 0 / .6); transition: transform var(--gecis);
}
.ig-rozet:hover { transform: translateY(-2px) rotate(-4deg); }
.ig-rozet .ikon { width: 26px; height: 26px; }
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.sonuc-bilgi { margin-bottom: 24px; color: var(--gri); }
.sayfalama { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 56px; }
.sayfalama a, .sayfalama span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 12px;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--beyaz); font-weight: 600; text-decoration: none;
}
.sayfalama a:hover { border-color: var(--murekkep); }
.sayfalama [aria-current="page"] { border-color: var(--lacivert); background: var(--lacivert); color: #fff; }
.sor-bandi {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding: 22px 24px; border-radius: var(--r); background: var(--beyaz); border: 1px solid var(--cizgi);
}
.sor-bandi p { color: var(--gri); }
.sor-bandi strong { color: var(--lacivert); }

/* ---------- Alt bölüm ---------- */
.site-alt { padding-top: 72px; background: var(--lacivert-koyu); color: rgb(255 255 255 / .74); font-size: .95rem; }
.alt-izgara { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr 1fr; gap: 40px; padding-bottom: 56px; }
.site-alt h2 { margin-bottom: 18px; font: 800 .85rem/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--sari); }
.site-alt ul { display: grid; gap: 10px; }
.site-alt a { text-decoration: none; }
.site-alt a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.alt-marka img { width: 220px; height: auto; margin-bottom: 18px; }
.alt-not { max-width: 38ch; }
.alt-etiket { display: inline-block; min-width: 108px; color: rgb(255 255 255 / .45); }
.sosyal { display: flex; gap: 10px; margin-top: 22px; }
.sosyal a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; transition: background var(--gecis), border-color var(--gecis); }
.sosyal a:hover { border-color: var(--sari); background: rgb(255 194 58 / .12); }
.ig-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.ig-mini a { aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.ig-mini img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gecis), opacity var(--gecis); }
.ig-mini a:hover img { transform: scale(1.06); opacity: .85; }
.alt-ig { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.alt-ig .ikon { width: 18px; height: 18px; }
.alt-cizgi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 22px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .84rem; color: rgb(255 255 255 / .5); }

.wp-dugme {
  position: fixed; right: 18px; bottom: 18px; z-index: 35; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px 12px 14px; border-radius: 999px; background: var(--wp); color: var(--wp-yazi);
  font-weight: 700; text-decoration: none; box-shadow: 0 14px 32px -12px rgb(0 0 0 / .55);
  transition: transform var(--gecis), background var(--gecis);
}
.wp-dugme:hover { transform: translateY(-2px); background: #2ee374; }
.wp-dugme .ikon { width: 26px; height: 26px; }
.alt-bar { display: none; }

/* ---------- Gönderi penceresi ---------- */
html.pencere-acik { overflow: hidden; }
.pencere {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--murekkep);
}
.pencere[open] { display: grid; place-items: center; }
.pencere::backdrop { background: rgb(6 16 34 / .84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pencere-ic {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  width: min(1100px, 100% - 160px); height: min(740px, 100% - 48px); overflow: hidden;
  border-radius: 20px; background: var(--beyaz); box-shadow: 0 40px 100px -30px rgb(0 0 0 / .75);
  animation: pencere-gir 280ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes pencere-gir { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.pencere-medya { position: relative; display: grid; place-items: center; min-height: 0; background: #0b1424; }
.pencere-resim { width: 100%; height: 100%; object-fit: contain; transition: opacity 200ms; }
.pencere-resim.yukleniyor { opacity: .25; }
.pencere-galeri {
  position: absolute; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: var(--murekkep); cursor: pointer;
}
.pencere-galeri--onceki { left: 12px; }
.pencere-galeri--onceki .ikon, .pencere-gec--onceki .ikon, .pencere-mobil-gec [data-git="-1"] .ikon { transform: rotate(180deg); }
.pencere-galeri--sonraki { right: 12px; }
.pencere-galeri[hidden], .pencere-gec[disabled], .pencere-mobil-gec [disabled] { visibility: hidden; }
.pencere-noktalar { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.pencere-noktalar i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .45); }
.pencere-noktalar i.aktif { background: #fff; }
.pencere-video {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 999px;
  background: rgb(0 0 0 / .65); color: #fff; font-size: .85rem; font-weight: 600;
}
.pencere-bilgi { display: flex; flex-direction: column; min-height: 0; }
.pencere-ust { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--cizgi); }
.pencere-ust img { width: 40px; height: 40px; }
.pencere-hesap { display: grid; margin-right: auto; line-height: 1.25; }
.pencere-hesap strong { font-size: .95rem; }
.pencere-tarih { font-size: .82rem; color: var(--gri); }
.pencere-sayac { font-size: .82rem; font-weight: 600; color: var(--gri-acik); font-variant-numeric: tabular-nums; }
.pencere-kapat {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--cizgi);
  border-radius: 50%; background: var(--beyaz); color: var(--murekkep); cursor: pointer;
}
.pencere-kapat:hover { border-color: var(--murekkep); }
.pencere-govde { display: grid; align-content: start; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 18px; }
.pencere-govde h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; color: var(--lacivert); }
.pencere-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.pencere-cipler a {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--kagit); font-size: .84rem; font-weight: 600; text-decoration: none;
}
.pencere-cipler a:hover { border-color: var(--murekkep); }
.pencere-cipler .ikon { width: 14px; height: 14px; color: var(--kirmizi); }
.pencere-metin { white-space: pre-line; font-size: .98rem; color: var(--gri); overflow-wrap: anywhere; }
.pencere-alt { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 18px; border-top: 1px solid var(--cizgi); }
.pencere-alt .dugme { padding: .8em 1.15em; font-size: .95rem; }
.pencere-alt .pencere-ig, .pencere-alt .pencere-wp { flex: 1 1 0; min-width: 0; gap: .4em; padding-inline: .6em; font-size: .88rem; }
.pencere-sor { padding: .8em; }
.pencere-mobil-gec { display: none; }
.pencere-gec {
  position: fixed; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px;
  border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; cursor: pointer;
  transition: background var(--gecis);
}
.pencere-gec:hover { background: rgb(255 255 255 / .22); }
.pencere-gec--onceki { left: 24px; }
.pencere-gec--sonraki { right: 24px; }

/* Telefonda tam ekran: başlık üstte sabit, görsel, metin, düğmeler altta sabit */
@media (max-width: 900px) {
  .pencere-ic { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; border-radius: 0; }
  .pencere-bilgi { display: contents; }
  .pencere-ust { position: sticky; top: 0; z-index: 2; order: -1; background: var(--beyaz); }
  .pencere-medya { flex: none; height: min(60vh, 125vw); }
  .pencere-govde { flex: 1 0 auto; overflow: visible; }
  .pencere-alt { position: sticky; bottom: 0; z-index: 2; background: var(--beyaz); }
  .pencere-gec { display: none; }
  .pencere-mobil-gec { display: flex; gap: 8px; margin-left: auto; }
  .pencere-mobil-gec .dugme { padding: .8em; }
  .pencere-alt .pencere-ig, .pencere-alt .pencere-wp { flex: 1 1 calc(50% - 5px); gap: .4em; padding-inline: .5em; font-size: .88rem; }
}

/* ---------- Duyarlı düzen ---------- */
/* Ana sayfa duvarı 8 kart: 3 sütunlu aralıkta son satır yarım kalmasın */
@media (min-width: 858px) and (max-width: 1139px) {
  .kart-izgara--duvar > :nth-child(n + 7) { display: none; }
}

@media (max-width: 1180px) {
  .ana-menu a { padding-inline: 9px; }
  .ana-menu a::after { left: 9px; right: 9px; }
  .hat-yazi small { display: none; }
}

@media (max-width: 1100px) {
  .menu-dugmesi { display: grid; }
  .ana-menu { position: absolute; inset: 100% 0 auto; display: none; border-bottom: 1px solid var(--cizgi); background: var(--beyaz); box-shadow: var(--golge); }
  .ana-menu.acik { display: block; }
  .ana-menu ul { flex-direction: column; gap: 0; width: min(100% - 32px, 1240px); margin-inline: auto; padding-block: 4px 16px; }
  .ana-menu a { padding: 15px 2px; border-bottom: 1px solid var(--cizgi); font-size: 1.15rem; }
  .ana-menu a::after { display: none; }
  .ana-menu a[aria-current="page"] { color: var(--kirmizi); }
  .site-baslik-ic { gap: 10px; min-height: 66px; }
  .marka img { height: 36px; }
  .hat-dugme { padding: 5px 16px 5px 5px; }
  .hat-ikon { width: 36px; height: 36px; }
  .urun-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
  .guven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guven li:nth-child(3) { border-left: 0; }
  .guven li:nth-child(n + 3) { border-top: 1px solid var(--cizgi); }
  .iletisim-sayfa { grid-template-columns: minmax(0, 1fr); }
  .iletisim-siparis { position: static; }
}

@media (max-width: 960px) {
  .ust-serit .genis { display: none; }
  .kahraman-ic, .tup-su-ic, .boya-ic, .hakkimizda-ic, .iletisim-izgara { grid-template-columns: minmax(0, 1fr); }
  .kahraman-ic { padding-bottom: 96px; }
  .tup-su-gorsel { order: 2; }
  .hakkimizda-yil { max-width: 460px; margin-top: 50px; }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .wp-dugme { display: none; }
  .alt-bar {
    position: fixed; inset: auto 0 0; z-index: 36; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .96);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--cizgi);
    box-shadow: 0 -10px 30px -18px rgb(15 27 45 / .5);
  }
  .alt-bar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px;
    border-radius: 14px; font-size: .8rem; font-weight: 700; text-decoration: none;
  }
  .alt-bar .ikon { width: 22px; height: 22px; }
  .alt-bar-ara { background: var(--kirmizi); color: #fff; }
  .alt-bar-wp { background: var(--wp); color: var(--wp-yazi); }
  .alt-bar-siparis { background: var(--lacivert); color: #fff; }
  html.pencere-acik .alt-bar { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  /* Dar ekranda uzun düğme yazısı taşmak yerine alt satıra kayar */
  .dugme { white-space: normal; text-align: center; line-height: 1.2; }
  .ust-serit-bilgi { display: none; }
  .ust-serit-ic { justify-content: center; }
  .marka img { height: 30px; }
  .hat-dugme { padding: 4px; }
  .hat-yazi { display: none; }
  .kahraman-ic { padding-top: 32px; }
  .kahraman-gruplar { display: none; }
  .kahraman .dugmeler .dugme { flex: 1 1 calc(50% - 6px); padding-inline: .6em; font-size: 1rem; white-space: nowrap; }
  .siparis { padding: 18px; }
  .siparis-urun { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 8px; }
  .siparis-urun-ikon { width: 38px; height: 38px; }
  .guven { grid-template-columns: minmax(0, 1fr); }
  .guven li { padding: 16px 18px; }
  .guven li + li { border-left: 0; border-top: 1px solid var(--cizgi); }
  .urun-izgara { grid-template-columns: minmax(0, 1fr); }
  .boya-alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .renkler li { width: 40px; height: 58px; }
  .kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .kart-baslik { font-size: 1rem; }
  .kart-alt { font-size: .8rem; }
  .alt-izgara { grid-template-columns: minmax(0, 1fr); }
  .magaza-kart { padding: 22px; }
  .tel-listesi span { min-width: 92px; }
  .harita-kutu, .harita-kutu iframe { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}