@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0&display=block");
/* ===========================================================================
   Tema: Pazar Yeşili  —  Themes/PazarYesili/theme.json
   ---------------------------------------------------------------------------
   Google Stitch'e ürettirilen "Pazar Yeşili" konseptinin birebir uygulaması
   (D:\Projects\HazirPortal\Tasarim\Stitch\zumrut.png / .html).
   Öteki temalardan farkı: yalnız renk değil, ana sayfa yapısı ve kartlar da
   farklı (Themes/PazarYesili/Views/...). Kural: HİÇBİR öğede kenarlık yok,
   alanlar zemin tonu + çok hafif gölgeyle ayrılır.
   Renk: zümrüt #0E7C5A marka/aksiyon, turuncu #F28C28 fiyat ve "İlan Ver".
   =========================================================================== */
:root {
  --bordo:        #006145;
  --bordo-koyu:   #005139;
  --kirmizi:      #0E7C5A;   /* aksiyon (arama, buton, aktif) */
  --kirmizi-koyu: #006145;
  --kirmizi-soft: #E3F5EC;
  --kirmizi-rgb:  14,124,90;

  --turuncu:      #F28C28;   /* İlan Ver, vitrin rozeti */
  --turuncu-yazi: #D9720F;   /* fiyat metni — beyaz üstünde okunur ton */
  --turuncu-soft: #FFDCC3;
  --mint:         #97F5CB;
  --mint-soft:    #D8E6DC;

  --ink:          #181C1B;
  --antrasit:     #2D3130;

  --bg:           #F7FAF8;
  --surface:      #FFFFFF;
  --surface-2:    #F1F4F2;
  --surface-3:    #EBEFED;
  --surface-4:    #E0E3E1;
  --line:         transparent;
  --line-strong:  transparent;
  --text:         #181C1B;
  --muted:        #3E4943;
  --faint:        #6E7A73;

  --gold:     #D9720F;
  --gold-bg:  #FFF1E4;
  --gold-line:transparent;

  --ters-metin:       #FFFFFF;
  --ters-metin-soft:  #B9FFDD;
  --ters-metin-faint: #7BD8B0;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-lg: 20px; --r-xl: 24px;

  --sh-1: 0 2px 8px rgba(14,124,90,.05);
  --sh-2: 0 4px 20px -2px rgba(14,124,90,.06), 0 2px 8px rgba(0,0,0,.04);
  --sh-3: 0 12px 28px -4px rgba(14,124,90,.12);
}

/* Kenarlık yasağı (Stitch kuralı) — form alanları ve kartlar dahil */
.header, .catnav, .ilan, .biz, .haber, .cat-tile, .btn, .btn-ghost, .searchbar,
.searchbar select, .hsearch, .card, .panel, .footer, .footer .bottom { border: 0 !important; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 4px 20px -2px rgba(14,124,90,.16); }

.ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1;
      letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
      -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
