/* ==========================================================================
   Hesap sayfalari: /giris, /ilan-ver, /hesabim
   --------------------------------------------------------------------------
   style.css'ten SONRA yuklenir ve onun degiskenlerini kullanir. Ayri dosya
   olmasinin sebebi: bu stiller yalnizca uc sayfada gerekiyor, 28 pazarlama
   sayfasina 20KB fazladan CSS indirmenin anlami yok.

   Kurallar docs/SITE-TASARIM.md'de. Ozellikle:
   - Mobilde (<=460px) yazi boyutlari dokuz basamakli olcegin disina cikmaz
   - Tek basina duran her dugme en az 44px yuksekliginde
   - Mobilde her sey sola yasli (tek okuma ekseni)
   - Girdi alanlari 16px'ten kucuk olamaz; kucuk olursa iOS Safari
     alana dokunulunca sayfayi zorla yakinlastiriyor
   ========================================================================== */

/* EN BASTA OLMALI ve !important SART.
   Tarayicinin kendi kurali [hidden]{display:none} en zayif kuraldir;
   asagida .hesap-dugme'ye display:inline-flex, .onay-satir'a display:flex
   verildigi anda "hidden" HICBIR ISE YARAMIYOR. 3 Eylul 2026'da bu
   yuzden ilk adimda "Geri" dugmesi ve takasa kapali kategorilerde
   "Takasa da acigim" kutusu gorunuyordu. */
[hidden] {
  display: none !important;
}

:root {
  --hesap-golge: 0 1px 2px rgba(26, 34, 56, .06), 0 8px 24px rgba(26, 34, 56, .06);
  --hesap-golge-yuksek: 0 2px 4px rgba(26, 34, 56, .08), 0 16px 40px rgba(26, 34, 56, .12);
}

/* Hesap sayfalarinin govdesi: pazarlama sayfalarindaki beyaz yerine
   hafif gri zemin - uzerindeki beyaz kartlar boylece "kagit" gibi
   ayrisiyor ve form alanlarinin sinirlari goz yormadan okunuyor. */
