/* Yiğido Halı Yıkama - Sivas / tema.css */

/* ============================================================
   1. DEGISKENLER
   ============================================================ */
:root {
  /* Renk kimligi: kirmizi-beyaz baskin */
  --yg-kirmizi: #DC2626;
  --yg-kirmizi-koyu: #991B1B;
  --yg-kirmizi-derin: #7F1D1D;
  --yg-kirmizi-ates: #EF4444;
  --yg-kirmizi-sis: #FEE2E2;
  --yg-kirmizi-pus: #FEF2F2;

  --yg-beyaz: #FFFFFF;
  --yg-siyah: #111111;
  --yg-komur: #1C1C1E;
  --yg-kurum: #27272A;

  --yg-gri-1: #F4F4F5;
  --yg-gri-2: #E4E4E7;
  --yg-gri-3: #D4D4D8;
  --yg-gri-4: #A1A1AA;
  --yg-gri-5: #52525B;
  --yg-gri-6: #3F3F46;

  --yg-yesil: #15803D;
  --yg-sari: #F59E0B;

  /* Metin */
  --yg-metin: #1F1F23;
  --yg-metin-soluk: #52525B;
  --yg-metin-ters: #FFFFFF;

  /* Tipografi */
  --yg-font-baslik: "Oswald", "Arial Narrow", Impact, sans-serif;
  --yg-font-govde: "Roboto", "Segoe UI", Arial, sans-serif;

  --yg-y-3xl: clamp(2.35rem, 1.35rem + 4.4vw, 4.4rem);
  --yg-y-2xl: clamp(1.95rem, 1.25rem + 3.1vw, 3.35rem);
  --yg-y-xl:  clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
  --yg-y-lg:  clamp(1.32rem, 1.06rem + 1.2vw, 1.92rem);
  --yg-y-md:  clamp(1.12rem, 1rem + 0.55vw, 1.42rem);
  --yg-y-sm:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --yg-y-xs:  0.875rem;
  --yg-y-2xs: 0.78rem;

  --yg-satir-sik: 1.16;
  --yg-satir-orta: 1.42;
  --yg-satir-genis: 1.78;

  /* Bosluk olcegi */
  --yg-b1: 4px;
  --yg-b2: 8px;
  --yg-b3: 12px;
  --yg-b4: 16px;
  --yg-b5: 24px;
  --yg-b6: 32px;
  --yg-b7: 48px;
  --yg-b8: 64px;
  --yg-b9: 88px;
  --yg-b10: 120px;

  /* Kose - keskin kimlik */
  --yg-yay-0: 0px;
  --yg-yay-1: 3px;
  --yg-yay-2: 6px;

  /* Golge */
  --yg-golge-1: 0 1px 2px rgba(17, 17, 17, .08);
  --yg-golge-2: 0 4px 14px rgba(17, 17, 17, .11);
  --yg-golge-3: 0 14px 40px rgba(17, 17, 17, .16);
  --yg-golge-kirmizi: 0 10px 28px rgba(220, 38, 38, .34);

  /* Olcu */
  --yg-kap: 1220px;
  --yg-kap-dar: 880px;
  --yg-bar: 84px;
  --yg-gecis: 220ms cubic-bezier(.4, .06, .2, 1);
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--yg-bar) + 20px);
}

body {
  margin: 0;
  font-family: var(--yg-font-govde);
  font-size: 1rem;
  font-weight: 400;
  line-height: var(--yg-satir-genis);
  color: var(--yg-metin);
  background: var(--yg-beyaz);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--yg-b4);
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  line-height: var(--yg-satir-sik);
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--yg-siyah);
}

h1 { font-size: var(--yg-y-3xl); }
h2 { font-size: var(--yg-y-2xl); }
h3 { font-size: var(--yg-y-xl); font-weight: 500; }
h4 { font-size: var(--yg-y-lg); font-weight: 500; }
h5 { font-size: var(--yg-y-md); font-weight: 500; }
h6 { font-size: var(--yg-y-sm); font-weight: 500; }

p { margin: 0 0 var(--yg-b4); }

a { color: var(--yg-kirmizi-koyu); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--yg-kirmizi); }

img, picture, svg, video { max-width: 100%; display: block; height: auto; }

ul, ol { margin: 0 0 var(--yg-b4); padding-left: 1.35rem; }
li { margin-bottom: var(--yg-b2); }

strong, b { font-weight: 700; color: var(--yg-siyah); }