.ms.dolu { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---------- Üst şerit, başlık, kategori menüsü ---------- */
.topbar { background: var(--surface-2); color: var(--muted); }
.topbar a { color: var(--muted); }
.topbar a:hover, .topbar .loc { color: var(--kirmizi); }
.topbar .sep { background: var(--surface-4); }

.header { background: var(--bg); box-shadow: 0 4px 20px -2px rgba(14,124,90,.06), 0 2px 8px rgba(0,0,0,.04); }
.brand img { border-radius: 16px; box-shadow: 0 4px 16px rgba(14,124,90,.25); }
.brand .bt b { color: var(--bordo); font-size: 22px; }
.brand .bt span { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 500; }
.searchbar { background: var(--surface-2); border-radius: 999px; box-shadow: 0 2px 12px rgba(0,0,0,.03); }
.searchbar:focus-within { box-shadow: 0 4px 20px rgba(14,124,90,.12); }
.searchbar .div { background: var(--surface-4); }
.searchbar button { border-radius: 999px; margin: 4px; width: 40px; }
.btn { border-radius: 999px; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--kirmizi); }
.btn-dark { background: var(--kirmizi); }
.btn-dark:hover { background: var(--kirmizi-koyu); }
.btn-ilanver { background: var(--turuncu); color: #fff; box-shadow: 0 4px 18px rgba(252,148,48,.35); border-radius: 999px; padding-inline: 22px; }
.btn-ilanver:hover { background: var(--turuncu); filter: brightness(1.05); }

.catnav { background: var(--surface-2); }
.catnav .wrap { gap: 8px; }
.catnav a { border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; }
.catnav a:hover { background: var(--surface-3); color: var(--kirmizi); }
.catnav a.all { background: var(--surface); color: var(--kirmizi); box-shadow: 0 2px 8px rgba(14,124,90,.06); }

/* ---------- Ortak bölüm başlığı ---------- */
.py-sec { padding-block: 64px; }
.py-sec.alt { background: var(--surface-2); }
.py-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.py-head h2 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.py-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.py-head .tum { color: var(--kirmizi); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 2px; }
.py-head .tum:hover { text-decoration: underline; }
.py-rozet { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--surface);
            color: var(--kirmizi); font-size: 11px; font-weight: 700; box-shadow: 0 2px 10px rgba(14,124,90,.08); margin-bottom: 8px; }
.py-rozet .ms { font-size: 16px; }

/* ---------- Hero ---------- */
.py-hero { position: relative; overflow: hidden; background: var(--surface-2); padding-block: 56px; }
.py-hero::before, .py-hero::after { content: ""; position: absolute; width: 384px; height: 384px; border-radius: 50%; filter: blur(64px); opacity: .4; pointer-events: none; }
.py-hero::before { top: -128px; left: -128px; background: var(--mint); }
.py-hero::after { bottom: -128px; right: 40px; background: var(--turuncu-soft); }
.py-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 40px; align-items: center; }
.py-hero .sol, .py-kolaj, .py-kolaj a { min-width: 0; }
/* Fotoğraflı ilan yoksa kolaj çizilmez, karşılama tek sütun olur */
.py-hero .wrap.tek { grid-template-columns: minmax(0,1fr); }
.py-hero .wrap.tek .sol { max-width: 820px; }
.py-hero .sol { display: flex; flex-direction: column; gap: 24px; }
.py-canli { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
            background: var(--surface); color: var(--bordo); font-size: 12px; font-weight: 600; box-shadow: 0 2px 10px rgba(14,124,90,.08); }