.hesap-sayfa {
  background: var(--surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.hesap-sayfa main {
  flex: 1;
}

/* --------------------------------------------------------------------------
   Ortak kabuk
   -------------------------------------------------------------------------- */
.hesap-kabuk {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.hesap-kabuk-dar {
  max-width: 440px;
}

.hesap-kart {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--hesap-golge);
}

.hesap-baslik {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.hesap-alt {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   /giris
   -------------------------------------------------------------------------- */
.giris-kart {
  padding: 32px 28px 26px;
  text-align: center;
}
.giris-logo {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--navy);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 18px;
}
.giris-logo span { color: var(--primary); }

.giris-kart h1 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.giris-kart .giris-aciklama {
  margin: 0 0 26px;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.giris-dugmeler {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Saglayici dugmeleri: Google beyaz + cerceve, Apple siyah. Ikisi de
   kendi marka kilavuzlarinin istedigi gorunum. Kendi turuncu dugmemizi
   koymuyoruz - kullanici "Google ile giris"i tanidigi seklinde ariyor. */
.saglayici-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.saglayici-dugme:active { transform: scale(.985); }
.saglayici-dugme:disabled { opacity: .55; cursor: default; transform: none; }
.saglayici-dugme svg { flex: none; }

.saglayici-google {
  background: var(--background);
  color: #3C4043;
  border: 1px solid #DADCE0;
}
.saglayici-google:hover:not(:disabled) { background: #F8F9FA; }

.saglayici-apple {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.saglayici-apple:hover:not(:disabled) { background: #1a1a1a; }

/* Yukleniyor halkasi - dugmenin icinde, metnin yerine gecmeden yaninda */
.dugme-donen {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hesapDon .7s linear infinite;
  flex: none;
}
@keyframes hesapDon { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dugme-donen { animation-duration: 2.4s; }
}

.giris-ayrac {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: var(--text-faint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.giris-ayrac::before,
.giris-ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* "Mesajlar uygulamada" notu - web'de mesajlasma OLMADIGI icin bu
   bilgi giriste veriliyor, ilan verdikten sonra surpriz olmasin. */
.uygulama-notu {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: left;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.uygulama-notu strong { color: var(--text); font-weight: 600; }
.uygulama-notu .notu-ikon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--primary);
}

.giris-kucuk {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
}
.giris-kucuk a { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Adim gostergesi (/ilan-ver)
   -------------------------------------------------------------------------- */
.adim-cubugu {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}
.adim-cubugu span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-alt);
  transition: background .25s ease;
}
.adim-cubugu span.gecildi { background: var(--primary-light); }
.adim-cubugu span.aktif { background: var(--primary); }

.adim-sayac {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 6px;
}

.adim { display: none; }
.adim.acik { display: block; }

.adim-govde {
  padding: 24px 22px;
}

/* Alt cubuk: Geri / Devam. Mobilde ekranin altina yapisiyor ki uzun
   formda kullanici asagi kaydirmak zorunda kalmasin. */
.adim-alt {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
.adim-alt .bosluk { flex: 1; }

.hesap-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.hesap-dugme:hover:not(:disabled) { background: var(--primary-dark); }
.hesap-dugme:active:not(:disabled) { transform: scale(.97); }
.hesap-dugme:disabled { opacity: .5; cursor: default; transform: none; }

.hesap-dugme-sade {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.hesap-dugme-sade:hover:not(:disabled) { background: var(--surface); color: var(--text); }

.hesap-dugme-tehlike {
  background: transparent;
  color: #C62828;
  border: 1px solid #F1C9C4;
}
.hesap-dugme-tehlike:hover:not(:disabled) { background: #FFF1EE; }

/* --------------------------------------------------------------------------
   Fotograf adimi
   -------------------------------------------------------------------------- */
.foto-birak {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 34px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.foto-birak:hover,
.foto-birak.uzerinde {
  border-color: var(--primary);
  background: var(--primary-light);
}
.foto-birak-ikon {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  color: var(--primary);
}
.foto-birak b {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
.foto-birak span {
  font-size: 14.5px;
  color: var(--text-muted);
}

.foto-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.foto-kutu {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
}
.foto-kutu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Kapak rozeti: ilk fotograf ilan kartinda gorunen resim. Kullanici
   bunu bilmezse rastgele bir fotograf kapak oluyor. */
.foto-kapak {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
/* Dokunma hedefi 44x44 ama GORUNEN daire 28px.
   2 kolonlu mobil izgarada 44px'lik dolu bir daire fotografin ustunu
   kapatiyor; oysa Apple HIG'in istedigi sey dokunulabilir ALAN, cizilen
   dairenin capi degil. Dugmenin kendisi 44px ve saydam, daire ::before
   ile iceride ciziliyor, "x" ::after ile onun ustune biniyor. */
.foto-sil {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  /* Isaretlemedeki metin gizleniyor - "x" ::after ile ciziliyor ki
     daire onun altinda kalsin (konumlu ::before, satir ici metnin
     USTUNE binerdi). Erisilebilirlik aria-label ile saglaniyor. */
  font-size: 0;
}
.foto-sil::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(26, 34, 56, .78);
  transition: background .15s ease;
}
.foto-sil::after {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.foto-sil:hover::before { background: rgba(26, 34, 56, .95); }
/* Yukleme ortusu */
.foto-durum {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .72);
  color: var(--navy);
}
.foto-durum.hata {
  background: rgba(198, 40, 40, .1);
  color: #C62828;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 6px;
}

/* --------------------------------------------------------------------------
   Kategori adimi
   -------------------------------------------------------------------------- */
.kategori-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}
.kategori-dugme {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Izgara hucresi daralabilsin diye - yoksa dugmenin min-content'i
     kolonu genisletiyor (bkz. .kategori-izgara yorumu). */
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.kategori-dugme:hover { border-color: var(--primary); }
.kategori-dugme.secili {
  border-color: var(--primary);
  background: var(--primary-light);
}
.kategori-emoji { font-size: 20px; line-height: 1; flex: none; }

.secim-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.secim-cip {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--background);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.secim-cip:hover { border-color: var(--primary); }
.secim-cip.secili {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Form alanlari
   -------------------------------------------------------------------------- */
.hesap-alan {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.hesap-alan > span {
  font-size: 15px;
  font-weight: 600;
}
.hesap-alan .ops { font-weight: 500; color: var(--text-faint); }
.hesap-alan .ipucu {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.hesap-alan input[type="text"],
.hesap-alan input[type="number"],
.hesap-alan textarea,
.hesap-alan select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--text);
  /* 16px alti iOS Safari'de sayfayi zorla yakinlastiriyor. */
  font-size: 16px;
  font-family: inherit;
  transition: border-color .15s ease;
  min-height: 48px;
}
.hesap-alan textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.hesap-alan input:focus,
.hesap-alan textarea:focus,
.hesap-alan select:focus {
  outline: none;
  border-color: var(--primary);
}
.hesap-alan select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.sayac {
  align-self: flex-end;
  font-size: 12.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.sayac.dolu { color: #C62828; font-weight: 600; }

/* Fiyat alani: para birimi kutunun icinde */
.fiyat-sarmal { position: relative; }
.fiyat-sarmal input { padding-right: 44px; }
.fiyat-sarmal::after {
  content: "₺";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
}

.onay-satir {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 44px;
}
.onay-satir input {
  width: 20px;
  height: 20px;
  margin-top: 12px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.hesap-hata {
  margin: 12px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #C62828;
  min-height: 20px;
}

/* --------------------------------------------------------------------------
   Onizleme
   -------------------------------------------------------------------------- */
.onizleme-sarmal {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.onizleme-kart {
  width: 210px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--background);
  box-shadow: var(--hesap-golge);
}
.onizleme-kart .gorsel {
  aspect-ratio: 1;
  background: var(--surface-alt);
  display: block;
  width: 100%;
  object-fit: cover;
}
.onizleme-kart .govde { padding: 10px 12px 12px; }
.onizleme-kart .fiyat {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 3px;
}
.onizleme-kart .ad {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.4;
  /* Uygulamadaki kart gibi iki satirda kesiliyor. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.onizleme-kart .yer {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
}
.onizleme-ozet { flex: 1; min-width: 0; }
.onizleme-ozet dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 7px 16px;
  font-size: 14.5px;
}
.onizleme-ozet dt { color: var(--text-muted); }
.onizleme-ozet dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   /hesabim
   -------------------------------------------------------------------------- */
.profil-serit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.profil-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profil-bilgi { flex: 1; min-width: 0; }
.profil-eylemler {
  display: flex;
  gap: 8px;
  flex: none;
}
.profil-bilgi h1 {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profil-bilgi p { margin: 0; font-size: 14.5px; color: var(--text-muted); }

.hesap-sekmeler {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.hesap-sekme {
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.hesap-sekme.acik { color: var(--primary); border-bottom-color: var(--primary); }

.ilan-satir {
  display: flex;
  gap: 14px;
  padding: 14px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.ilan-satir .kucuk-gorsel {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-alt);
}
.ilan-satir .orta { flex: 1; min-width: 0; }
.ilan-satir h3 {
  margin: 0 0 4px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  /* Uzun basliklar satiri kirmasin - iki satirda kesiliyor. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ilan-satir .fiyat {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.ilan-eylemler { display: flex; flex-wrap: wrap; gap: 7px; }
.ilan-eylem {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--background);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.ilan-eylem:hover { border-color: var(--primary); color: var(--primary); }
.ilan-eylem.tehlike:hover { border-color: #C62828; color: #C62828; }
/* Ic icindeki metni ortala - <a> ve <button> ayni satirda duruyor,
   ikisinin dikey hizasi aksi halde bir piksel kayiyor. */
.ilan-eylem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.rozet {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.rozet-satildi { background: var(--surface-alt); color: var(--text-muted); }
.rozet-aktif { background: rgba(31, 170, 89, .12); color: var(--success); }

.bos-durum {
  padding: 44px 24px;
  text-align: center;
}
.bos-durum .bos-ikon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  color: var(--text-faint);
}
.bos-durum h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.bos-durum p { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; }

/* Yuklenirken gosterilen iskelet - bos ekran yerine icerigin bicimi
   goruunsun ki sayfa "bozuk" hissettirmesin. */
.iskelet {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface) 37%, var(--surface-alt) 63%);
  background-size: 400% 100%;
  animation: iskeletKay 1.3s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes iskeletKay { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .iskelet { animation: none; } }

/* --------------------------------------------------------------------------
   Ilan onizleme penceresi (/hesabim > "Ilana bak")
   --------------------------------------------------------------------------
   Ayri sekmede acmak yerine sayfanin ustunde aciliyor: /ilan/{id} herkese
   acik paylasim sayfasi, uzerinde "ilanlarima don" yok. Yeni sekme de
   kotu bir cozumdu - kullanici sekmeler arasinda kayboluyor.
   Veri zaten bellekte (ilan listesi cekilirken geldi), yeni istek yok.
   -------------------------------------------------------------------------- */
.perde {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 34, 56, .55);
  backdrop-filter: blur(3px);
  animation: perdeGir .18s ease;
}
@keyframes perdeGir { from { opacity: 0; } }

.onizleme-pencere {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--background);
  border-radius: var(--radius-lg);
  box-shadow: var(--hesap-golge-yuksek);
  overflow: hidden;
  animation: pencereGir .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes pencereGir { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  .perde, .onizleme-pencere { animation: none; }
}

.pencere-ust {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.pencere-ust h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pencere-kapat {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pencere-kapat:hover { background: var(--surface); color: var(--text); }

.pencere-govde {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Galeri */
.galeri {
  position: relative;
  background: var(--surface-alt);
}
.galeri-resim {
  display: block;
  width: 100%;
  /* Ilan fotograflari dikey de olabiliyor; sabit oran vermek yerine
     yuksekligi sinirlayip resmi icine sigdiriyoruz - kirpma yok. */
  max-height: 46vh;
  min-height: 220px;
  object-fit: contain;
  background: #0f1420;
}
.galeri-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.galeri-ok:hover { background: #fff; }
.galeri-ok.sol { left: 10px; }
.galeri-ok.sag { right: 10px; }

.galeri-noktalar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.galeri-noktalar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
}
.galeri-noktalar span.aktif { background: #fff; width: 18px; border-radius: 999px; }

.pencere-bilgi { padding: 18px 20px 22px; }
.pencere-fiyat {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.pencere-ad {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.pencere-yer {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--text-muted);
}
.pencere-aciklama {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  /* Kullanicinin yazdigi satir sonlari korunsun. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pencere-ozellikler {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 7px 16px;
  font-size: 14.5px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pencere-ozellikler dt { color: var(--text-muted); }
.pencere-ozellikler dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.pencere-alt {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--background);
  flex: none;
}
.pencere-alt .bosluk { flex: 1; }

/* --------------------------------------------------------------------------
   Paylas menusu
   --------------------------------------------------------------------------
   Yalnizca navigator.share OLMAYAN tarayicilarda aciliyor (cogunlukla
   masaustu). Telefonda isletim sisteminin kendi paylas ekrani cikiyor.
   -------------------------------------------------------------------------- */
.paylas-perde { z-index: 110; }

.paylas-sayfa {
  width: 100%;
  max-width: 420px;
  background: var(--background);
  border-radius: var(--radius-lg);
  box-shadow: var(--hesap-golge-yuksek);
  overflow: hidden;
  animation: pencereGir .2s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .paylas-sayfa { animation: none; } }

.paylas-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 4px;
  padding: 18px 12px 8px;
}
.paylas-kanal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
}
.paylas-kanal:hover { background: var(--surface); }
.paylas-ikon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.paylas-ikon svg { width: 24px; height: 24px; }
.paylas-ad { font-size: 13px; font-weight: 600; }

.paylas-alt { padding: 8px 18px 18px; }

.paylas-adres {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.paylas-adres span {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
  /* Adres uzun; tasmasin, tek satirda kalsin. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paylas-kopyala {
  flex: none;
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.paylas-kopyala:hover { background: var(--navy-light); }

.paylas-not {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .onizleme-sarmal { flex-direction: column; }
  .onizleme-kart { width: 100%; max-width: 260px; }
}

@media (max-width: 560px) {
  .hesap-kabuk { padding: 22px 16px 48px; }
  .adim-govde { padding: 18px 16px; }
  .giris-kart { padding: 26px 20px 22px; }
  /* minmax(0, ...) sart: duz "1fr"in taban degeri min-content oldugu
     icin uzun etiketli kategori ("Kozmetik & Bakım") kolonu disari
     itiyor ve 320px'te sayfa 27px yatay kayiyordu. */
  .foto-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kategori-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Alt cubuk ekranin altina sabitlenir: uzun formda "Devam" dugmesini
     aramak icin asagi kaydirmak gerekmesin. */
  .adim-alt {
    position: sticky;
    bottom: 0;
    margin: 20px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--background);
    border-top: 1px solid var(--border);
    z-index: 5;
  }
  .hesap-dugme { flex: 1; }
  /* Dokunmada 44px (Apple HIG). Masaustunde 36px kaliyor: fare ile
     kullanilan bir satirda 44px'lik dort dugme ilan kartini sisiriyor. */
  .ilan-eylem { min-height: 44px; padding: 10px 15px; }
  /* Telefonda pencere degil, tam ekran - kucuk ekranda ortada duran
     kucuk bir kutu hem daralttiriyor hem "yarim" duruyor. */
  .perde { padding: 0; }
  .onizleme-pencere {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
  .galeri-resim { max-height: 42vh; }
  /* Paylas menusu masaustunde ortada kucuk bir kutu; telefonda alttan
     gelen bir sayfa. (Bu menu telefonda nadiren aciliyor - navigator.share
     varsa isletim sisteminin ekrani cikiyor - ama olmayan tarayicilar
     icin duzgun gorunmeli.) */
  .paylas-perde { align-items: flex-end; }
  .paylas-sayfa {
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .paylas-kopyala { min-height: 44px; }
  .pencere-bilgi { padding: 16px; }
  .pencere-alt { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .pencere-alt .hesap-dugme { flex: 1; }
  .profil-serit { padding: 16px; gap: 13px; flex-wrap: wrap; }
  /* Dar ekranda avatar+ad bir satir, dugmeler altta tam genislikte -
     yan yana sikistirilinca ikisi de dokunma hedefinin altina dusuyordu. */
  .profil-eylemler { flex-basis: 100%; }
  .profil-eylemler .ilan-eylem { flex: 1; }
  .profil-avatar { width: 54px; height: 54px; font-size: 21px; }
}

/* Mobil tipografi olcegi - docs/SITE-TASARIM.md bolum 2.
   Bilerek en sonda: yukaridaki bilesen kurallarini eziyor ki sayfada
   dokuz basamagin disinda bir boyut kalmasin. */
@media (max-width: 460px) {
  .hesap-baslik { font-size: 23px; }
  .giris-logo { font-size: 30px; }
  .giris-kart h1 { font-size: 23px; }
  .giris-kart .giris-aciklama,
  .hesap-alt { font-size: 15.5px; }
  .saglayici-dugme,
  .hesap-dugme { font-size: 16px; }
  .foto-birak b { font-size: 16px; }
  .foto-birak span,
  .uygulama-notu,
  .onay-satir,
  .hesap-hata,
  .bos-durum p { font-size: 14.5px; }
  .kategori-dugme,
  .secim-cip,
  .hesap-alan > span { font-size: 15.5px; }
  .hesap-alan .ipucu,
  .giris-kucuk,
  .paylas-ad,
  .paylas-adres span,
  .paylas-kopyala,
  .paylas-not { font-size: 13px; }
  .adim-sayac,
  .sayac,
  .onizleme-kart .yer { font-size: 12.5px; }
  .foto-kapak,
  .rozet,
  .ilan-eylem { font-size: 12px; }
  .profil-bilgi h1 { font-size: 17.5px; }
  .profil-bilgi p,
  .onizleme-ozet dl,
  .hesap-sekme,
  .ilan-satir h3,
  .pencere-yer,
  .pencere-ozellikler { font-size: 14.5px; }
  .pencere-fiyat { font-size: 23px; }
  .pencere-ad { font-size: 17.5px; }
  .pencere-ust h2 { font-size: 16px; }
  .pencere-aciklama { font-size: 15.5px; }
  .bos-durum h3,
  .onizleme-kart .fiyat,
  .ilan-satir .fiyat { font-size: 16px; }
  .onizleme-kart .ad { font-size: 14.5px; }
}