table { border-collapse: collapse; width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

hr {
  border: 0;
  height: 3px;
  background: var(--yg-kirmizi);
  margin: var(--yg-b6) 0;
}

blockquote { margin: 0 0 var(--yg-b4); }

::selection { background: var(--yg-kirmizi); color: #fff; }

/* ============================================================
   3. ERISILEBILIRLIK
   ============================================================ */
.yg-atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 14px 22px;
  background: var(--yg-siyah);
  color: #fff;
  font-family: var(--yg-font-baslik);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 4px solid var(--yg-kirmizi);
}
.yg-atla:focus { left: 12px; top: 12px; color: #fff; }

:focus-visible {
  outline: 3px solid var(--yg-kirmizi);
  outline-offset: 3px;
}
.yg-ust-bar :focus-visible,
.yg-alt :focus-visible,
.yg-cta-bant :focus-visible {
  outline-color: #fff;
}

.yg-gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   4. DUZEN / KAPSAYICI
   ============================================================ */
.yg-kap {
  width: 100%;
  max-width: var(--yg-kap);
  margin: 0 auto;
  padding: 0 var(--yg-b4);
}
.yg-kap-dar { max-width: var(--yg-kap-dar); }

.yg-blok { padding: var(--yg-b8) 0; }
.yg-blok-genis { padding: var(--yg-b9) 0; }
.yg-blok-kisa { padding: var(--yg-b7) 0; }

.yg-zemin-gri { background: var(--yg-gri-1); }
.yg-zemin-siyah { background: var(--yg-siyah); color: #E7E7EA; }
.yg-zemin-siyah h2, .yg-zemin-siyah h3, .yg-zemin-siyah h4 { color: #fff; }
.yg-zemin-kirmizi { background: var(--yg-kirmizi); color: #fff; }
.yg-zemin-kirmizi h2, .yg-zemin-kirmizi h3 { color: #fff; }
.yg-zemin-pus { background: var(--yg-kirmizi-pus); }

/* Diyagonal kesimli blok - Yigido imzasi */
.yg-egik-ust { clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
.yg-egik-alt { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%); }
.yg-egik-cift { clip-path: polygon(0 26px, 100% 0, 100% calc(100% - 26px), 0 100%); }
.yg-egik-ust, .yg-egik-alt, .yg-egik-cift { margin-top: -1px; }

.yg-grid { display: grid; gap: var(--yg-b5); }
.yg-g2 { grid-template-columns: 1fr; }
.yg-g3 { grid-template-columns: 1fr; }
.yg-g4 { grid-template-columns: 1fr 1fr; }

.yg-esnek { display: flex; flex-wrap: wrap; gap: var(--yg-b3); }
.yg-esnek-orta { align-items: center; }
.yg-esnek-ortala { justify-content: center; }
.yg-esnek-ayir { justify-content: space-between; }

.yg-orta { text-align: center; }
.yg-sag { text-align: right; }

.yg-mt0 { margin-top: 0; }
.yg-mt3 { margin-top: var(--yg-b3); }
.yg-mt5 { margin-top: var(--yg-b5); }
.yg-mt7 { margin-top: var(--yg-b7); }
.yg-mb0 { margin-bottom: 0; }
.yg-mb3 { margin-bottom: var(--yg-b3); }
.yg-mb5 { margin-bottom: var(--yg-b5); }
.yg-mb7 { margin-bottom: var(--yg-b7); }

/* ============================================================
   5. BASLIK BLOKLARI
   ============================================================ */
.yg-blok-basi {
  max-width: 760px;
  margin: 0 0 var(--yg-b6);
}
.yg-blok-basi.yg-orta { margin-left: auto; margin-right: auto; }

.yg-ustyazi {
  display: inline-block;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: var(--yg-y-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--yg-kirmizi);
  margin-bottom: var(--yg-b3);
  padding-left: 44px;
  position: relative;
}
.yg-ustyazi::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 32px; height: 4px;
  background: var(--yg-kirmizi);
  transform: translateY(-50%) skewX(-24deg);
}
.yg-zemin-siyah .yg-ustyazi,
.yg-zemin-kirmizi .yg-ustyazi { color: #fff; }
.yg-zemin-kirmizi .yg-ustyazi::before { background: #fff; }
.yg-zemin-siyah .yg-ustyazi::before { background: var(--yg-kirmizi-ates); }

.yg-blok-basi p {
  font-size: var(--yg-y-md);
  color: var(--yg-metin-soluk);
  margin-bottom: 0;
}
.yg-zemin-siyah .yg-blok-basi p { color: #C9C9CF; }
.yg-zemin-kirmizi .yg-blok-basi p { color: #FFE4E4; }

.yg-cizgi-kirmizi {
  width: 76px; height: 5px;
  background: var(--yg-kirmizi);
  transform: skewX(-24deg);
  margin: var(--yg-b4) 0 var(--yg-b5);
}
.yg-orta .yg-cizgi-kirmizi { margin-left: auto; margin-right: auto; }

/* ============================================================
   6. BUTONLAR
   ============================================================ */
.yg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 3px solid transparent;
  border-radius: var(--yg-yay-1);
  transition: transform var(--yg-gecis), background var(--yg-gecis), color var(--yg-gecis), border-color var(--yg-gecis), box-shadow var(--yg-gecis);
  line-height: 1.15;
  text-align: center;
}
.yg-btn:hover { transform: translateY(-3px); }
.yg-btn:active { transform: translateY(0); }

.yg-btn-kirmizi {
  background: var(--yg-kirmizi);
  color: #fff;
  border-color: var(--yg-kirmizi);
  box-shadow: var(--yg-golge-kirmizi);
}
.yg-btn-kirmizi:hover { background: var(--yg-kirmizi-koyu); border-color: var(--yg-kirmizi-koyu); color: #fff; }

.yg-btn-siyah {
  background: var(--yg-siyah);
  color: #fff;
  border-color: var(--yg-siyah);
}
.yg-btn-siyah:hover { background: var(--yg-kirmizi); border-color: var(--yg-kirmizi); color: #fff; }

.yg-btn-beyaz {
  background: #fff;
  color: var(--yg-kirmizi-koyu);
  border-color: #fff;
}
.yg-btn-beyaz:hover { background: var(--yg-siyah); border-color: var(--yg-siyah); color: #fff; }

.yg-btn-cerceve {
  background: transparent;
  color: var(--yg-siyah);
  border-color: var(--yg-siyah);
}
.yg-btn-cerceve:hover { background: var(--yg-siyah); color: #fff; }

.yg-btn-cerceve-beyaz {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.yg-btn-cerceve-beyaz:hover { background: #fff; color: var(--yg-kirmizi-koyu); border-color: #fff; }

.yg-btn-buyuk { padding: 19px 40px; font-size: 1.14rem; }
.yg-btn-kucuk { padding: 10px 20px; font-size: .9rem; }
.yg-btn-tam { width: 100%; }

/* ============================================================
   7. UST BAR (HEADER)
   ============================================================ */
.yg-ust-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 900;
  background: var(--yg-kirmizi-koyu);
  border-bottom: 3px solid var(--yg-kirmizi);
  transition: background var(--yg-gecis), box-shadow var(--yg-gecis);
}
.yg-ust-bar.yg-bar-kucuk {
  --yg-bar: 58px;
  background: var(--yg-kirmizi-derin);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

.yg-bar-ic {
  height: var(--yg-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yg-b4);
  transition: height var(--yg-gecis);
}

/* Logo - solda */
.yg-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex: 0 0 auto;
  transform-origin: left center;
  transition: transform var(--yg-gecis);
}
.yg-bar-kucuk .yg-logo { transform: scale(.82); }

.yg-logo-isaret {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  background: #fff;
  color: var(--yg-kirmizi);
  display: grid;
  place-items: center;
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.42rem;
  border-radius: var(--yg-yay-1);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.yg-logo-yazi {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.yg-logo-ad {
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}
.yg-logo-alt {
  font-family: var(--yg-font-govde);
  font-size: .63rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #FFD5D5;
  margin-top: 4px;
}

/* Menu - ortada */
.yg-menu { flex: 1 1 auto; display: flex; justify-content: center; }
.yg-menu ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.yg-menu li { margin: 0; }
.yg-menu a {
  display: block;
  padding: 10px 13px;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: color var(--yg-gecis);
}
.yg-menu a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 4px;
  height: 3px;
  background: #fff;
  transform: scaleX(0) skewX(-24deg);
  transform-origin: left center;
  transition: transform var(--yg-gecis);
}
.yg-menu a:hover::after,
.yg-menu a:focus-visible::after,
.yg-menu a.yg-aktif::after { transform: scaleX(1) skewX(-24deg); }
.yg-menu a.yg-aktif { color: #fff; }

/* Telefon butonu - sag uc */
.yg-bar-tel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--yg-kirmizi) !important;
  padding: 11px 20px;
  border-radius: var(--yg-yay-1);
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  border: 3px solid #fff;
  transition: background var(--yg-gecis), color var(--yg-gecis), transform var(--yg-gecis);
}
.yg-bar-tel:hover {
  background: var(--yg-siyah);
  border-color: var(--yg-siyah);
  color: #fff !important;
  transform: translateY(-2px);
}
.yg-bar-tel svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 17px; }
.yg-bar-kucuk .yg-bar-tel { padding: 8px 16px; font-size: .95rem; }

/* Hamburger - mobilde sagda */
.yg-hamburger {
  display: none;
  width: 46px; height: 40px;
  border-radius: var(--yg-yay-1);
  border: 2px solid rgba(255, 255, 255, .55);
  padding: 0;
  position: relative;
  flex: 0 0 46px;
}
.yg-hamburger span {
  position: absolute;
  left: 11px;
  width: 20px; height: 2.5px;
  background: #fff;
  transition: transform var(--yg-gecis), opacity var(--yg-gecis);
}
.yg-hamburger span:nth-child(1) { top: 12px; }
.yg-hamburger span:nth-child(2) { top: 18.5px; }
.yg-hamburger span:nth-child(3) { top: 25px; }
.yg-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.yg-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.yg-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobil panel - yukaridan asagi acilan kirmizi perde */
.yg-mobil-panel {
  position: fixed;
  top: var(--yg-bar);
  left: 0; right: 0;
  max-height: calc(100dvh - var(--yg-bar));
  overflow-y: auto;
  background: var(--yg-kirmizi-koyu);
  border-bottom: 5px solid var(--yg-kirmizi);
  transform: translateY(-120%);
  transition: transform 300ms cubic-bezier(.36, .06, .18, 1);
  z-index: 899;
  padding: var(--yg-b4) 0 var(--yg-b6);
}
.yg-mobil-panel.yg-panel-acik { transform: translateY(0); }
.yg-mobil-panel ul { list-style: none; margin: 0; padding: 0; }
.yg-mobil-panel li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.yg-mobil-panel a {
  display: block;
  padding: 14px 4px;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: 1.06rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.yg-mobil-panel a.yg-aktif { color: #FFD5D5; }
.yg-mobil-panel a:hover { color: #FFD5D5; }
.yg-panel-alt { margin-top: var(--yg-b5); display: grid; gap: var(--yg-b3); }

body.yg-kilit { overflow: hidden; }

/* Header yuksekligi kadar bosluk */
.yg-govde { padding-top: 84px; }

/* ============================================================
   8. HERO
   ============================================================ */
.yg-hero {
  position: relative;
  background: var(--yg-siyah);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.yg-hero-gorsel {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.yg-hero-gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.yg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(17, 17, 17, .94) 0%, rgba(153, 27, 27, .86) 48%, rgba(17, 17, 17, .58) 100%);
}
.yg-hero-ic {
  padding-top: var(--yg-b9);
  padding-bottom: var(--yg-b10);
}
.yg-hero h1 { color: #fff; margin-bottom: var(--yg-b4); max-width: 780px; }
.yg-hero h1 em {
  font-style: normal;
  color: #fff;
  background: var(--yg-kirmizi);
  padding: 0 12px;
  display: inline-block;
  transform: skewX(-8deg);
}
.yg-hero-metin {
  font-size: var(--yg-y-md);
  color: #F1F1F3;
  max-width: 640px;
  margin-bottom: var(--yg-b6);
}
.yg-hero-butonlar { display: flex; flex-wrap: wrap; gap: var(--yg-b3); }

.yg-hero-rozet {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--yg-yay-1);
  padding: 7px 15px;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: var(--yg-b5);
  color: #fff;
}
.yg-hero-rozet::before {
  content: "";
  width: 9px; height: 9px;
  background: var(--yg-kirmizi-ates);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .28);
}

/* Ic sayfa hero - daha kisa */
.yg-sayfa-basi {
  background: var(--yg-kirmizi-koyu);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: var(--yg-b8) 0 var(--yg-b7);
}
.yg-sayfa-basi::after {
  content: "";
  position: absolute;
  right: -80px; top: -60px;
  width: 340px; height: 340px;
  background: rgba(255, 255, 255, .05);
  transform: rotate(28deg);
}
.yg-sayfa-basi h1 { color: #fff; margin-bottom: var(--yg-b3); position: relative; }
.yg-sayfa-basi p {
  color: #FFDCDC;
  font-size: var(--yg-y-md);
  max-width: 700px;
  margin-bottom: 0;
  position: relative;
}

/* ============================================================
   9. BREADCRUMB
   ============================================================ */
.yg-iz {
  background: var(--yg-gri-1);
  border-bottom: 1px solid var(--yg-gri-2);
  padding: 11px 0;
  font-size: var(--yg-y-xs);
}
.yg-iz ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.yg-iz li { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--yg-metin-soluk); }
.yg-iz li + li::before { content: "/"; color: var(--yg-gri-4); }
.yg-iz a { color: var(--yg-kirmizi-koyu); text-decoration: none; }
.yg-iz a:hover { text-decoration: underline; }
.yg-iz [aria-current="page"] { color: var(--yg-metin); font-weight: 500; }

/* ============================================================
   10. KARTLAR
   ============================================================ */
.yg-kart {
  background: #fff;
  border: 1px solid var(--yg-gri-2);
  border-radius: var(--yg-yay-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--yg-gecis), box-shadow var(--yg-gecis), border-color var(--yg-gecis);
  position: relative;
}
.yg-kart:hover {
  transform: translateY(-6px);
  box-shadow: var(--yg-golge-3);
  border-color: var(--yg-kirmizi);
}
.yg-kart-gorsel { position: relative; overflow: hidden; background: var(--yg-gri-1); }
.yg-kart-gorsel img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 420ms ease;
}
.yg-kart:hover .yg-kart-gorsel img { transform: scale(1.06); }

.yg-kart-govde { padding: var(--yg-b5); flex: 1 1 auto; display: flex; flex-direction: column; }
.yg-kart-govde h3 { font-size: var(--yg-y-lg); margin-bottom: var(--yg-b2); }
.yg-kart-govde p { color: var(--yg-metin-soluk); font-size: .97rem; flex: 1 1 auto; }

.yg-kart-fiyat {
  display: inline-block;
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--yg-kirmizi);
  border-top: 3px solid var(--yg-kirmizi-sis);
  padding-top: var(--yg-b3);
  margin-top: var(--yg-b3);
}

.yg-kart-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--yg-b3);
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .87rem;
  color: var(--yg-kirmizi-koyu);
  text-decoration: none;
}
.yg-kart-baglanti::after { content: "\2192"; transition: transform var(--yg-gecis); }
.yg-kart:hover .yg-kart-baglanti::after { transform: translateX(5px); }

/* Numarali kart */
.yg-kart-no {
  position: absolute;
  top: 0; right: 0;
  width: 54px; height: 54px;
  background: var(--yg-kirmizi);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.32rem;
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

/* Sade kutu */
.yg-kutu {
  background: #fff;
  border: 1px solid var(--yg-gri-2);
  border-left: 6px solid var(--yg-kirmizi);
  border-radius: var(--yg-yay-1);
  padding: var(--yg-b5);
}
.yg-kutu h3 { font-size: var(--yg-y-lg); }
.yg-kutu p:last-child, .yg-kutu ul:last-child { margin-bottom: 0; }

/* Ikonlu ozellik */
.yg-ozellik {
  display: flex;
  gap: var(--yg-b4);
  align-items: flex-start;
}
.yg-ozellik-ikon {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  background: var(--yg-kirmizi);
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: var(--yg-yay-1);
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.2rem;
}
.yg-ozellik-ikon svg { width: 24px; height: 24px; fill: currentColor; }
.yg-ozellik h3, .yg-ozellik h4 { margin-bottom: 6px; font-size: var(--yg-y-md); }
.yg-ozellik p { margin-bottom: 0; color: var(--yg-metin-soluk); font-size: .96rem; }
.yg-zemin-siyah .yg-ozellik p { color: #B8B8BF; }

/* ============================================================
   11. ISTATISTIK SERIDI
   ============================================================ */
.yg-sayac-serit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  background: rgba(255, 255, 255, .16);
  border-radius: var(--yg-yay-1);
  overflow: hidden;
}
.yg-sayac {
  background: var(--yg-kirmizi);
  padding: var(--yg-b5) var(--yg-b3);
  text-align: center;
  color: #fff;
}
.yg-sayac-no {
  display: block;
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1;
  color: #fff;
}
.yg-sayac-ad {
  display: block;
  margin-top: 9px;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #FFDBDB;
  line-height: 1.4;
}

/* ============================================================
   12. TABLO
   ============================================================ */
.yg-tablo-sar {
  overflow-x: auto;
  border: 1px solid var(--yg-gri-2);
  border-radius: var(--yg-yay-2);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.yg-tablo {
  min-width: 540px;
  font-size: .97rem;
}
.yg-tablo caption {
  caption-side: top;
  text-align: left;
  padding: var(--yg-b4) var(--yg-b4) 0;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--yg-metin-soluk);
  font-size: .88rem;
}
.yg-tablo thead th {
  background: var(--yg-siyah);
  color: #fff;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px var(--yg-b4);
  border-bottom: 4px solid var(--yg-kirmizi);
}
.yg-tablo tbody td, .yg-tablo tbody th {
  padding: 13px var(--yg-b4);
  border-bottom: 1px solid var(--yg-gri-2);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.yg-tablo tbody th { font-weight: 500; color: var(--yg-siyah); }
.yg-tablo tbody tr:nth-child(even) { background: var(--yg-gri-1); }
.yg-tablo tbody tr:hover { background: var(--yg-kirmizi-pus); }
.yg-tablo tbody tr:last-child td, .yg-tablo tbody tr:last-child th { border-bottom: 0; }
.yg-tablo .yg-tutar {
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  color: var(--yg-kirmizi-koyu);
  white-space: nowrap;
}

/* ============================================================
   13. LISTELER
   ============================================================ */
.yg-tik {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--yg-b4);
}
.yg-tik li {
  position: relative;
  padding-left: 32px;
  margin-bottom: var(--yg-b3);
}
.yg-tik li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 16px; height: 9px;
  border-left: 3px solid var(--yg-kirmizi);
  border-bottom: 3px solid var(--yg-kirmizi);
  transform: rotate(-45deg);
}
.yg-zemin-siyah .yg-tik li::before { border-color: var(--yg-kirmizi-ates); }

.yg-carpi { list-style: none; padding: 0; margin: 0 0 var(--yg-b4); }
.yg-carpi li { position: relative; padding-left: 32px; margin-bottom: var(--yg-b3); }
.yg-carpi li::before {
  content: "\00d7";
  position: absolute;
  left: 4px; top: 0;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--yg-gri-4);
}

.yg-adim-liste {
  list-style: none;
  counter-reset: ygadim;
  padding: 0;
  margin: 0;
}
.yg-adim-liste > li {
  counter-increment: ygadim;
  position: relative;
  padding: 0 0 var(--yg-b6) 62px;
  margin: 0;
  border-left: 3px solid var(--yg-gri-2);
  margin-left: 22px;
}
.yg-adim-liste > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.yg-adim-liste > li::before {
  content: counter(ygadim, decimal-leading-zero);
  position: absolute;
  left: -23px; top: 0;
  width: 44px; height: 44px;
  background: var(--yg-kirmizi);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: 1.02rem;
  border-radius: var(--yg-yay-1);
}
.yg-adim-liste h3 { font-size: var(--yg-y-lg); margin-bottom: var(--yg-b2); padding-top: 6px; }
.yg-adim-liste p { color: var(--yg-metin-soluk); }
.yg-adim-liste p:last-child { margin-bottom: 0; }

/* ============================================================
   14. ROZET / ETIKET
   ============================================================ */
.yg-rozet {
  display: inline-block;
  padding: 5px 13px;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--yg-yay-1);
  background: var(--yg-kirmizi-sis);
  color: var(--yg-kirmizi-koyu);
  line-height: 1.6;
}
.yg-rozet-dolu { background: var(--yg-kirmizi); color: #fff; }
.yg-rozet-siyah { background: var(--yg-siyah); color: #fff; }
.yg-rozet-yesil { background: #DCFCE7; color: var(--yg-yesil); }
.yg-rozet-cizgi { background: transparent; border: 2px solid var(--yg-kirmizi); color: var(--yg-kirmizi); }

/* ============================================================
   15. UYARI / BILGI KUTULARI
   ============================================================ */
.yg-uyari {
  padding: var(--yg-b4) var(--yg-b5);
  border-radius: var(--yg-yay-1);
  border-left: 6px solid var(--yg-kirmizi);
  background: var(--yg-kirmizi-pus);
  margin-bottom: var(--yg-b5);
}
.yg-uyari p:last-child { margin-bottom: 0; }
.yg-uyari-baslik {
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--yg-kirmizi-koyu);
  margin-bottom: 6px;
  display: block;
}
.yg-uyari-siyah { background: var(--yg-gri-1); border-left-color: var(--yg-siyah); }
.yg-uyari-siyah .yg-uyari-baslik { color: var(--yg-siyah); }
.yg-uyari-yesil { background: #F0FDF4; border-left-color: var(--yg-yesil); }
.yg-uyari-yesil .yg-uyari-baslik { color: var(--yg-yesil); }

/* Kisa cevap kutusu - AEO */
.yg-kisa-cevap {
  background: var(--yg-siyah);
  color: #F3F3F5;
  border-radius: var(--yg-yay-2);
  padding: var(--yg-b5) var(--yg-b5) var(--yg-b5) var(--yg-b6);
  margin: 0 0 var(--yg-b6);
  border-left: 8px solid var(--yg-kirmizi);
  position: relative;
}
.yg-kisa-cevap h2, .yg-kisa-cevap h3 {
  color: #fff;
  font-size: var(--yg-y-md);
  margin-bottom: var(--yg-b2);
  letter-spacing: .1em;
}
.yg-kisa-cevap p { margin-bottom: 0; font-size: 1.05rem; line-height: 1.72; color: #E8E8EC; }
.yg-kisa-cevap strong { color: #fff; }

/* ============================================================
   16. SSS AKORDEON
   ============================================================ */
.yg-sss { display: grid; gap: var(--yg-b3); }
.yg-sss-oge {
  border: 1px solid var(--yg-gri-2);
  border-radius: var(--yg-yay-2);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--yg-gecis), box-shadow var(--yg-gecis);
}
.yg-sss-oge.yg-acik { border-color: var(--yg-kirmizi); box-shadow: var(--yg-golge-2); }
.yg-sss-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yg-b4);
  padding: var(--yg-b4) var(--yg-b5);
  text-align: left;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: var(--yg-y-md);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--yg-siyah);
  transition: background var(--yg-gecis), color var(--yg-gecis);
}
.yg-sss-btn:hover { background: var(--yg-kirmizi-pus); color: var(--yg-kirmizi-koyu); }
.yg-sss-oge.yg-acik .yg-sss-btn { background: var(--yg-kirmizi); color: #fff; }
.yg-sss-isaret {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  position: relative;
}
.yg-sss-isaret::before, .yg-sss-isaret::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--yg-gecis), opacity var(--yg-gecis);
}
.yg-sss-isaret::before { left: 3px; top: 11.5px; width: 20px; height: 3px; }
.yg-sss-isaret::after { left: 11.5px; top: 3px; width: 3px; height: 20px; }
.yg-sss-oge.yg-acik .yg-sss-isaret::after { transform: scaleY(0); opacity: 0; }

.yg-sss-cevap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.yg-sss-cevap-ic { padding: var(--yg-b5); border-top: 1px solid var(--yg-gri-2); }
.yg-sss-cevap-ic p:last-child, .yg-sss-cevap-ic ul:last-child { margin-bottom: 0; }

/* ============================================================
   17. GALERI SERIDI
   ============================================================ */
.yg-serit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.yg-serit figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--yg-yay-1);
  background: var(--yg-gri-1);
}
.yg-serit img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms ease, filter 420ms ease;
}
.yg-serit figure:hover img { transform: scale(1.07); filter: saturate(1.15); }
.yg-serit figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(17, 17, 17, .88), transparent);
  color: #fff;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ============================================================
   18. YORUMLAR
   ============================================================ */
.yg-yorum {
  background: #fff;
  border: 1px solid var(--yg-gri-2);
  border-top: 5px solid var(--yg-kirmizi);
  border-radius: var(--yg-yay-2);
  padding: var(--yg-b5);
  display: flex;
  flex-direction: column;
}
.yg-yorum-yildiz {
  color: var(--yg-kirmizi);
  letter-spacing: 3px;
  font-size: 1.05rem;
  margin-bottom: var(--yg-b3);
}
.yg-yorum blockquote {
  margin: 0 0 var(--yg-b4);
  font-size: 1.02rem;
  color: var(--yg-metin);
  flex: 1 1 auto;
}
.yg-yorum blockquote p:last-child { margin-bottom: 0; }
.yg-yorum figcaption { border-top: 1px solid var(--yg-gri-2); padding-top: var(--yg-b3); }
.yg-yorum-ad {
  display: block;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--yg-siyah);
}
.yg-yorum-yer { display: block; font-size: .86rem; color: var(--yg-metin-soluk); }

/* ============================================================
   19. FORM
   ============================================================ */
.yg-form { display: grid; gap: var(--yg-b4); }
.yg-alan { display: grid; gap: 7px; }
.yg-alan label {
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--yg-siyah);
}
.yg-alan input,
.yg-alan select,
.yg-alan textarea {
  width: 100%;
  padding: 13px 15px;
  border: 2px solid var(--yg-gri-3);
  border-radius: var(--yg-yay-1);
  background: #fff;
  font-size: 1rem;
  transition: border-color var(--yg-gecis), box-shadow var(--yg-gecis);
}
.yg-alan input:focus,
.yg-alan select:focus,
.yg-alan textarea:focus {
  border-color: var(--yg-kirmizi);
  box-shadow: 0 0 0 4px var(--yg-kirmizi-sis);
  outline: none;
}
.yg-alan textarea { min-height: 140px; resize: vertical; }
.yg-alan-ipucu { font-size: .84rem; color: var(--yg-metin-soluk); }

/* Hesaplayici cikti kutusu */
.yg-hesap-sonuc {
  background: var(--yg-siyah);
  color: #fff;
  border-radius: var(--yg-yay-2);
  padding: var(--yg-b5);
  border-bottom: 6px solid var(--yg-kirmizi);
}
.yg-hesap-tutar {
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.1;
  color: #fff;
  display: block;
}
.yg-hesap-not { font-size: .87rem; color: #B9B9C0; margin: 8px 0 0; }

/* ============================================================
   20. CTA BANDI
   ============================================================ */
.yg-cta-bant {
  background: var(--yg-kirmizi);
  color: #fff;
  padding: var(--yg-b8) 0;
  position: relative;
  overflow: hidden;
}
.yg-cta-bant::before {
  content: "";
  position: absolute;
  left: -10%; top: 0; bottom: 0;
  width: 46%;
  background: var(--yg-kirmizi-koyu);
  transform: skewX(-16deg);
  opacity: .55;
}
.yg-cta-ic { position: relative; display: grid; gap: var(--yg-b5); align-items: center; }
.yg-cta-bant h2 { color: #fff; margin-bottom: var(--yg-b3); }
.yg-cta-bant p { color: #FFE3E3; margin-bottom: 0; font-size: var(--yg-y-md); }
.yg-cta-butonlar { display: flex; flex-wrap: wrap; gap: var(--yg-b3); }

/* Telefon vurgu bloklari */
.yg-tel-blok {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--yg-yay-2);
  padding: var(--yg-b4) var(--yg-b5);
  text-decoration: none;
  border: 3px solid var(--yg-kirmizi);
  transition: transform var(--yg-gecis), box-shadow var(--yg-gecis);
}
.yg-tel-blok:hover { transform: translateY(-4px); box-shadow: var(--yg-golge-3); }
.yg-tel-etiket {
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yg-metin-soluk);
}
.yg-tel-no {
  font-family: var(--yg-font-baslik);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
  color: var(--yg-kirmizi);
  line-height: 1.2;
  letter-spacing: .01em;
}

/* ============================================================
   21. ALT BILGI (FOOTER)
   ============================================================ */
.yg-alt {
  background: var(--yg-siyah);
  color: #B4B4BC;
  padding: calc(var(--yg-b8) + 30px) 0 0;
  margin-top: 0;
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
  position: relative;
}
.yg-alt-grid {
  display: grid;
  gap: var(--yg-b7);
  padding-bottom: var(--yg-b7);
}
.yg-alt h3 {
  color: #fff;
  font-size: var(--yg-y-md);
  letter-spacing: .13em;
  margin-bottom: var(--yg-b4);
  position: relative;
  padding-bottom: var(--yg-b3);
}
.yg-alt h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 4px;
  background: var(--yg-kirmizi);
  transform: skewX(-24deg);
}
.yg-alt p { color: #A6A6AE; font-size: .95rem; }
.yg-alt ul { list-style: none; padding: 0; margin: 0; }
.yg-alt li { margin-bottom: 10px; }
.yg-alt a { color: #C8C8D0; text-decoration: none; font-size: .95rem; transition: color var(--yg-gecis), padding-left var(--yg-gecis); }
.yg-alt a:hover { color: var(--yg-kirmizi-ates); padding-left: 5px; }

.yg-alt-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--yg-b4); text-decoration: none; }
.yg-alt-logo .yg-logo-isaret { background: var(--yg-kirmizi); color: #fff; }
.yg-alt-logo .yg-logo-ad { color: #fff; }
.yg-alt-logo .yg-logo-alt { color: #8A8A93; }

.yg-alt-iletisim li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: var(--yg-b4);
  color: #A6A6AE;
  font-size: .95rem;
}
.yg-alt-iletisim strong {
  display: block;
  color: #fff;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.yg-alt-iletisim a { color: #C8C8D0; }
.yg-alt-iletisim a:hover { padding-left: 0; }

/* Ince kirmizi serit + telif */
.yg-serit-kirmizi { height: 5px; background: var(--yg-kirmizi); }
.yg-telif {
  background: #0A0A0A;
  padding: var(--yg-b4) 0;
  font-size: .85rem;
  color: #77777F;
}
.yg-telif-ic { display: flex; flex-wrap: wrap; gap: var(--yg-b3); justify-content: space-between; align-items: center; }
.yg-telif p { margin: 0; color: #77777F; font-size: .85rem; }
.yg-telif a { color: #9A9AA2; text-decoration: none; }
.yg-telif a:hover { color: var(--yg-kirmizi-ates); }

/* ============================================================
   22. STICKY ARA BUTONU (SAG ALT, KARE)
   ============================================================ */
.yg-ara-kule {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 880;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.yg-ara-secenekler {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  pointer-events: none;
}
.yg-ara-kule.yg-kule-acik .yg-ara-secenekler {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.yg-ara-secenek {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yg-siyah);
  color: #fff !important;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 4px;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: var(--yg-golge-3);
  border-right: 4px solid var(--yg-kirmizi);
  transition: background var(--yg-gecis), transform var(--yg-gecis);
  white-space: nowrap;
}
.yg-ara-secenek:hover { background: var(--yg-kirmizi); transform: translateX(-4px); border-right-color: var(--yg-siyah); }
.yg-ara-secenek svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }

.yg-ara-dugme {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  background: var(--yg-kirmizi);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--yg-golge-kirmizi);
  border: 3px solid var(--yg-kirmizi);
  transition: background var(--yg-gecis), transform var(--yg-gecis), border-color var(--yg-gecis);
  position: relative;
}
.yg-ara-dugme:hover { background: var(--yg-kirmizi-koyu); border-color: var(--yg-kirmizi-koyu); }
.yg-ara-dugme svg { width: 27px; height: 27px; fill: currentColor; }
.yg-ara-kule.yg-kule-acik .yg-ara-dugme { background: var(--yg-siyah); border-color: var(--yg-siyah); }
.yg-ara-dugme .yg-ikon-kapat { display: none; }
.yg-ara-kule.yg-kule-acik .yg-ara-dugme .yg-ikon-tel { display: none; }
.yg-ara-kule.yg-kule-acik .yg-ara-dugme .yg-ikon-kapat { display: block; }
.yg-ara-dugme::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 4px;
  border: 3px solid var(--yg-kirmizi);
  animation: ygNabiz 2.4s ease-out infinite;
  pointer-events: none;
}
.yg-ara-kule.yg-kule-acik .yg-ara-dugme::after { animation: none; opacity: 0; }

@keyframes ygNabiz {
  0% { transform: scale(1); opacity: .8; }
  70% { transform: scale(1.42); opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}

/* ============================================================
   23. MAHALLE ETIKET BULUTU
   ============================================================ */
.yg-mahalle-bulut {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yg-mahalle-bulut span {
  display: inline-block;
  padding: 7px 13px;
  background: #fff;
  border: 1px solid var(--yg-gri-2);
  border-left: 3px solid var(--yg-kirmizi);
  border-radius: var(--yg-yay-1);
  font-size: .89rem;
  color: var(--yg-metin-soluk);
}
.yg-zemin-gri .yg-mahalle-bulut span { background: #fff; }

/* ============================================================
   24. HARITA
   ============================================================ */
.yg-harita {
  border: 0;
  width: 100%;
  height: 380px;
  border-radius: var(--yg-yay-2);
  filter: grayscale(.28) contrast(1.05);
  display: block;
}

/* ============================================================
   25. ICERIK TIPOGRAFISI
   ============================================================ */
.yg-icerik > h2 { margin-top: var(--yg-b7); }
.yg-icerik > h2:first-child { margin-top: 0; }
.yg-icerik > h3 { margin-top: var(--yg-b6); }
.yg-icerik p { font-size: 1.04rem; }
.yg-icerik li { font-size: 1.02rem; }
.yg-icerik-giris {
  font-size: var(--yg-y-md);
  color: var(--yg-metin-soluk);
  border-left: 5px solid var(--yg-kirmizi);
  padding-left: var(--yg-b4);
  margin-bottom: var(--yg-b6);
}

.yg-vurgu-kirmizi { color: var(--yg-kirmizi); }
.yg-vurgu-band {
  background: var(--yg-kirmizi);
  color: #fff;
  padding: 1px 8px;
  display: inline-block;
  transform: skewX(-8deg);
}

/* ============================================================
   25B. FIYAT HESAPLAYICI (m2 / adet / cevre / parca)
   ============================================================ */
.yg-hesap {
  display: grid;
  gap: var(--yg-b5);
  align-items: start;
  background: var(--yg-gri-1);
  border: 1px solid var(--yg-gri-2);
  border-top: 5px solid var(--yg-kirmizi);
  border-radius: var(--yg-yay-2);
  padding: var(--yg-b5);
}
.yg-zemin-gri .yg-hesap { background: #fff; }

.yg-hesap-alanlar { display: grid; gap: var(--yg-b4); }
.yg-hesap-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--yg-b3); }

.yg-hesap-satir {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: var(--yg-b3);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--yg-gri-3);
}
.yg-hesap-satir:last-of-type { border-bottom: 0; }
.yg-hesap-satir label { font-size: .97rem; font-weight: 500; color: var(--yg-siyah); }
.yg-hesap-satir label small {
  display: block;
  font-weight: 400;
  font-size: .82rem;
  color: var(--yg-metin-soluk);
  letter-spacing: 0;
  text-transform: none;
}
.yg-hesap-satir input {
  width: 100%;
  padding: 9px 8px;
  border: 2px solid var(--yg-gri-3);
  border-radius: var(--yg-yay-1);
  background: #fff;
  text-align: center;
  font-weight: 500;
}
.yg-hesap-satir input:focus {
  border-color: var(--yg-kirmizi);
  box-shadow: 0 0 0 4px var(--yg-kirmizi-sis);
  outline: none;
}

.yg-hesap-etiket {
  display: block;
  font-family: var(--yg-font-baslik);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #B9B9C0;
  margin-bottom: 8px;
}
.yg-hesap-olcu {
  display: block;
  margin-top: 10px;
  font-size: .92rem;
  color: #E4E4E8;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 10px;
}
.yg-hesap-asgari {
  display: none;
  margin: 10px 0 0;
  padding: 9px 12px;
  background: var(--yg-kirmizi);
  color: #fff;
  border-radius: var(--yg-yay-1);
  font-size: .87rem;
  line-height: 1.5;
}
.yg-hesap-asgari.yg-goster { display: block; }

.yg-hesap-sonuc .yg-btn { margin-top: var(--yg-b4); }

/* Iki kolonlu kisa liste */
.yg-liste-ikili { margin-bottom: var(--yg-b4); }

@media (min-width: 768px) {
  .yg-liste-ikili { columns: 2; column-gap: var(--yg-b7); }
  .yg-liste-ikili li { break-inside: avoid; }
}

@media (min-width: 900px) {
  .yg-hesap { grid-template-columns: 1.08fr .92fr; gap: var(--yg-b6); }
}

/* ============================================================
   26. DUYARLI KIRILIMLAR
   ============================================================ */
@media (max-width: 1023px) {
  .yg-menu { display: none; }
  .yg-hamburger { display: block; }
  .yg-bar-tel .yg-tel-yazi { display: none; }
  .yg-bar-tel { padding: 11px 14px; }
}

@media (min-width: 480px) {
  .yg-kap { padding: 0 var(--yg-b5); }
  .yg-serit { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
  .yg-g2 { grid-template-columns: repeat(2, 1fr); }
  .yg-g3 { grid-template-columns: repeat(2, 1fr); }
  .yg-sayac-serit { grid-template-columns: repeat(4, 1fr); }
  .yg-ara-kule { right: 22px; bottom: 22px; }
}

@media (min-width: 768px) {
  .yg-hero-ic { padding-top: var(--yg-b10); padding-bottom: var(--yg-b10); }
  .yg-alt-grid { grid-template-columns: repeat(2, 1fr); }
  .yg-serit { grid-template-columns: repeat(4, 1fr); }
  .yg-harita { height: 440px; }
}

@media (min-width: 1024px) {
  .yg-govde { padding-top: 84px; }
  .yg-g3 { grid-template-columns: repeat(3, 1fr); }
  .yg-g4 { grid-template-columns: repeat(4, 1fr); }
  .yg-alt-grid { grid-template-columns: 1.35fr 1fr 1.15fr; gap: var(--yg-b8); }
  .yg-cta-ic { grid-template-columns: 1.5fr auto; }
  .yg-mobil-panel { display: none; }
  .yg-serit { grid-template-columns: repeat(5, 1fr); }
  .yg-ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--yg-b8);
    align-items: center;
  }
  .yg-ikili-genis { grid-template-columns: 1.25fr 1fr; }
  .yg-ikili-dar { grid-template-columns: 1fr 1.25fr; }
}

@media (min-width: 1280px) {
  .yg-menu a { padding: 10px 16px; font-size: .96rem; }
}

/* ============================================================
   27. HAREKET AZALTMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .yg-kart:hover { transform: none; }
  .yg-btn:hover { transform: none; }
  .yg-ara-dugme::after { animation: none; opacity: 0; }
}

/* ============================================================
   28. BASKI
   ============================================================ */
@media print {
  .yg-ust-bar,
  .yg-mobil-panel,
  .yg-ara-kule,
  .yg-cta-bant,
  .yg-atla,
  .yg-harita,
  .yg-hero-butonlar,
  .yg-serit { display: none !important; }

  .yg-govde { padding-top: 0; }
  body { background: #fff; color: #000; font-size: 11.5pt; line-height: 1.5; }
  .yg-hero, .yg-sayfa-basi { background: #fff !important; color: #000 !important; padding: 12pt 0; }
  .yg-hero h1, .yg-sayfa-basi h1 { color: #000 !important; }
  .yg-hero::before { display: none; }
  .yg-hero p, .yg-sayfa-basi p { color: #333 !important; }
  .yg-alt, .yg-zemin-siyah, .yg-kisa-cevap { background: #fff !important; color: #000 !important; clip-path: none; }
  .yg-alt a, .yg-alt p, .yg-kisa-cevap p { color: #000 !important; }
  .yg-kart, .yg-kutu, .yg-sss-oge { break-inside: avoid; border: 1px solid #999; box-shadow: none; }
  .yg-sss-cevap { max-height: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  h1, h2, h3 { break-after: avoid; }
}