/* Loca paneli — yalnız /panel sayfasında yüklenir.
*
* styles.css burada DEQUEUE edilir (panel bir uygulama yüzeyi, ziyaretçi
* yüzeyi değil), bu yüzden token'lar bu dosyada yeniden tanımlanır.
* ⛔ Yeni palet AÇILMAZ: adlar ve değerler styles.css'tekiyle birebir aynı
* (DESIGN.md — "Aynı Rol Aynı Token"). Panelde bir rol yeni renk istiyorsa
* önce styles.css'te token'ı olmalı.
*
* Telefon önceliklidir (TEMA-REHBERI §1): temel yerleşim tek sütun,
* genişleme 720px'te.
*/
:root {
/* Otomatik karartmadan çıkış — gerekçe header.php'de. */
color-scheme: only light;
--paper: #f9f7f3;
--paper-2: #f5f2ed;
--card: #fefcf9;
--cream: #f2eee8;
--olive-950: #0d1e30;
--olive-900: #12293f;
--olive-800: #16324f;
--olive-800-rgb: 22 50 79;
--olive-300: #86a3bd;
--brass: #b68a5e;
--brass-600: #8b6532;
--brass-300: #d3b78e;
--brass-100: #ece0cd;
--ink: #14202d;
--ink-2: #3c4957;
--muted: #606a75;
--line: rgb(var(--olive-800-rgb) / 0.14);
--line-2: rgb(var(--olive-800-rgb) / 0.07);
--line-control: rgb(var(--olive-800-rgb) / 0.56);
--focus-ring: var(--brass-600);
--sale: #8b6532;
--wa: #1a7748;
--shadow-rgb: 18 41 63;
--shadow-sm: 0 1px 2px rgb(var(--shadow-rgb) / 0.04), 0 2px 8px -2px rgb(var(--shadow-rgb) / 0.05);
--shadow: 0 2px 6px -2px rgb(var(--shadow-rgb) / 0.05), 0 18px 36px -18px rgb(var(--shadow-rgb) / 0.13);
--r-xs: 8px;
--r-sm: 12px;
--r-md: 18px;
--r-lg: 26px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
--fs-label: 0.75rem;
--fs-caption: 0.86rem;
--fs-small: 0.94rem;
--fs-body: 1.0625rem;
--fs-button: 0.98rem;
--fs-num-sm: 1.24rem;
--fs-num: 1.4rem;
--pn-wrap: 860px;
}
/* ------------------------------------------------------------------ *
* Temel
* ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
body.loca-panel {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
-webkit-text-size-adjust: 100%;
}
.loca-panel h1,
.loca-panel h2 {
font-family: var(--font-display);
font-optical-sizing: auto;
font-weight: 500;
line-height: 1.2;
margin: 0;
}
.loca-panel h1 { font-size: clamp(1.5rem, 4.5vw, 2rem); }
.loca-panel h2 { font-size: var(--fs-num-sm); }
/* `:where()` özgüllüğü sıfırlar: `.pn-dugme` gibi bileşen sınıfları (class+element
yerine yalnız class) bu varsayılanı her koşulda ezebilsin — aksi hâlde
`.pn-dugme-birincil`'in `--cream` metni burada kaybediyordu (koyu lacivert
zeminde 2.83:1, WCAG eşiğinin altı — "İlan Ekle" ölçümüyle bulundu). */
.loca-panel :where(a) { color: var(--brass-600); }
.loca-panel :focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.pn-govde {
padding: 20px 0 96px;
}
.pn-ic {
width: min(100% - 32px, var(--pn-wrap));
margin-inline: auto;
}
/* ------------------------------------------------------------------ *
* Üst şerit
* ------------------------------------------------------------------ */
.pn-ust {
background: var(--olive-900);
color: var(--cream);
position: sticky;
top: 0;
z-index: 20;
}
.pn-ust-ic {
width: min(100% - 32px, var(--pn-wrap));
margin-inline: auto;
min-height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.pn-ust .brand {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--cream);
text-decoration: none;
font-family: var(--font-display);
font-size: var(--fs-num-sm);
font-weight: 500;
}
.pn-ust .brand small {
font-family: var(--font-body);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.72;
}
.pn-ust .brand .glyph {
display: inline-flex;
width: 26px;
height: 26px;
color: var(--brass-300);
}
.pn-ust .brand .glyph svg { width: 100%; height: 100%; }
/* Marka > Logo dolu: tam renkli görsel, yanında yazı yok (KARARLAR §14).
Koyu panel şeridinde siyah logo kaybolmasın diye arkasına açık zemin. */
.pn-ust .brand--logo { gap: 0; }
.pn-ust .brand--logo img {
display: block;
width: auto;
height: 30px;
background: var(--paper);
border-radius: var(--r-xs);
padding: 5px 9px;
}
.pn-ust-nav {
display: flex;
gap: 16px;
font-size: var(--fs-small);
}
.pn-ust-nav a {
color: var(--cream);
text-decoration: none;
padding: 6px 2px;
}
.pn-ust-nav a:hover { color: var(--brass-300); }
/* Koyu şeritte odak halkası açık tonla (DESIGN.md). */
.pn-ust :focus-visible { outline-color: var(--brass-300); }
/* Talepler'in okunmamış sayacı — koyu şeritte açık zeminli küçük çip
(CRM-REHBERI §4: "sayaç panel gezinmesinde durur"). */
.pn-sayi-rozet {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
margin-left: 4px;
border-radius: 999px;
background: var(--brass-300);
color: var(--olive-950);
font-size: var(--fs-label);
font-weight: 700;
line-height: 20px;
vertical-align: middle;
}
/* ------------------------------------------------------------------ *
* Başlık satırı ve düğmeler
* ------------------------------------------------------------------ */
.pn-baslik-satir {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 8px 0 20px;
}
.pn-dugme {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid var(--line-control);
border-radius: 999px;
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--fs-button);
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.pn-dugme:hover {
background: var(--cream);
}
.pn-dugme-birincil {
background: var(--olive-900);
border-color: var(--olive-900);
color: var(--cream);
}
.pn-dugme-birincil:hover {
background: var(--brass-600);
border-color: var(--brass-600);
color: #fff;
}
.pn-dugme-sade {
border-color: transparent;
color: var(--brass-600);
}
.pn-dugme-sade:hover { background: var(--cream); }
/* Düğme içi ikon (liste kartındaki "WhatsApp'ta paylaş"). loca_ikon_wa()
24×24 viewBox basar; metin yanında 16px'e indirilir. */
.pn-dugme > svg { width: 16px; height: 16px; flex: none; }
/* ------------------------------------------------------------------ *
* Liste araç çubuğu (arama + durum süzgeci) ve sayfalama
*
* Tek liste bileşeni iki ekranı sürüyor (İlanlarım + Talepler, KARARLAR §9).
* Düz GET formu + `` sayfalaması — liste ekranı SCF betiği yüklemez
* (TEMA-REHBERI §7).
* ------------------------------------------------------------------ */
.pn-liste-arac {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
margin: 0 0 20px;
}
.pn-arama { flex: 1 1 220px; }
.pn-suzgec { flex: 0 1 200px; }
.pn-arama,
.pn-suzgec {
display: flex;
flex-direction: column;
gap: 4px;
}
.pn-arama-etiket,
.pn-suzgec-etiket {
font-size: var(--fs-caption);
color: var(--muted);
font-weight: 500;
}
.pn-liste-arac input[type="search"],
.pn-liste-arac select {
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--line-control);
border-radius: var(--r-xs);
background: var(--card);
color: var(--ink);
font: inherit;
}
.pn-liste-arac-temiz {
align-self: center;
color: var(--brass-600);
font-size: var(--fs-caption);
}
.pn-liste-bos {
margin: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 28px 20px;
text-align: center;
color: var(--muted);
}
.pn-sayfalama {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 20px;
}
.pn-sayfalama-bag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 6px 10px;
border: 1px solid var(--line-control);
border-radius: var(--r-xs);
color: var(--ink);
text-decoration: none;
font-size: var(--fs-caption);
}
.pn-sayfalama-bag:hover { background: var(--cream); }
.pn-sayfalama-bag.is-aktif {
background: var(--olive-900);
border-color: var(--olive-900);
color: var(--cream);
}
/* Atlanan sayfa aralığı. Kutu DEĞİL: tıklanabilir görünmemeli — numaraların
bittiğini değil atlandığını söyleyen tek işaret. */
.pn-sayfalama-bosluk {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 2px;
color: var(--muted);
font-size: var(--fs-caption);
}
/* ------------------------------------------------------------------ *
* İlan listesi
* ------------------------------------------------------------------ */
.pn-liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 16px;
}
.pn-kart {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
scroll-margin-top: 76px;
}
.pn-kart-foto {
aspect-ratio: 3 / 2;
background: var(--paper-2);
}
.pn-kart-foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pn-kart-foto-bos {
display: block;
width: 100%;
height: 100%;
background: repeating-linear-gradient(45deg, var(--paper-2) 0 12px, var(--cream) 12px 24px);
}
.pn-kart-govde { padding: 16px; }
.pn-kart-meta {
margin: 0 0 6px;
font-size: var(--fs-caption);
color: var(--muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.pn-kart-baslik { margin: 0 0 8px; }
.pn-kart-fiyat {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: var(--fs-num);
font-weight: 500;
color: var(--ink);
}
.pn-kart-fiyat .per {
font-family: var(--font-body);
font-size: var(--fs-caption);
color: var(--muted);
}
.pn-kart-konum {
margin: 0 0 14px;
font-size: var(--fs-caption);
color: var(--muted);
}
.pn-kart-eylem {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.pn-rozet {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
/* Kontrast: brass-600 metin brass-100 zeminde 4,02:1 (AA altı, ölçüldü).
Zemin krem'e çekildi — DESIGN.md'nin brass-600 metin ölçümü (krem üstünde
~4,6:1, AA geçer). Durum ayrımı brass-600 METİNDE yaşar (pasif rozet
--muted gri metin taşır); kenarlık DESIGN kuralı gereği hairline --line. */
background: var(--cream);
color: var(--brass-600);
border: 1px solid var(--line);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.02em;
}
.pn-rozet-pasif {
background: var(--paper-2);
color: var(--muted);
}
/* İlan izni bitiş tarihi geçmiş ilan uyarısı (inc/panel-liste.php).
Kart içinde durur, ilanı yayından düşürmez — yalnız emlakçıya söyler. */
.pn-kart-uyari {
margin: 0 0 14px;
padding: 10px 12px;
border-left: 4px solid var(--brass);
border-radius: var(--r-xs);
background: var(--brass-100);
color: var(--brass-600);
font-size: var(--fs-small);
font-weight: 500;
}
/* ---- Sayaç (inc/sayac.php) ---- */
.pn-ofis-ozet {
margin: -8px 0 20px;
padding: 12px 16px;
background: var(--cream);
border-radius: var(--r-sm);
font-size: var(--fs-small);
color: var(--ink-2);
}
.pn-ofis-ozet strong {
font-family: var(--font-display);
font-weight: 500;
color: var(--ink);
}
/* Üçe bölünmüş sabit ızgara: rakamlar büyüdükçe kutular kaymasın, göz
kartlar arasında aynı sütunu takip edebilsin. */
.pn-sayac {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin: 0 0 14px;
background: var(--line-2);
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
overflow: hidden;
}
.pn-sayac-kutu {
padding: 10px 12px;
background: var(--paper-2);
/* dt (etiket) DOM'da önce; görsel sıra rakam-üstte olsun diye ters çevrilir. */
display: flex;
flex-direction: column-reverse;
gap: 2px;
}
.pn-sayac dt {
font-size: var(--fs-label);
color: var(--muted);
letter-spacing: 0.02em;
text-wrap: balance;
}
/* Dönem eki etiketin parçası ama vurgusu değil. */
.pn-sayac dt span {
opacity: 0.75;
white-space: nowrap;
}
.pn-sayac dd {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-num-sm);
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* ---- Durum makinesi ---- */
.pn-durum {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-top: 12px;
border-top: 1px solid var(--line-2);
}
.pn-durum-form { margin: 0; }
.pn-durum-dugme {
min-height: 40px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: var(--ink-2);
font: inherit;
font-size: var(--fs-caption);
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.pn-durum-dugme:hover:not(:disabled) {
background: var(--cream);
color: var(--ink);
}
.pn-durum-dugme.is-aktif {
background: var(--olive-900);
border-color: var(--olive-900);
color: var(--cream);
cursor: default;
}
/* ------------------------------------------------------------------ *
* Talepler ekranı (CRM-REHBERI §4, ticket 07)
*
* `.pn-kart`'ın fotoğrafsız karşılığı — aynı `.pn-liste` ızgarasına oturur.
* Satır tek büyük ``ya SARILMAZ (ilan sorusu özeti kendi ``'sını
* taşıyor, iç içe bağlantı geçersiz HTML üretirdi); yalnız ad tıklanabilir.
* ------------------------------------------------------------------ */
.pn-talep-satir {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
padding: 16px;
scroll-margin-top: 76px;
}
.pn-talep-satir.is-yeni {
border-left: 4px solid var(--brass-600);
}
.pn-talep-meta {
margin: 0 0 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.pn-talep-yeni {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
background: var(--brass-600);
color: #fff;
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: 0.02em;
}
.pn-talep-ad { margin: 0 0 6px; }
.pn-talep-ad a {
color: var(--ink);
text-decoration: none;
}
.pn-talep-ad a:hover { color: var(--brass-600); }
.pn-talep-ozet {
margin: 0 0 4px;
color: var(--ink-2);
font-size: var(--fs-small);
}
.pn-talep-zaman {
margin: 0 0 10px;
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-talep-alt {
margin: 0 0 12px;
color: var(--muted);
font-size: var(--fs-caption);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pn-talep-eylem {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Takip günü gelmiş satır. `is-yeni`nin pirinç şeridiyle AYNI kenarda
yarışmasın diye ayrım renkte değil zeminde: okunmamışlık ve takip iki
bağımsız gerçektir ve bir kayıt ikisini birden taşıyabilir. */
.pn-talep-satir.is-takip {
background: var(--cream);
}
.pn-talep-takip-rozet {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
/* Kontrast: olive-900 metin paper-2 zeminde AA üstü (DESIGN.md ölçümü).
Pirinç `is-yeni` rozetine bilerek benzemez — ikisi yan yana durabilir. */
background: var(--paper-2);
color: var(--olive-900);
border: 1px solid var(--line);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.02em;
}
/* "Bugün ve gecikmiş: N" — listenin üstünde tek satır, süzgece bağlanır.
Sıfırken PHP hiç basmıyor (boş bölüm olmayan bölümden kötüdür). */
.pn-takip-ozet {
margin: 0 0 16px;
font-size: var(--fs-small);
}
.pn-takip-ozet a {
color: var(--brass-600);
text-decoration: none;
font-weight: 500;
}
.pn-takip-ozet a:hover { text-decoration: underline; }
/* "İlgili kişi başvurusu" (CRM-REHBERI §5) — listenin üstünde katlanır bir
kutu. Günlük iş değil, 30 günde bir gelen bir istek; açıkta durup dikkat
çalmasın diye içinde. */
.pn-kisi-basvuru {
margin: 0 0 16px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--paper-2);
font-size: var(--fs-small);
}
.pn-kisi-basvuru summary {
cursor: pointer;
font-weight: 600;
color: var(--olive-900);
}
.pn-kisi-form {
margin-top: 12px;
}
.pn-kisi-form label {
display: block;
margin-bottom: 8px;
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-kisi-form-satir {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pn-kisi-form input[type="search"] {
flex: 1 1 12rem;
min-width: 0;
padding: 9px 12px;
border: 1px solid var(--line-control);
border-radius: var(--r-xs);
background: var(--card);
font: inherit;
}
/* Kişi görünümünün açıklama satırı — bu ekranda durum/not/takip düzenlenmez. */
.pn-kisi-aciklama {
margin: 0 0 20px;
color: var(--muted);
font-size: var(--fs-small);
}
/* ------------------------------------------------------------------ *
* Talep detayı (CRM-REHBERI §4, ticket 08)
*
* Ekran tek sütun bölümlerden kurulu: her bölümün kendi başlığı var ve
* ince bir çizgiyle ayrılır. Telefonda bölüm sırası okuma sırasıdır —
* önce kaydın kendisi, sonra durum/takip, sonra notlar, en altta kaldırma.
* ------------------------------------------------------------------ */
.pn-talep-bolum {
margin: 24px 0 0;
padding-top: 20px;
border-top: 1px solid var(--line-2);
}
.pn-talep-bolum-baslik {
margin: 0 0 12px;
font-family: var(--font-body);
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.pn-talep-bolum-not {
margin: 10px 0 0;
color: var(--muted);
font-size: var(--fs-caption);
}
/* Etiket–değer dökümü. `` çünkü bunlar çiftler; ekran okuyucu
"En fazla bütçeniz, 3.000.000 ₺" diye okur (sayaç kutularıyla aynı
gerekçe). Darda alt alta, 560px'ten sonra iki sütun. */
.pn-talep-dokum {
margin: 0;
display: grid;
gap: 10px;
}
.pn-talep-dokum-satir {
display: grid;
gap: 2px;
}
.pn-talep-dokum dt {
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-talep-dokum dd {
margin: 0;
color: var(--ink);
font-size: var(--fs-small);
font-weight: 500;
}
@media (min-width: 560px) {
.pn-talep-dokum-satir {
grid-template-columns: 190px 1fr;
gap: 12px;
align-items: baseline;
}
}
/* Ziyaretçinin kendi cümleleri — alıntı gibi durur, veri gibi değil. */
.pn-talep-mesaj {
margin: 0;
padding: 12px 16px;
background: var(--paper-2);
border-radius: var(--r-xs);
color: var(--ink-2);
font-size: var(--fs-small);
line-height: 1.55;
}
/* ---- Takip tarihi ---- */
.pn-talep-takip-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.pn-talep-takip-etiket {
flex-basis: 100%;
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-talep-takip-form input[type="date"] {
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--line-control);
border-radius: var(--r-xs);
background: var(--card);
color: var(--ink);
font: inherit;
}
.pn-talep-takip-uyari {
margin: 0 0 12px;
color: var(--brass-600);
font-size: var(--fs-small);
font-weight: 500;
}
/* ---- Görüşme notları ---- */
.pn-not-liste {
margin: 0 0 18px;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.pn-not {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 12px 14px;
}
.pn-not-ust {
margin: 0 0 4px;
display: flex;
flex-wrap: wrap;
gap: 6px;
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-not-yazar { font-weight: 600; }
.pn-not-metin {
margin: 0;
color: var(--ink);
font-size: var(--fs-small);
line-height: 1.55;
}
.pn-not-form {
display: grid;
gap: 10px;
justify-items: start;
}
.pn-not-etiket {
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-not-form textarea {
width: 100%;
min-height: 88px;
padding: 10px 12px;
border: 1px solid var(--line-control);
border-radius: var(--r-xs);
background: var(--card);
color: var(--ink);
font: inherit;
font-size: var(--fs-small);
resize: vertical;
}
/* ---- Arşivle · Kalıcı sil ---- */
/* İki eylem AYRI satırlarda durur ve aralarında çizgi var: KARARLAR §9
ikisinin tek düğmeye bindirilmesini yasaklıyor, görsel yakınlık da bir
bindirme biçimidir. */
.pn-talep-tehlike {
margin-top: 32px;
}
.pn-talep-tehlike-satir {
display: grid;
gap: 8px;
justify-items: start;
padding: 14px 0;
}
.pn-talep-tehlike-satir + .pn-talep-tehlike-satir {
border-top: 1px solid var(--line-2);
}
.pn-talep-tehlike-satir form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0;
}
.pn-talep-tehlike-satir p { margin: 0; }
.pn-talep-sil-etiket {
flex-basis: 100%;
color: var(--muted);
font-size: var(--fs-caption);
}
.pn-talep-sil-etiket strong {
color: var(--ink);
letter-spacing: 0.06em;
}
.pn-talep-sil input[type="text"] {
min-height: 44px;
width: 8em;
padding: 8px 12px;
border: 1px solid var(--line-control);
border-radius: var(--r-xs);
background: var(--card);
color: var(--ink);
font: inherit;
letter-spacing: 0.08em;
}
/* Geri dönüşsüz eylemin ağırlığı RENKTEN gelmez.
⛔ Kırmızı/terrakota bir "tehlike" rengi YOK — DESIGN.md'nin İki Eksen
Kuralı bunu "Satıldı" rozetinde de reddediyor ve panel styles.css'in
paletini birebir taşıyor ("Aynı Rol Aynı Token"). Ayrım karamel konturda
yaşar; eylemin gerçek freni zaten kutuya SİL yazmaktır. */
.pn-dugme-tehlike {
border-color: var(--brass-600);
color: var(--brass-600);
}
.pn-dugme-tehlike:hover {
background: var(--brass-600);
border-color: var(--brass-600);
color: #fff;
}
/* ------------------------------------------------------------------ *
* Liste altı — "Verilerimi indir"
*
* Listeden ince bir çizgiyle ayrılır ve sessiz kalır: günlük iş değil,
* güven maddesi (TEMA-REHBERI §7).
* ------------------------------------------------------------------ */
.pn-liste-alt {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--line-2);
}
.pn-liste-alt-not {
margin: 10px 0 0;
color: var(--muted);
font-size: var(--fs-caption);
}
/* ------------------------------------------------------------------ *
* Boş durum ve uyarı
* ------------------------------------------------------------------ */
.pn-bos {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 36px 20px;
text-align: center;
}
.pn-bos p { margin: 0 0 8px; }
.pn-bos-alt { color: var(--muted); font-size: var(--fs-small); }
.pn-bos .pn-dugme { margin-top: 12px; }
.pn-uyari {
margin: 0 0 16px;
padding: 12px 16px;
border: 1px solid var(--brass);
border-left-width: 4px;
border-radius: var(--r-xs);
background: var(--brass-100);
/* ⛔ Metin karamel DEĞİL mürekkep: karamel-100 üstünde karamel-600 4.0:1
ölçtü, WCAG gövde eşiğinin (4.5:1) altı. Kimlik kenarda ve zeminde
taşınır — 1px kenar o eşiğe tabi değil. Aynı gerekçe SCF hata
kutusunda da yazılı (`.acf-notice.-error`). */
color: var(--ink);
font-size: var(--fs-small);
font-weight: 500;
}
/* Yayın kilidi uyarısı: cümle + "yayına al" düğmesi yan yana, darda alt alta. */
.pn-uyari-bekleyen {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
}
.pn-uyari-bekleyen p,
.pn-uyari-bekleyen form {
margin: 0;
}
/* ------------------------------------------------------------------ *
* Giriş ekranı
* ------------------------------------------------------------------ */
.pn-giris {
min-height: 100svh;
display: grid;
place-items: center;
padding: 32px 0;
}
.pn-giris-kart {
width: min(100%, 420px);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: 32px 24px;
}
.pn-giris-marka { margin-bottom: 20px; }
.pn-giris-marka .brand {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--olive-900);
text-decoration: none;
font-family: var(--font-display);
font-size: var(--fs-num-sm);
font-weight: 500;
}
.pn-giris-marka .brand small {
font-family: var(--font-body);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.pn-giris-marka .glyph {
display: inline-flex;
width: 28px;
height: 28px;
color: var(--brass);
}
.pn-giris-marka .glyph svg { width: 100%; height: 100%; }
/* Marka > Logo dolu: tam renkli görsel, yanında yazı yok (KARARLAR §14).
Açık giriş kartında olduğu gibi basar. */
.pn-giris-marka .brand--logo { gap: 0; }
.pn-giris-marka .brand--logo img { display: block; width: auto; height: 40px; }
.pn-giris-alt {
margin: 6px 0 20px;
color: var(--muted);
font-size: var(--fs-small);
}
.pn-giris-yardim {
margin: 16px 0 0;
font-size: var(--fs-small);
}
/* ------------------------------------------------------------------ *
* Form kontrolleri
* ------------------------------------------------------------------ */
.pn-etiket {
display: block;
margin-bottom: 6px;
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.pn-girdi {
width: 100%;
min-height: 48px;
margin-bottom: 16px;
padding: 12px 14px;
border: 1px solid var(--line-control);
border-radius: var(--r-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
/* ⛔ 16px altına düşürülmez: iOS Safari küçük yazıda alana odaklanınca
sayfayı yakınlaştırır ve mobil form kullanılamaz hâle gelir. */
font-size: 1rem;
}
.pn-girdi:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 1px;
border-color: var(--brass-600);
}
.pn-onay {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: var(--fs-small);
color: var(--ink-2);
}
.pn-onay input { width: 18px; height: 18px; accent-color: var(--olive-900); }
.pn-form .pn-dugme-birincil { width: 100%; }
/* ------------------------------------------------------------------ *
* SCF form DOM'u
*
* ⚠️ Yalnız kararlı GENEL sınıflara yaslanılır (.acf-field, .acf-input,
* .acf-label). İç yapıya girilmez ki SCF güncellemesi paneli bozmasın —
* bu bir bakım bağlantısıdır, bilerek alınıyor.
* ------------------------------------------------------------------ */
.pn-form-sarmal {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
padding: 20px 16px;
}
.pn-form-sarmal .acf-fields > .acf-field {
/* SCF alanları varsayılan olarak yüzdelik yan yana gelir; panelde
TEK SÜTUN esastır (telefon önceliği). */
width: 100% !important;
float: none !important;
padding: 16px 0;
border-top: 1px solid var(--line-2);
}
.pn-form-sarmal .acf-fields > .acf-field:first-child {
border-top: 0;
padding-top: 0;
}
.pn-form-sarmal .acf-label label {
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.pn-form-sarmal .acf-label p.description {
font-size: var(--fs-caption);
color: var(--muted);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.pn-form-sarmal .acf-input input[type="text"],
.pn-form-sarmal .acf-input input[type="number"],
.pn-form-sarmal .acf-input input[type="url"],
.pn-form-sarmal .acf-input input[type="email"],
.pn-form-sarmal .acf-input textarea,
.pn-form-sarmal .acf-input select {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid var(--line-control);
border-radius: var(--r-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
font-size: 1rem; /* iOS yakınlaştırma koruması — bkz. .pn-girdi */
}
.pn-form-sarmal .acf-input textarea { min-height: 140px; }
/* Fiyat alanı: gerçek sayı girdisi `hidden` ile gizlenir (formla yine gider),
üstüne panel.js canlı binlik ayraçlı bir metin vekili basar. Bazı ACF
sürümleri `input { display:block }` yazıyor — `[hidden]` yine yer kaplamasın. */
.pn-form-sarmal .acf-input input[hidden] { display: none; }
.pn-form-sarmal .acf-input input:focus-visible,
.pn-form-sarmal .acf-input textarea:focus-visible,
.pn-form-sarmal .acf-input select:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 1px;
border-color: var(--brass-600);
}
/* Zincir kilidi: il seçilmeden ilçe, ilçe seçilmeden mahalle kutusu kapalıdır
(`panel.js`). Kapalı kutu, boş bir listeden farklı okunmalı — kutu soluklaşır
ve altına sıranın nerede olduğunu söyleyen bir satır düşer. */
.pn-form-sarmal .acf-input input:disabled,
.pn-form-sarmal .acf-input select:disabled {
background: var(--line-2);
color: var(--muted);
cursor: not-allowed;
}
.pn-form-sarmal .acf-input .pn-kilit-not {
margin: 6px 0 0;
font-size: var(--fs-caption);
color: var(--muted);
}
/* Akordeonlar ("Detaylar", "İşyeri", "Arsa", "Danışman", "Yayın").
*
* SCF akordeonu wp-admin griyle geliyor (#fff zemin, #d5d9dd kenar) ve ok
* işareti açık/kapalı ayrımı YAPMIYOR — iki durumda da aşağı bakıyor. Zemin
* ve kenar panelin token'larına çekilir; ok duruma bağlanır, çünkü katlanmış
* bir bölümün tek durum göstergesi odur. */
.pn-form-sarmal .acf-field.acf-accordion {
margin: 0;
background: transparent;
border-bottom: 0;
}
.pn-form-sarmal .acf-field.acf-accordion > .acf-label.acf-accordion-title {
padding: 15px 40px 15px 0;
border-radius: var(--r-xs);
transition: background-color 0.2s var(--ease-out);
}
.pn-form-sarmal .acf-field.acf-accordion > .acf-label.acf-accordion-title:hover {
background: var(--paper-2);
}
.pn-form-sarmal .acf-field-accordion > .acf-label label {
font-family: var(--font-display);
font-size: var(--fs-num-sm);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
cursor: pointer;
}
.pn-form-sarmal .acf-accordion .acf-accordion-title svg.acf-accordion-icon {
right: 6px;
color: var(--muted);
transition: transform 0.2s var(--ease-out);
}
.pn-form-sarmal .acf-accordion.-open > .acf-accordion-title svg.acf-accordion-icon {
transform: translateY(-50%) rotate(180deg);
}
.pn-form-sarmal .acf-field.acf-accordion > .acf-input.acf-accordion-content {
padding: 0 0 4px;
}
/* Zorunlu işareti markanın rengiyle. */
.pn-form-sarmal .acf-required { color: var(--brass-600); }
/* ---- Durum: iki dilimli seçim (SCF `button_group`) ----
*
* SCF varsayılanı wp-admin mavisini (#008dd4) basıyor ve dilimleri 38px
* yapıyor: ne panelin paleti (DESIGN.md "İki Eksen Kuralı" — üçüncü bir ton
* ailesi açılmaz) ne de panelin 48px'lik dokunma ölçüsü. Ekranın ilk gerçek
* kararı bu alan olduğu için kusur da ilk orada görülüyordu. */
.pn-form-sarmal .acf-button-group {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
width: 100%;
max-width: 420px;
padding: 4px;
border: 1px solid var(--line-control);
border-radius: 999px;
background: var(--paper);
}
.pn-form-sarmal .acf-button-group label {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin: 0;
padding: 8px 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--ink-2);
font-size: var(--fs-button);
font-weight: 500;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.pn-form-sarmal .acf-button-group label:hover {
border: 0;
background: var(--cream);
color: var(--ink);
}
.pn-form-sarmal .acf-button-group label:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
box-shadow: none;
border: 0;
background: var(--cream);
color: var(--ink);
}
.pn-form-sarmal .acf-button-group label.selected,
.pn-form-sarmal .acf-button-group label.selected:hover,
.pn-form-sarmal .acf-button-group label.selected:focus-visible {
border: 0;
background: var(--olive-900);
color: var(--cream);
}
/* ---- Evet/Hayır anahtarı (SCF `true_false`) ----
*
* Aynı hikâye: 30px yükseklik, #f5f5f5 zemin, açıkken wp-admin mavisi.
* Anahtarın kendi geometrisine (iki sütunlu ızgara + kayan dilim)
* DOKUNULMAZ — yalnız ölçüsü ve rengi panele çekilir. */
.pn-form-sarmal .acf-true-false > label {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
margin: 0;
cursor: pointer;
}
.pn-form-sarmal .acf-switch {
flex: none;
height: 44px;
border-radius: 999px;
border-color: var(--line-control);
background: var(--paper);
}
.pn-form-sarmal .acf-switch span {
padding: 0 14px;
font-size: var(--fs-small);
line-height: 42px;
}
.pn-form-sarmal .acf-switch .acf-switch-on {
color: var(--cream);
text-shadow: none;
}
.pn-form-sarmal .acf-switch .acf-switch-off { color: var(--ink-2); }
.pn-form-sarmal .acf-switch .acf-switch-slider {
border-radius: 999px;
border-color: var(--line-control);
background: var(--card);
}
.pn-form-sarmal .acf-switch:hover {
background: var(--cream);
border-color: var(--line-control);
}
.pn-form-sarmal .acf-switch.-focus {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.pn-form-sarmal .acf-switch.-on,
.pn-form-sarmal .acf-switch.-on:hover {
background: var(--olive-900);
border-color: var(--olive-900);
}
.pn-form-sarmal .acf-switch.-on .acf-switch-slider { border-color: var(--olive-900); }
.pn-form-sarmal .acf-true-false .message {
margin-left: 0;
font-size: var(--fs-small);
color: var(--ink-2);
}
/* ---- Birim eki (m² · ₺ · yıl · kat · ₺/ay) ----
*
* SCF eki `float:right` ile basıyor; girdiyi %100 genişlik yaptığımız için
* ek, girdinin YANINA değil ÜSTÜNE düşüyordu (ölçüldü, 1280px: 51px'lik
* girdinin sağ üst köşesinde 33×30'luk kutu). Satır flex'e alınır, ek
* girdiye bitişik tek parça olur. Kural alan TİPİNE bağlanır
* (`acf-field-number`), `:has()`e değil: eki olan sekiz alanın hepsi sayı
* alanı ve eki olmayan iki sayı alanında flex zararsız. */
.pn-form-sarmal .acf-field-number > .acf-input {
display: flex;
align-items: stretch;
}
.pn-form-sarmal .acf-field-number > .acf-input > .acf-input-wrap {
order: 1;
flex: 1 1 auto;
min-width: 0;
}
.pn-form-sarmal .acf-input-prepend { order: 0; }
.pn-form-sarmal .acf-input-append { order: 2; }
.pn-form-sarmal .acf-input-append,
.pn-form-sarmal .acf-input-prepend {
display: flex;
align-items: center;
float: none;
min-height: 48px;
padding: 0 14px;
border: 1px solid var(--line-control);
background: var(--paper-2);
color: var(--muted);
font-size: var(--fs-small);
line-height: 1;
white-space: nowrap;
}
.pn-form-sarmal .acf-input-append {
border-left-width: 0;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pn-form-sarmal .acf-input-prepend {
border-right-width: 0;
border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.pn-form-sarmal .acf-input-wrap .acf-is-appended {
border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
}
.pn-form-sarmal .acf-input-wrap .acf-is-prepended {
border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
}
.pn-form-sarmal .acf-input-wrap .acf-is-prepended.acf-is-appended {
border-radius: 0 !important;
}
/* ---- Danışman fotoğrafı (SCF `image`) ----
* Galeri düğmesiyle aynı sözcük: tek eylem, tek düğme biçimi. */
.pn-form-sarmal .acf-image-uploader .hide-if-value p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
color: var(--muted);
font-size: var(--fs-small);
}
.pn-form-sarmal .acf-image-uploader .acf-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 18px;
border: 1px solid var(--line-control);
border-radius: 999px;
background: transparent;
color: var(--ink);
font: inherit;
font-size: var(--fs-button);
font-weight: 500;
text-decoration: none;
cursor: pointer;
}
.pn-form-sarmal .acf-image-uploader .acf-button:hover {
background: var(--cream);
color: var(--ink);
}
/* Seçili fotoğrafın "Düzenle" / "Kaldır" düğmeleri.
*
* SCF ikisini de dashicon YAZI TİPİYLE çiziyor ve yalnız `:hover`da
* gösteriyor. Ön yüzde o yazı tipi yüklü değil — geriye 20×20'lik iki
* GÖRÜNMEZ düğme kalıyordu (ölçüldü) — ve dokunmatikte hover yok, yani
* telefondan bu fotoğraf değiştirilemiyordu. Galeri karosunda verilen
* kararın aynısı (bkz. "Galeri alanı"): düğmeler kalıcı ve okunur olur.
* Etiket uydurma bir simge değil, düğmenin kendi `title` metnidir. */
.pn-form-sarmal .acf-image-uploader .image-wrap .acf-actions {
position: static;
display: flex;
gap: 8px;
margin-top: 10px;
opacity: 1;
text-align: left;
}
.pn-form-sarmal .acf-image-uploader .acf-actions .acf-icon {
display: inline-flex;
align-items: center;
width: auto;
height: auto;
min-height: 40px;
padding: 8px 14px;
border: 1px solid var(--line-control);
border-radius: 999px;
background: transparent;
color: var(--ink);
font-size: var(--fs-caption);
font-weight: 500;
line-height: 1.4;
text-decoration: none;
}
.pn-form-sarmal .acf-image-uploader .acf-actions .acf-icon::before {
content: attr(title);
font-family: inherit;
font-size: inherit;
}
.pn-form-sarmal .acf-image-uploader .acf-actions .acf-icon:hover { background: var(--cream); }
/* Görsel yüklenene kadarki zemin SCF'de #f1f1f1 — panelin kâğıdı değil. */
.pn-form-sarmal .acf-image-uploader .image-wrap img {
background: var(--paper-2);
border-radius: var(--r-xs);
}
/* URL alanının küre simgesi de dashicon: çizilmiyor, ama SCF girdiye onun
için 27px sol dolgu ayırıyor — "Video Bağlantısı" tek başına diğer
alanlardan 13px içeride başlıyordu. `!important` SCF'nin kendi
`!important`ını geri alır; başka yolu yok. */
.pn-form-sarmal .acf-url .acf-icon { display: none; }
.pn-form-sarmal .acf-url input[type="url"] { padding-left: 14px !important; }
/* Akordeon içeriğinin ızgarası SCF'nin #eee çizgisiyle geliyor. */
.pn-form-sarmal .acf-field.acf-accordion > .acf-input.acf-accordion-content > .acf-fields {
border-top: 0;
}
/* ---- Hata durumu ----
*
* SCF hatayı kendi kırmızısıyla basıyor (özet #d94f4f zemin + beyaz metin,
* alan altı #ffe6e6 zemin + #cc2727 metin — ölçüldü). Palet ÜÇÜNCÜ BİR TON
* AİLESİ AÇMAZ, durum renkleri de dahil (DESIGN.md "İki Eksen Kuralı") ve
* panelin "dikkat" dili zaten karameldir (`.pn-uyari`). Hata da o dili
* konuşur; ayırt ediciliği renkten değil ÜÇ İŞARETTEN gelir: tepedeki sayı
* cümlesi, alanın altındaki cümle ve alanın kendi kenarı.
*
* Metin karamel değil mürekkep: karamel-100 üstünde karamel-600 4.0:1 ölçtü,
* WCAG gövde eşiğinin (4.5:1) altı. Kenar rengi karamel kalır — 1px kenar o
* eşiğe tabi değil, kimlik orada taşınır.
*
* ⚠️ Tepedeki özet ile alan altındaki cümle SCF'de AYNI sınıfları taşıyor
* (`.acf-notice.-error.acf-error-message`); ayıran şey `-dismiss`tir. */
/* Alan altındaki cümle DOLGUSUZ: dolgulu bir kutu, hemen altındaki dolgulu
girdiyle üst üste iki kutu oluyor ve cümle ikinci bir alan gibi okunuyordu.
Durumu alanın kenarı taşır; cümle onu adlandırır. */
.pn-form-sarmal .acf-notice.-error.acf-error-message:not(.-dismiss) {
margin: 0 0 8px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--brass-600); /* kart zemininde 5.0:1 */
font-size: var(--fs-small);
font-weight: 500;
}
.pn-form-sarmal .acf-notice.-error p {
margin: 0;
color: inherit;
}
/* Formun tepesindeki özet sayfa düzeyinde bir uyarıdır: `.pn-uyari`
kutusunun aynısı. Ayıran sınıf `-dismiss` (SCF ikisine de aynı sınıfları
veriyor, yalnız özette kapatma düğmesi var). */
.pn-form-sarmal .acf-notice.-error.-dismiss {
margin: 0 0 16px;
padding: 12px 16px;
border: 1px solid var(--brass);
border-left-width: 4px;
border-radius: var(--r-xs);
background: var(--brass-100);
color: var(--ink);
}
/* SCF kapatma düğmesini dashicon yazı tipiyle çiziyor; ön yüzde o yazı tipi
yüklü değil, yani geriye 20×20'lik GÖRÜNMEZ ama tıklanabilir bir kutu
kalıyordu (ölçüldü). Hata kapatılacak değil düzeltilecek bir şeydir. */
.pn-form-sarmal .acf-notice-dismiss { display: none; }
/* Hatalı alanın DENETİMİ de işaretlenir. SCF yalnız alanın altına cümle
koyuyor; yedi alan birden hatalıysa kullanıcı hangisinin eksik olduğunu
ancak her cümleyi okuyarak buluyordu. */
.pn-form-sarmal .acf-field.acf-error .acf-input input,
.pn-form-sarmal .acf-field.acf-error .acf-input select,
.pn-form-sarmal .acf-field.acf-error .acf-input textarea,
.pn-form-sarmal .acf-field.acf-error .acf-button-group,
.pn-form-sarmal .acf-field.acf-error .acf-input-append,
.pn-form-sarmal .acf-field.acf-error .acf-input-prepend,
.pn-form-sarmal .acf-field.acf-error .acf-gallery-attachments {
border-color: var(--brass-600);
}
/* ---- Kaydet şeridi ----
*
* Form elli alan uzunluğunda; düğme yalnız en altta dursaydı telefonda
* ~2.100px aşağıda kalırdı ve "kaydettim mi" sorusunun cevabı her seferinde
* bir kaydırma yolculuğu olurdu. Şerit kartın DİBİNE yapışır: `sticky`
* yeter, çünkü ata öğelerin hiçbiri `overflow` kırpmıyor (ölçüldü:
* form → sarmal → .pn-ic → .pn-govde, dördü de `visible`) — JS'e gerek yok.
*
* "Vazgeç" şeridin içindedir, başlık satırında değil: iki eylem aynı anda ve
* aynı yerde durur, kullanıcı formun neresinde olursa olsun. */
.pn-form-sarmal .acf-form-submit {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
padding-top: 14px;
padding-bottom: max(14px, env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
background: var(--card);
}
.pn-gonder {
flex: 1 1 auto;
margin-left: auto;
}
.pn-vazgec { flex: none; }
/* ------------------------------------------------------------------ *
* Galeri alanı — dokunmatik yeniden yerleşim
*
* SCF'nin galeri alanı masaüstü için yazılmış ve telefonda üç yerden
* kırılıyor (ölçüldü, 375×812):
* 1. Alan sabit yükseklikli bir kutu (kullanıcı ayarı, öntanımlı 400px)
* ve fotoğraflar kutunun İÇİNDE ayrıca kayıyor. Ekranın yarısını yiyen
* bir kaydırma tuzağı.
* 2. Araç çubuğu mutlak konumlu ve altta 48px yer ayrılmış; bizim 48px'lik
* dokunmatik seçimiz taşınca çubuk fotoğrafların ÜSTÜNE biniyor.
* 3. Sil düğmesi `display:none` ve yalnız `:hover` ile açılıyor —
* dokunmatikte hover yok, yani telefondan fotoğraf SİLİNEMİYOR.
* Sürükleme tuzağının JS ayağı `panel.js`'te (tutamak).
*
* ⚠️ Bu blok SCF'nin İÇ yapısına yaslanır — dosyanın başındaki "yalnız genel
* sınıflar" kuralının bilinçli istisnasıdır: alanı dokunmatikte çalışır
* kılmanın başka yolu yok. Bedeli bakım bağlantısı; SCF galeri DOM'unu
* değiştirirse burası ve `panel.js` birlikte gözden geçirilir.
* ------------------------------------------------------------------ */
.pn-form-sarmal .acf-gallery {
/* Satır içi `style="height:…"` ve `gallery_height` kullanıcı ayarı ezilir. */
height: auto !important;
min-height: 0;
border: 0;
background: none;
}
.pn-form-sarmal .acf-gallery-main {
position: static;
height: auto;
/* SCF bu kutuya saf beyaz basıyor; kartın zemini `--card` (#fefcf9).
Fotoğraf alanı kartın en büyük yüzeyi olduğu için beyaz blok orada
"başka bir ekran" gibi duruyordu. */
background: none;
}
.pn-form-sarmal .acf-gallery-attachments {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
height: auto;
padding: 0;
overflow: visible;
}
/* Boş alan sessiz kalmasın: kutu yerine ne yapılacağını söyleyen bir yüzey.
⛔ `:empty` kullanılmaz — SCF şablonu boşken bile sekme/satır sonu bırakır,
seçici hiç tutmaz. Sınıfı `panel.js` koyar. */
.pn-form-sarmal .acf-gallery-attachments.loca-bos {
display: block;
padding: 28px 20px;
border: 1px dashed var(--line-control);
border-radius: var(--r-sm);
background: var(--paper-2);
color: var(--muted);
font-size: var(--fs-small);
text-align: center;
}
.pn-form-sarmal .acf-gallery-attachments.loca-bos::after {
content: "Henüz fotoğraf eklenmedi. İlk fotoğraf ilan kapağı olur.";
}
/* `.acf-gallery` seçicide bilerek duruyor: ACF karo genişliğini
`.acf-gallery[data-columns="2"] .acf-gallery-attachment` ile veriyor
(yüzdelik float ızgarası). Aynı ağırlıkta bir seçici olmadan ızgara
hücresinin yarısı kadar karo çiziliyordu. */
.pn-form-sarmal .acf-gallery .acf-gallery-attachment {
float: none;
width: auto;
margin: 0;
padding: 0;
aspect-ratio: 4 / 3;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden;
background: var(--cream);
}
/* ACF fotoğrafı `transform: translate(±50%)` çiftiyle ortalar ve
`max-height` ile sığdırır — karo oranı sabitlenince bu, karodan taşan ve
kırpılmayan bir görsel bırakıyordu. Dönüşümler sıfırlanır, kırpmayı
`object-fit` yapar. */
.pn-form-sarmal .acf-gallery .acf-gallery-attachment .margin {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
transform: none;
background: none;
}
/* Sözde öğeli oran kutusu ACF'nin işi; fotoğrafı akışa bırakmak yerine
karoya çivileriz — karo oranını `aspect-ratio` zaten veriyor. */
.pn-form-sarmal .acf-gallery .acf-gallery-attachment .margin::before,
.pn-form-sarmal .acf-gallery .acf-gallery-attachment .margin::after { content: none; }
.pn-form-sarmal .acf-gallery .acf-gallery-attachment .thumbnail {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
transform: none;
}
.pn-form-sarmal .acf-gallery .acf-gallery-attachment .thumbnail img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
border-radius: 0;
transform: none;
}
.pn-form-sarmal .acf-gallery-attachment.active {
border-color: var(--brass-600);
box-shadow: 0 0 0 2px var(--brass-100);
}
/* Sürüklenen karo parmağın altında. */
.pn-form-sarmal .acf-gallery-attachment.ui-sortable-helper {
box-shadow: var(--shadow);
opacity: 0.96;
}
.pn-form-sarmal .acf-gallery-attachment.ui-sortable-placeholder {
visibility: visible !important;
border-style: dashed;
background: var(--paper-2);
}
.pn-form-sarmal .acf-gallery-attachment.ui-sortable-placeholder * { visibility: hidden; }
/* --- Karo üstü eylem şeridi --------------------------------------- *
* ACF şeridi sağ üste mutlak koyup hover'a bağlar. Dokunmatikte hover
* olmadığı için şerit alta alınır, kalıcı kılınır ve okunurluğu fotoğraftan
* bağımsız olsun diye koyu bir geçişin üstüne oturur. */
.pn-form-sarmal .acf-gallery-attachment .actions {
position: absolute;
inset: auto 0 0 0;
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 6px;
height: 44px;
padding: 0 6px;
background: linear-gradient(
to top,
rgb(var(--shadow-rgb) / 0.74),
rgb(var(--shadow-rgb) / 0.36) 55%,
rgb(var(--shadow-rgb) / 0)
);
}
/* Şerit çocukları ortak yüzey: 40px görsel, 44px dokunma yüksekliği. */
.pn-form-sarmal .acf-gallery-attachment .actions > * {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgb(var(--shadow-rgb) / 0.55);
color: #fff;
text-decoration: none;
cursor: pointer;
}
.pn-form-sarmal .acf-gallery-attachment .actions svg {
width: 20px;
height: 20px;
display: block;
pointer-events: none;
}
/* ACF'nin kendi ikon glifi susturulur; yerine panel.js çizili SVG koyar.
⛔ Seçici karo şeridine bağlıdır: kapsamsız hâli `.acf-gallery-remove`
sınıfını taşıyan HER düğmeyi 0 punto yapar. */
.pn-form-sarmal .acf-gallery-attachment .actions .acf-gallery-remove {
background-image: none !important;
font-size: 0;
text-indent: 0;
}
.pn-form-sarmal .acf-gallery-attachment .actions .acf-gallery-remove::before,
.pn-form-sarmal .acf-gallery-attachment .actions .acf-gallery-remove::after { content: none; }
.pn-form-sarmal .acf-gallery-attachment .actions > *:focus-visible {
outline: 2px solid var(--cream);
outline-offset: 2px;
}
/* Tutamak: sürükleme YALNIZ buradan başlar (panel.js `handle` seçicisi).
Karonun geri kalanına dokunmak sayfayı normal kaydırır. `grab` imleci
fareyle bunun bir menü değil bir sürükleme tutamağı olduğunu söyler. */
.loca-tut { touch-action: none; }
.pn-form-sarmal .acf-gallery-attachment .actions > .loca-tut { cursor: grab; }
.pn-form-sarmal .acf-gallery-attachment .actions > .loca-tut:active { cursor: grabbing; }
/* İlk fotoğraf = kapak. Alanın yardım metni bunu söylüyor; rozet görünür
kılar, çünkü sıralamanın tek görünür sonucu budur.
Görünüm karo ile fotoğraf penceresinde ORTAK — iki yerde iki farklı
"kapak" işareti olsa kullanıcı bunları aynı şey olarak okumaz. */
.loca-kapak-rozet {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: 999px;
background: var(--olive-900);
color: var(--cream);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Karo bağlamı: fotoğrafın köşesine oturur ve dokunuşu yutmaz. */
.acf-gallery-attachment .loca-kapak-rozet {
position: absolute;
top: 8px;
left: 8px;
pointer-events: none;
}
/* --- Alanın araç çubuğu ------------------------------------------- */
.pn-form-sarmal .acf-gallery-toolbar {
position: static;
height: auto;
margin-top: 14px;
padding: 14px 0 0;
border: 0;
border-top: 1px solid var(--line-2);
background: none;
}
.pn-form-sarmal .acf-gallery-toolbar .acf-hl {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.pn-form-sarmal .acf-gallery-toolbar .acf-hl > li {
float: none;
width: auto;
margin: 0;
padding: 0;
}
/* "Galeriye ekle" alanın birincil eylemi — panelin düğme diliyle. */
.pn-form-sarmal .acf-gallery-add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 48px;
padding: 10px 18px;
border: 1px solid var(--olive-900);
border-radius: 999px;
background: var(--olive-900);
color: var(--cream);
font-size: var(--fs-button);
font-weight: 500;
line-height: 1;
text-decoration: none;
text-shadow: none;
box-shadow: none;
transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.pn-form-sarmal .acf-gallery-add:hover {
background: var(--brass-600);
border-color: var(--brass-600);
color: #fff;
}
.pn-form-sarmal .acf-gallery-add.disabled {
opacity: 0.45;
pointer-events: none;
}
.pn-form-sarmal .acf-gallery-sort { width: 100%; }
/* Sıralama kutusu fotoğraf yokken HİÇ çıkmaz.
SCF ona yalnız `disabled` SINIFI veriyor (öznitelik değil — ölçüldü:
`select.disabled` true, `select.disabled` özniteliği false), yani kutu
sıralanacak hiçbir şey yokken tıklanabilir ve birincil düğmeyle aynı
ağırlıkta duruyordu. Boş ekranda tek eylem "Galeriye ekle"dir. */
.pn-form-sarmal .acf-gallery-sort.disabled { display: none; }
/* Kaçıncı fotoğraftayız — üst sınır 20 ve sessizce dayanmasın. */
.loca-foto-sayac {
display: block;
margin-bottom: 10px;
color: var(--muted);
font-size: var(--fs-caption);
font-variant-numeric: tabular-nums;
}
.loca-foto-sayac.is-dolu { color: var(--brass-600); font-weight: 600; }
/* --- SCF'nin fotoğraf bilgi kenarı — panelde kullanılmaz ----------- *
*
* Kenar dört WordPress alanı taşır (Başlık, Başlık, Alternatif metin,
* Açıklama) ve panelde üç ayrı sebeple yanlıştı:
*
* 1. SCF `.acf-gallery-side-data`'yı `position:absolute` + `inset 0/48px`
* tutuyor ve konumu `.acf-gallery`'ye (relative) göre çözüyor. Alanı
* akışa aldığımız için içerik ızgaranın ALTINA değil, ÜSTÜNE biniyordu:
* ölçüm 375×812'de ızgarayla aynı y'de 309×574'lük bir katman gösterdi,
* `elementFromPoint` "Galeriye ekle"nin yerinde bir metin alanı döndürdü
* — birincil düğme tıklanamaz hâldeydi. 1280px'te de aynı.
* 2. Türkçede `Title` ve `Caption` aynı kelimeye düşüyor: üst üste iki alan
* birden "Başlık" etiketi taşıyordu.
* 3. Dört alandan yalnız alternatif metin siteye ulaşıyor (single-ilan.php);
* kalan üçü hiçbir şablonda okunmuyor.
*
* Yerine `panel.js` kendi fotoğraf penceresini açar (aşağıda `.pn-foto`).
* Kenar hiç açılmaz — JS karo tıklamasını SCF'ye ulaşmadan kesiyor; bu kural
* ikinci savunma hattıdır (KARARLAR §9). */
.pn-form-sarmal .acf-gallery-side { display: none; }
/* ------------------------------------------------------------------ *
* Talep detayı — ziyaretçi fotoğrafı karo ızgarası (Tur B, ticket 04)
*
* Karo tıklanınca aynı `.pn-foto` penceresi açılır (talep-foto-panel.js).
* Her karonun altında tek tek indirme ve "İlana aktar". ⛔ Fotoğraf düzenleme
* yok — aktarıldıktan sonra ilan galerisi devralır.
* ------------------------------------------------------------------ */
.pn-talep-foto-izgara {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
}
.pn-talep-foto-karo {
display: flex;
flex-direction: column;
gap: 10px;
}
.pn-talep-foto-ac {
display: block;
width: 100%;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--cream);
cursor: pointer;
overflow: hidden;
}
.pn-talep-foto-ac:focus-visible { outline: var(--focus-ring); }
.pn-talep-foto-ac img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.pn-talep-foto-eylem {
display: flex;
flex-direction: column;
gap: 8px;
}
.pn-talep-foto-secim {
display: flex;
flex-direction: column;
gap: 4px;
}
.pn-talep-foto-secim select { width: 100%; }
.pn-talep-foto-durum {
margin: 0;
font-size: var(--fs-small);
color: var(--muted);
}
/* Liste satırındaki fotoğraf işareti — ⛔ küçük resim değil, tek kelime. */
.pn-talep-foto-isaret {
display: inline-block;
padding: 2px 8px;
border-radius: var(--r-xs);
background: var(--cream);
border: 1px solid var(--line);
font-size: var(--fs-caption);
color: var(--muted);
}
/* ------------------------------------------------------------------ *
* Fotoğraf penceresi (karoya dokununca) — `panel.js` basar
*
* Telefonda tam ekran, 720px üstünde ortalanmış bir kart. Üç bant:
* açık künye şeridi → koyu sahne → açık eylem alanı. Koyu sahne bilerek:
* fotoğraf her parlaklıkta kendi zemininde durur ve pencerenin tek konusu
* odur (DESIGN.md — sayfa ritmi zemin değişimiyle kurulur).
*
* `