.py-canli i { width: 8px; height: 8px; border-radius: 50%; background: var(--kirmizi); animation: py-nabiz 2s infinite; }
@keyframes py-nabiz { 50% { opacity: .35; } }
.py-hero h1 { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.py-hero h1 em { font-style: normal; color: var(--kirmizi); }
.py-hero .alt-yazi { font-size: 16px; line-height: 24px; color: var(--muted); max-width: 36rem; margin: 0; }
.py-ara { background: var(--surface); border-radius: 24px; padding: 12px; display: flex; align-items: center; gap: 8px;
          box-shadow: 0 12px 32px -4px rgba(14,124,90,.12), 0 4px 12px rgba(0,0,0,.03); }
.py-ara .alan { display: flex; align-items: center; gap: 8px; background: var(--surface-2); padding: 12px 16px; border-radius: 16px; }
.py-ara .alan.kat { width: 178px; flex-shrink: 0; } .py-ara .alan.il { width: 150px; flex-shrink: 0; }
.py-ara .kelime { min-width: 150px; }
.py-ara .alan .ms { font-size: 20px; color: var(--kirmizi); }
.py-ara .alan.il .ms { color: var(--turuncu); }
.py-ara select, .py-ara input { border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; }
.py-ara select { font-weight: 600; cursor: pointer; }
.py-ara .kelime { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 0; }
.py-ara .kelime .ms { color: #BDC9C1; }
.py-ara input::placeholder { color: #8A968F; }
.py-ara button { border: 0; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px;
                 background: var(--kirmizi); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
                 box-shadow: 0 4px 20px rgba(14,124,90,.3); transition: background .2s, transform .15s; }
.py-ara button:hover { background: var(--bordo); } .py-ara button:active { transform: scale(.96); }
.py-ara button .ms { font-size: 18px; }
.py-populer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.py-populer b { color: var(--ink); }
.py-populer a { padding: 4px 12px; border-radius: 999px; background: var(--surface-3); }
.py-populer a:hover { background: var(--surface-4); }
.py-sayac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 8px; }
.py-sayac div { background: var(--surface); padding: 16px; border-radius: 16px; box-shadow: 0 4px 20px -2px rgba(14,124,90,.06); display: flex; flex-direction: column; }
.py-sayac b { font-size: 22px; line-height: 26px; font-weight: 800; color: var(--bordo); }
.py-sayac div:last-child b { color: var(--turuncu-yazi); }
.py-sayac span { font-size: 12px; color: var(--muted); }

.py-kolaj { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; padding-bottom: 20px; }
.py-kolaj a { background: var(--surface); border-radius: 24px; padding: 10px; box-shadow: 0 8px 24px rgba(14,124,90,.08); transition: transform .2s; display: block; }
.py-kolaj a:hover { transform: translateY(-4px); }
.py-kolaj a:nth-child(2) { margin-top: 24px; } .py-kolaj a:nth-child(4) { margin-top: -8px; }
.py-kolaj img, .py-kolaj .bos { width: 100%; height: 176px; object-fit: cover; border-radius: 16px; display: block; background: var(--surface-3); }
.py-kolaj a:nth-child(n+3) img, .py-kolaj a:nth-child(n+3) .bos { height: 160px; }
.py-kolaj .ic { padding: 12px; }
.py-kolaj .etk { font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--muted); padding: 2px 8px; border-radius: 999px; }
.py-kolaj p { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py-kolaj .fiyat { font-size: 18px; font-weight: 800; color: var(--turuncu-yazi); margin-top: 2px; }
.py-guven { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: var(--surface); padding: 12px 20px; border-radius: 999px;
            box-shadow: 0 16px 36px rgba(14,124,90,.18); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.py-guven > .ms { width: 32px; height: 32px; border-radius: 50%; background: var(--mint); color: var(--bordo); display: grid; place-items: center; font-size: 18px; }
.py-guven b { display: block; font-size: 12px; } .py-guven span { font-size: 11px; color: var(--muted); }

/* ---------- Kategoriler ---------- */
.py-kat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.py-kat a { background: var(--surface); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center;
            box-shadow: var(--sh-2); transition: transform .2s, box-shadow .2s; }
.py-kat a:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.py-kat .yuv { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; transition: transform .2s; }
.py-kat a:hover .yuv { transform: scale(1.1); }
.py-kat .yuv .ms { font-size: 32px; }
.py-kat b { font-size: 14px; color: var(--ink); }
.py-kat span { font-size: 11px; color: var(--muted); margin-top: 4px; }
.py-kat a:nth-child(7n+1) .yuv { background: var(--mint); color: var(--kirmizi); }
.py-kat a:nth-child(7n+2) .yuv { background: var(--turuncu-soft); color: #914D00; }
.py-kat a:nth-child(7n+3) .yuv { background: var(--mint-soft); color: #4B5850; }
.py-kat a:nth-child(7n+4) .yuv { background: #E6E9E7; color: var(--bordo); }
.py-kat a:nth-child(7n+5) .yuv { background: #FFB77D; color: #fff; }
.py-kat a:nth-child(7n+6) .yuv { background: #7BD8B0; color: #002115; }
.py-kat a:nth-child(7n+7) .yuv { background: #E0E3E1; color: var(--ink); }

/* ---------- Vitrin bandı ---------- */
.py-vitrin { background: var(--kirmizi); color: #fff; padding-block: 56px; }
.py-vitrin .bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.py-vitrin .bas > div { display: flex; align-items: center; gap: 12px; }
.py-vitrin .yildiz { width: 40px; height: 40px; border-radius: 50%; background: var(--turuncu); display: grid; place-items: center; box-shadow: 0 10px 15px rgba(0,0,0,.1); }
.py-vitrin h2 { font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; color: #fff; }
.py-vitrin p { margin: 0; font-size: 13px; color: #B9FFDD; }
.py-vitrin .gunluk { font-size: 11px; background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 999px; }
.py-vitrin .izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.py-vitrin .ilan { box-shadow: 0 8px 30px rgba(0,0,0,.18); }

/* ---------- İlan kartı (Themes/PazarYesili/Views/Shared/_IlanKart) ---------- */
.card-grid { gap: 24px; }
.ilan { background: var(--surface); border-radius: 24px; padding: 12px; box-shadow: var(--sh-2); display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s, box-shadow .2s; }
.ilan:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.ilan.vitrinli { box-shadow: var(--sh-2); }
.ilan .ph { aspect-ratio: auto; height: 192px; border-radius: 16px; position: relative; overflow: hidden; background: var(--surface-3); }
.ilan .ph img { width: 100%; height: 100%; object-fit: cover; }
.ilan .fav { width: 32px; height: 32px; top: 12px; right: 12px; background: rgba(255,255,255,.85); border: 0; box-shadow: 0 4px 6px rgba(0,0,0,.1); color: var(--ink); }
.ilan .fav:hover { color: #BA1A1A; }
.ilan .fav svg { width: 17px; height: 17px; }
.ilan .rozet-v { position: absolute; top: 12px; left: 12px; background: var(--turuncu); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 6px rgba(0,0,0,.1); letter-spacing: .02em; }
.ilan .body { padding: 12px 4px 0; gap: 4px; }
.ilan .price { font-size: 22px; line-height: 26px; color: var(--turuncu-yazi); }
.ilan .title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ilan .alt { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted);
             background: rgba(241,244,242,.6); border-radius: 12px; padding: 8px; }
.ilan .alt span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ilan .alt .ms { font-size: 14px; }

.py-sekme { display: flex; align-items: center; gap: 8px; background: var(--surface-2); padding: 6px; border-radius: 999px; overflow-x: auto; }
.py-sekme a { padding: 8px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.py-sekme a:hover { color: var(--kirmizi); }
.py-sekme a.on { background: var(--kirmizi); color: #fff; box-shadow: 0 2px 10px rgba(14,124,90,.2); padding-inline: 20px; }
.py-dahafazla { margin-top: 48px; text-align: center; }
.py-dahafazla a { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--kirmizi); padding: 14px 32px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 20px -2px rgba(14,124,90,.1); }
.py-dahafazla a:hover { background: var(--surface-2); }

/* ---------- İşletme kartı ---------- */
.biz { background: var(--surface); border-radius: 24px; padding: 16px; box-shadow: 0 6px 24px rgba(14,124,90,.07); display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s; }
.biz:hover { transform: translateY(-4px); }
.biz .ph { height: 128px; aspect-ratio: auto; border-radius: 16px; overflow: hidden; position: relative; background: var(--surface-3); }
.biz .ph img { width: 100%; height: 100%; object-fit: cover; }
.biz .onay { position: absolute; top: 12px; right: 12px; background: var(--bordo); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.biz .onay .ms { font-size: 14px; }
.biz .body { padding: 16px 0 0; }
.biz h3 { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--ink); margin: 0; }
.biz p { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.biz .bilgi { display: flex; gap: 16px; margin-top: 12px; font-size: 11px; color: var(--muted); }
.biz .bilgi span { display: inline-flex; align-items: center; gap: 4px; } .biz .bilgi .ms { font-size: 16px; }
.biz .git { margin-top: 16px; display: block; text-align: center; padding: 10px; border-radius: 999px; background: var(--surface-2); color: var(--kirmizi); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.biz:hover .git { background: var(--bordo); color: #fff; }

/* ---------- Haber kartı ---------- */
.haber { background: var(--surface); border-radius: 24px; padding: 16px; box-shadow: var(--sh-2); display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s; }
.haber:hover { transform: translateY(-4px); }
.haber .ph { height: 176px; aspect-ratio: auto; border-radius: 16px; overflow: hidden; position: relative; background: var(--surface-3); }
.haber .ph img { width: 100%; height: 100%; object-fit: cover; }
.haber .body { padding: 16px 0 0; }
.haber .ust { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.haber .ust b { background: var(--surface-3); color: var(--kirmizi); padding: 2px 10px; border-radius: 999px; }
.haber h3 { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--ink); margin: 0; }
.haber p { font-size: 13px; line-height: 18px; color: var(--muted); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.haber .devam { margin-top: 16px; color: var(--kirmizi); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; transition: gap .2s; }
.haber:hover .devam { gap: 8px; }
.haber .devam .ms { font-size: 16px; }

/* ---------- Çağrı bandı ---------- */
.py-cta { position: relative; overflow: hidden; background: var(--kirmizi); color: #fff; border-radius: 24px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
          box-shadow: 0 16px 40px -6px rgba(14,124,90,.28); }
.py-cta::before, .py-cta::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(64px); opacity: .2; pointer-events: none; }
.py-cta::before { top: -80px; right: -80px; background: var(--turuncu); }
.py-cta::after { bottom: -80px; left: -80px; background: var(--mint); }
.py-cta > * { position: relative; z-index: 1; }
.py-cta .etk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: #B9FFDD; color: #005139; font-size: 11px; font-weight: 700; margin-bottom: 12px; }
.py-cta .etk .ms { font-size: 16px; }
.py-cta h2 { font-size: 32px; line-height: 40px; font-weight: 800; margin: 0; color: #fff; letter-spacing: -.02em; }
.py-cta p { font-size: 16px; color: #B9FFDD; margin: 8px 0 0; }
.py-cta a.btn-v { display: inline-flex; align-items: center; gap: 12px; background: var(--turuncu); color: #fff; padding: 16px 32px; border-radius: 999px; font-size: 18px; font-weight: 600; box-shadow: 0 8px 24px rgba(252,148,48,.4); flex-shrink: 0; transition: filter .2s, transform .15s; }
.py-cta a.btn-v:hover { filter: brightness(1.05); } .py-cta a.btn-v:active { transform: scale(.96); }

/* ---------- Altbilgi (açık zemin) ---------- */
.footer { background: var(--surface-2); color: var(--muted); }
.footer h4 { color: var(--ink); }
.footer a { color: var(--muted); } .footer a:hover { color: var(--kirmizi); }
.footer .fbrand b { color: var(--bordo); }
.footer .desc { color: var(--muted); }
.footer .bottom { background: rgba(235,239,237,.6); border-radius: 16px; padding: 16px; color: var(--muted); }
.footer .made b, .footer .bottom b { color: var(--kirmizi); }

/* ---------- Mobil ---------- */
@media (max-width: 1100px) {
  .py-hero .wrap { grid-template-columns: minmax(0,1fr); }
  .py-kat { grid-template-columns: repeat(4, 1fr); }
  .py-vitrin .izgara { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
  .py-hero { padding-block: 32px; }
  .py-hero h1 { font-size: 28px; line-height: 36px; }
  .py-ara { flex-direction: column; align-items: stretch; }
  .py-ara .alan.kat, .py-ara .alan.il { width: auto; }
  .py-ara button { justify-content: center; }
  .py-sayac { gap: 8px; } .py-sayac b { font-size: 17px; }
  .py-kolaj img, .py-kolaj .bos, .py-kolaj a:nth-child(n+3) img { height: 120px; }
  .py-guven { position: static; transform: none; grid-column: 1 / -1; white-space: normal; border-radius: 20px; }
  .py-kat { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .py-sayac { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .py-sayac div { padding: 12px; }
  .py-vitrin .bas { flex-wrap: wrap; }
  .py-vitrin .izgara { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: minmax(0,1fr) !important; }
  .py-head h2, .py-cta h2 { font-size: 24px; line-height: 32px; }
  .py-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
  .py-sec { padding-block: 40px; }
}