:root{
  --blue:#1B5FEB; --blue-dark:#1450CF; --navy:#1E3A6E; --blue-soft:#EFF4FE;
  --purple:#7E22CE; --purple-dark:#6B1BAF; --purple-soft:#F8F0FE; --purple-line:#E7D3F7;
  --ink:#0E1526; --ink-2:#6B7688; --ink-3:#8A94A6;
  --line:#EBEFF7; --line-2:#F1F4FA;
  --bg:#F1F5FB;                      /* sayfa zemini: hafif mavi-gri */
  --card:#FFFFFF;                    /* kart içi: saf beyaz */
  --sh-sm:0 1px 2px rgba(16,36,73,.04), 0 6px 18px rgba(16,36,73,.055);
  --sh-md:0 2px 4px rgba(16,36,73,.04), 0 14px 34px rgba(16,36,73,.085);
  --sh-btn:0 4px 12px rgba(27,95,235,.26);
  --sh-btn-h:0 6px 16px rgba(27,95,235,.34);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1568px;margin:0 auto;padding:0 64px}

/* ================= HEADER ================= */
/* Sınıfla hedeflenir: çıplak `header{}` seçicisi, bölüm içindeki
   <header class="track-hd"> etiketlerine de sızıp onları da
   yapışkan yapıyordu (sayfa kaydırılırken üst menünün üstüne biniyorlardı). */
.site-header{background:#FBFCFE;position:sticky;top:0;z-index:50}
.hdr{display:flex;align-items:center;height:84px}
.logo{display:flex;align-items:center;height:36px}
.logo img{height:32px;width:auto;display:block}
nav.main{display:flex;align-items:center;gap:32px;margin-left:64px}
nav.main a{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:#2B3648}
nav.main a:hover{color:var(--blue)}
nav.main svg{flex:none;opacity:.85}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:24px}
.link-login{font-size:15px;font-weight:500;color:#2B3648}
.link-login:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;border-radius:11px;
  transition:background .16s, box-shadow .16s, transform .16s}
/* ⚠️ display:inline-flex, tarayıcının [hidden]{display:none} kuralını EZER
   (yazar stili, kullanıcı aracısı stilini yener). Bu satır olmadan işaretlemede
   ya da JS'te "hidden" verilen HİÇBİR düğme gizlenmiyor: 2026-08-18'de ilan
   sihirbazında tip seçimi ekranında "Taslak kaydet" ve "İlanı Yayınla"
   düğmelerinin görünmesinin sebebi buydu. Aynı tuzağın kayıtlı iki örneği:
   .field[hidden] ve .fcat-subs[hidden]. */
.btn[hidden]{display:none}
.btn-primary{background:linear-gradient(180deg,#3271F0 0%, var(--blue) 100%);color:#fff;
  font-size:15px;padding:12px 26px;border-radius:11px;box-shadow:var(--sh-btn);letter-spacing:-.005em}
.btn-primary:hover{background:linear-gradient(180deg,#2A69EA 0%, var(--blue-dark) 100%);
  box-shadow:var(--sh-btn-h);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--sh-btn)}

/* ================= HERO ================= */
.hero{position:relative;background:
  radial-gradient(820px 460px at 72% 36%, #E6EEFC 0%, rgba(230,238,252,0) 70%),
  linear-gradient(180deg,#FBFCFE 0%, #F1F5FB 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(340px,30%) 1fr;gap:26px;align-items:center;
  padding-top:6px;min-height:340px}
.hero-copy{align-self:center}
.hero h1{margin:0;font-size:44px;line-height:1.16;font-weight:800;letter-spacing:-.03em}
h1 .b{color:var(--blue)}
.hero p{margin:18px 0 0;font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:38ch;font-weight:600;}
.hero{position:relative}
/* Harita grid hücresini aşıp aşağı (arama çubuğu hizasına) taşabilsin:
   grid akışından çıkarılıp hero'ya göre konumlandırılır. */
.hero-art{position:absolute;top:-115px;right:0;width:70%;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero-copy,.tabs,.searchbar,.pop{position:relative;z-index:2}
.hero-art img{opacity: .4;width:98%;height:auto;display:block;
  filter:drop-shadow(0 18px 30px rgba(24,52,104,.10)) drop-shadow(0 5px 9px rgba(24,52,104,.05))}

/* ================= TABS ================= */
.tabs{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-sm);overflow:hidden;margin-top:24px}
.tab{display:flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:600;color:var(--ink-3);
  padding:14px 36px;border-bottom:3px solid transparent}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.tab[aria-selected="true"] svg{color:var(--blue)}

/* ================= SEARCH ================= */
.searchbar{position:relative;z-index:30;display:flex;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh-md);padding:8px 8px 8px 6px;margin-top:13px}
.sb-field{position:relative;flex:none}
/* Açık panelin sonraki bölümlerin altında kalmaması için.
   NOT: .hero üzerinde overflow:hidden KULLANILMAMALI — panel kırpılır,
   z-index bunu çözmez. */
.sb-field.is-open{z-index:80}
.sb-trigger{display:flex;align-items:center;gap:10px;padding:12px 15px;border:0;border-radius:11px;
  background:transparent;cursor:pointer;font-family:inherit;font-size:16px;font-weight:600;
  color:var(--ink);white-space:nowrap;transition:background .14s, box-shadow .14s}
.sb-trigger:hover{background:#F3F7FE}
.sb-trigger:focus-visible{outline:0;box-shadow:0 0 0 2px rgba(27,95,235,.35)}
.sb-field.is-open .sb-trigger{background:var(--blue-soft);box-shadow:inset 0 0 0 1.5px rgba(27,95,235,.25)}
.sb-field[data-combo="city"] .sb-trigger{min-width:168px}
.sb-field[data-combo="category"] .sb-trigger{min-width:214px}
.sb-label{max-width:168px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-field[data-combo="category"] .sb-label{max-width:190px}
.sb-field.has-value .sb-label{color:var(--blue)}
.sb-trigger .chev{margin-left:2px;opacity:.5;transition:transform .18s}
.sb-field.is-open .sb-trigger .chev{transform:rotate(180deg);opacity:.9}
.sb-div{width:1px;height:26px;background:var(--line);flex:none}
.sb-input{flex:1;min-width:0;display:flex;align-items:center;gap:13px;padding:0 22px}
.sb-input input{border:0;outline:0;background:transparent;font-family:inherit;font-size:16px;
  width:100%;padding:13px 0;color:var(--ink)}
.sb-input input::placeholder{color:#9AA5B6}
.searchbar .btn-primary{padding:14px 46px;font-size:16px;border-radius:12px}

/* ================= POPULAR ================= */
.pop{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:17px}
.pop .lbl{font-size:14.5px;font-weight:700;margin-right:4px}
.pop a{border:1px solid var(--line);border-radius:999px;padding:8px 17px;
  font-size:13.5px;font-weight:500;color:var(--ink-2);background:var(--card);box-shadow:0 1px 2px rgba(16,36,73,.04)}
.pop a:hover{border-color:#BFD2F7;color:var(--blue)}

/* ================= STATS ================= */
.section{padding-top:20px}
.stats{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
  display:grid;grid-template-columns:repeat(4,1fr)}
.stat{display:flex;align-items:center;gap:16px;padding:16px 28px;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0}
.stat .ic{flex:none;color:var(--navy)}
.stat b{display:block;font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.stat small{display:block;font-size:14px;color:var(--ink-2);margin-top:1px;font-weight:500}

/* ================= CAROUSELS =================
   Ürün fotoğrafı eklemek için .pthumb içine <img src="..."> koyun;
   fotoğraf yoksa aşağıdaki degrade zemin görünür. */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-top:18px}
.cols-single{grid-template-columns:1fr}
.cols-single .pcard{flex-basis:calc((100% - 7*14px)/8)}   /* aynı anda 8 kart */
.panel{position:relative;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:17px 20px 20px}
.panel-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.panel-hd h2{margin:0;font-size:17.5px;font-weight:700;letter-spacing:-.01em}
.panel-hd a{font-size:13.5px;font-weight:600;color:var(--blue)}
.strip{display:flex;gap:14px;min-width:0;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.strip::-webkit-scrollbar{display:none}
.pcard{flex:0 0 calc((100% - 7*14px)/8);min-width:0;scroll-snap-align:start}
/* display:block ŞART: tasarımda .pthumb bir <div>'di, üretimde kartın tamamı
   tıklanabilir olsun diye <a> oldu. Satır içi (inline) bir kutuda aspect-ratio
   ve overflow ÇALIŞMAZ; kural sessizce düşer ve dik bir görsel şeridi kendi
   boyuna uzatır. .rthumb'da bu satır zaten vardı. */
.pthumb{display:block;width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;margin-bottom:10px;background:#F7F8FA;
  box-shadow:0 2px 6px rgba(16,36,73,.12)}
/* Dikey (portre) format tercih edilirse: aspect-ratio:4/5 */
/* Ürün görseli yerleşimi — 2026-10-02 müşteri kararları (iki tur):
   Firmalar farklı en-boy oranında görsel yüklüyor; sunucu kırpmıyor
   (ListingImageStore yalnızca 1600px'e küçültür).
   - ANA SAYFA ŞERİDİ (.pthumb): 2026-10-04 müşteri kararıyla contain,
     ortalı — görselin tamamı görünür.
   - LİSTE KARTI (.rthumb) — 2026-10-04 müşteri kararıyla yeniden KIRPILMAZ:
     görselin tamamı çerçeveye sığar, yatayda ve dikeyde ortalanır (contain),
     kalan boşlukta çerçeve rengi. Görsel mutlak konumlu (inset:0): çerçeve boyunu
     yalnızca kutu (aspect-ratio / mobilde kart boyu) belirler, görselin doğal
     boyu ona karışmaz. Kural .rthumb bölümünde.
   - KART ÇERÇEVE RENGİ (.pthumb, .rthumb) #F7F8FA — 2026-10-04 müşteri
     kararı; görselin zemini yok, boşlukta (ve görselsiz kartta) bu renk görünür.
   - İÇ BOŞLUK: görsel çerçeveye değmez — img'de padding (border-box;
     object-fit içerik kutusuna uygulanır): 5px (2026-10-05; önce 10px).
   - DETAY (.g-ana, .g-thumb) ve arama önerisi (.ss-thumb): KIRPILMAZ
     (contain, ortalı, kalan boşluk beyaz) — detaydaki hâli onaylandı. */
.pthumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  padding:5px;box-sizing:border-box}
.pcard h3{margin:0 0 6px;font-size:12px;font-weight:600;line-height:1.32;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.pcity{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-3);margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcity svg{flex:none}
.pprice{font-size:12.5px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);box-shadow:0 3px 10px rgba(16,36,73,.14);
  display:grid;place-items:center;cursor:pointer;z-index:3;color:#5A6579}
.nav-btn:hover{color:var(--blue);border-color:#BFD2F7}
.nav-btn:disabled{opacity:0;pointer-events:none}
.nav-btn.prev{left:-14px}
.nav-btn.next{right:-14px}

/* ================= FEATURES ================= */
.features{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
  display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;margin-bottom:44px}
.feat{display:flex;gap:16px;padding:20px 26px;border-right:1px solid var(--line-2)}
.feat:last-child{border-right:0}
.feat .ic{flex:none;color:var(--navy);margin-top:2px}
.feat h3{margin:0 0 4px;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.feat p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ================= RESPONSIVE ================= */
@media(max-width:1200px){
  .wrap{padding:0 32px}
  .hero h1{font-size:44px}
  .hero-art{width:58%;top:56px}
  .stat{padding:22px}
}
@media(max-width:980px){
  nav.main{display:none}
  .hero-grid{grid-template-columns:1fr;padding-top:24px}
  .hero-art{max-width:100%;order:-1}
  .hero h1{font-size:36px}
  .cols{grid-template-columns:1fr}
  .stats,.features{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2),.feat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2),.feat:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
}
@media(max-width:680px){
  .wrap{padding:0 18px}
  .link-login{display:none}
  .tabs{display:flex;width:100%}
  .tab{flex:1;padding:14px 10px;justify-content:center}
  .searchbar{flex-wrap:wrap;padding:8px;gap:2px}
  /* Her alan kendi satırında: .sb-input'taki flex:1 (basis 0),
     width:100%'ü eziyor ve girişi ~18px'e sıkıştırıyordu. */
  .sb-field{flex:1 1 100%}
  .sb-trigger{width:100%;justify-content:flex-start}
  .sb-div{display:none}
  .sb-input{flex:1 1 100%;order:3;border-top:1px solid var(--line);margin:6px 0 0;padding:0 12px}
  .sb-input input{padding:14px 0}
  .searchbar .btn-primary{width:100%;order:4;margin-top:8px}
  .stats,.features{grid-template-columns:1fr}
  .stat,.feat{border-right:0;border-bottom:1px solid var(--line-2)}
  .nav-btn{display:none}
}

/* ============================================================
   COMBO — arama çubuğuna gömülü açılır liste
   Native <select> kullanılmaz: görünüm işletim sistemine göre
   değişmesin ve içinde arama yapılabilsin diye.
   ============================================================ */
.combo{position:absolute;top:calc(100% + 12px);left:0;z-index:70;
  width:min(400px, calc(100vw - 40px));
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 48px rgba(16,36,73,.18), 0 3px 8px rgba(16,36,73,.06);
  overflow:hidden;display:none}
.sb-field[data-combo="category"] .combo{width:min(470px, calc(100vw - 40px))}
.combo.open{display:block;animation:comboIn .16s cubic-bezier(.2,.7,.3,1)}
@keyframes comboIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.combo.open{animation:none}}

.combo-search{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line-2);color:var(--ink-3)}
.combo-search input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;
  font-size:15px;color:var(--ink);padding:0}
.combo-search input::placeholder{color:#9AA5B6;font-weight:400}

.combo-list{max-height:336px;overflow-y:auto;padding:6px;overscroll-behavior:contain}
.combo-list::-webkit-scrollbar{width:10px}
.combo-list::-webkit-scrollbar-thumb{background:#DCE3EE;border-radius:9px;border:3px solid #fff}
.combo-list::-webkit-scrollbar-track{background:transparent}

.combo-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:14.5px;
  color:var(--ink);padding:10px 12px;border-radius:9px;line-height:1.35}
.combo-opt:hover,.combo-opt[data-active]{background:var(--blue-soft)}
.combo-opt[data-active]{box-shadow:inset 0 0 0 1.5px rgba(27,95,235,.22)}
.combo-opt.is-selected{color:var(--blue);font-weight:600}
.combo-opt mark{background:#FFEFB8;color:inherit;border-radius:3px;padding:0 1px}

.combo-all{font-weight:600;color:var(--ink-2)}

/* --- ana kategori satırı --- */
.combo-row{display:flex;align-items:stretch;gap:2px}
.combo-row .combo-parent{flex:1;font-weight:650;font-size:14.5px;
  justify-content:space-between;padding-right:8px}
.combo-name{overflow:hidden;text-overflow:ellipsis}
.combo-badge{flex:none;font-size:11.5px;font-weight:600;color:var(--ink-3);
  background:#F2F5FA;border-radius:20px;padding:2px 8px;font-variant-numeric:tabular-nums}
.combo-opt:hover .combo-badge,.combo-opt[data-active] .combo-badge{background:#DFE9FD;color:var(--blue)}
.combo-caret{flex:none;width:34px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-3);border-radius:9px;display:grid;place-items:center;transition:transform .18s, background .14s}
.combo-caret:hover{background:#EDF1F8;color:var(--ink)}
.combo-caret.is-open{transform:rotate(90deg)}

/* --- alt kategoriler --- */
.combo-children{margin:2px 0 8px 13px;padding-left:11px;border-left:2px solid #E4EAF4}
.combo-child{font-size:14px;color:#3D4A61;padding:8px 12px}
.combo-child:hover,.combo-child[data-active]{color:var(--ink)}

.combo-empty{padding:26px 18px;text-align:center;font-size:14px;color:var(--ink-2);line-height:1.6}
.combo-empty strong{color:var(--ink)}
.combo-empty span{font-size:13px;color:var(--ink-3)}

/* 2026-10-04 müşteri kararı: mobilde de liste KUTUNUN ALTINA bağlı açılır.
   Tasarımdaki "bottom sheet" (position:fixed; bottom:12px) kaldırıldı:
   gerçek telefonda klavye açıkken ekrana sabitlenen panel klavyenin
   arkasında kalıyor ve sayfa kaydırıldıkça yer değiştiriyordu (iOS'ta
   fixed öğe görünür alana değil yerleşim alanına göre konumlanır). Kutunun
   altında açılan liste kutuyla birlikte kayar; tüm tarayıcılarda aynı. */
@media(max-width:680px){
  .combo,.sb-field[data-combo="category"] .combo{
    position:absolute;top:calc(100% + 8px);left:0;right:0;bottom:auto;width:auto;
    max-height:none;z-index:70}
  .combo-list{max-height:min(50vh,336px)}
  /* Demo çubuğu da ekranın altında sabit duruyor; panel açıkken
     listenin alt seçeneklerini kapatıp tıklamayı engelliyordu. */
  body[data-combo-open] .demo-bar{opacity:0;pointer-events:none}
}


/* ============================================================
   HERO — dönüşümlü başlık
   İki metin üst üste konumlanır; yükseklik sabit kalır ki
   altındaki arama çubuğu her 3 saniyede zıplamasın.
   ============================================================ */
.rotator{position:relative;display:block;min-height:2.32em}
.rot-item{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;will-change:opacity,transform}
.rot-item.is-active{opacity:1;transform:none;pointer-events:auto}
.rot-item.is-leaving{opacity:0;transform:translateY(-14px)}
@media (prefers-reduced-motion:reduce){
  .rot-item{transition:opacity .2s}
  .rot-item,.rot-item.is-leaving{transform:none}
}

/* ============================================================
   BÖLÜM BAŞLIKLARI
   ============================================================ */
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.btn-line{background:transparent;border:1.5px solid var(--line);color:var(--ink);
  font-size:14.5px;padding:11px 20px;box-shadow:none}
.btn-line:hover{border-color:#C3D4F5;background:var(--card);color:var(--blue)}
.btn-purple{background:linear-gradient(180deg,#9333EA 0%, var(--purple) 100%);color:#fff;
  font-size:15px;padding:12px 26px;box-shadow:0 4px 12px rgba(126,34,206,.24)}
.btn-purple:hover{background:linear-gradient(180deg,#8226C4 0%, var(--purple-dark) 100%);
  box-shadow:0 6px 16px rgba(126,34,206,.32);transform:translateY(-1px)}

/* ============================================================
   ÜRÜN TALEPLERİ
   Talep ilanında görsel yoktur; kartın görsel ağırlığını
   monogram ve miktar taşır.
   ============================================================ */
.talepler{padding-top:34px}
.talep-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.talep-hd .kicker{color:var(--purple)}
.talep-hd h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-.025em}
.talep-hd p{margin:7px 0 0;font-size:14.5px;color:var(--ink-2);max-width:56ch}
.talep-hd .btn{flex:none}

/* 2026-10-02 müşteri kararı: talepler masaüstünde de kaydırmalı şerit
   (önceden 3 sütunlu ızgaraydı). Aynı anda 3 kart (≤1200px: 2, mobil: 1);
   oklar ürün şeridindeki gibi panelin dışına taşar.
   Dolgu + eksi kenar boşluğu: overflow-x kutuyu dikeyde de kırpar; kartın
   hover kalkışı ve gölgesi kesilmesin diye. */
.talep-wrap{position:relative}
.talep-grid{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 2px 14px;margin:-4px -2px -14px;
  scroll-padding-inline:2px}   /* yoksa yakalama 2px kaydırır ve "önceki" oku açılışta görünür */
.talep-grid::-webkit-scrollbar{display:none}
.talep-wrap .talep-prev{left:-14px}
.talep-wrap .talep-next{right:-14px}

.tcard{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);
  padding:20px 20px 16px;display:flex;flex-direction:column;gap:13px;
  transition:box-shadow .18s, transform .18s, border-color .18s;
  flex:0 0 calc((100% - 2*16px)/3);min-width:0;scroll-snap-align:start}
.tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--purple) 0%, #A855F7 100%)}
.tcard:hover{transform:translateY(-3px);border-color:var(--purple-line);
  box-shadow:0 3px 6px rgba(16,36,73,.05), 0 16px 34px rgba(90,30,150,.14)}

.tcard-flag{position:absolute;top:14px;right:-30px;transform:rotate(38deg);
  background:var(--purple-soft);color:var(--purple);border:1px solid var(--purple-line);
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 34px;pointer-events:none}

.tcard-top{display:flex;align-items:center;gap:11px;min-width:0}
.tmono{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:14px;font-weight:800;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(150deg,#5B7AA8,#33507B)}
.tcard[data-tone="b"] .tmono{background:linear-gradient(150deg,#6E8C6A,#3F6142)}
.tcard[data-tone="c"] .tmono{background:linear-gradient(150deg,#8A7CB0,#564A85)}
.tcard[data-tone="d"] .tmono{background:linear-gradient(150deg,#B08356,#7C5730)}
.tcard[data-tone="e"] .tmono{background:linear-gradient(150deg,#5E93A8,#356174)}
.tcard[data-tone="f"] .tmono{background:linear-gradient(150deg,#A2707A,#6E434E)}

.tfirm{display:flex;flex-direction:column;gap:2px;min-width:0}
.tfirm-name{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tfirm-name .vbadge{flex:none}
.tfirm-meta{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3)}
.tpin{display:inline-flex;color:var(--ink-3)}

.tcard-title{margin:0;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.015em;
  color:var(--ink);min-height:43px}

.tcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:13px;border-top:1px dashed var(--line)}
.tqty{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px;color:var(--ink-2)}
.tqty b{font-size:20px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

.btn-offer{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border:1.5px solid var(--purple-line);
  background:var(--purple-soft);color:var(--purple);cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:10px;
  transition:background .16s, color .16s, border-color .16s, box-shadow .16s}
.btn-offer svg{transition:transform .16s}
.btn-offer:hover{background:var(--purple);border-color:var(--purple);color:#fff;
  box-shadow:0 4px 12px rgba(126,34,206,.26)}
.btn-offer:hover svg{transform:translateX(2px)}
.btn-offer:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(126,34,206,.28)}

/* ============================================================
   NASIL ÇALIŞIR
   Her blok: solda/sağda ekran görüntüsü, karşısında adımlar.
   Görsel dosyası yoksa yer tutucu görünür (.shot-body.is-empty).
   ============================================================ */
.nasil{background:linear-gradient(180deg,#FFFFFF 0%, #F7FAFE 100%);
  border-top:1px solid var(--line);padding:56px 0 60px;margin-top:12px}
.nasil-hd{text-align:center;max-width:660px;margin:0 auto 38px}
.nasil-hd h2{margin:0;font-size:32px;font-weight:800;letter-spacing:-.03em}
.nasil-hd p{margin:12px 0 0;font-size:15.5px;line-height:1.65;color:var(--ink-2)}

.track{display:grid;grid-template-columns:1.08fr 1fr;gap:44px;align-items:center}
.track.is-reverse .track-media{order:2}

/* --- ekran görüntüsü çerçevesi --- */
.track-media{margin:0;min-width:0}
.shot{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 3px 8px rgba(16,36,73,.06), 0 22px 48px rgba(16,36,73,.13)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:#F7F9FC;border-bottom:1px solid var(--line-2)}
.shot-dot{width:9px;height:9px;border-radius:50%;background:#DCE3ED;flex:none}
.shot-dot:first-child{background:#E8C4C0}
.shot-dot:nth-child(2){background:#EBDCBE}
.shot-dot:nth-child(3){background:#CBE0CC}
.shot-url{margin-left:10px;flex:1;background:#fff;border:1px solid var(--line-2);border-radius:6px;
  padding:4px 10px;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-body{position:relative;aspect-ratio:16/10;background:#FBFCFE;overflow:hidden}
.shot-body img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

/* yer tutucu — görsel yüklenemezse */
.shot-ph{display:none}
.shot-body.is-empty{display:grid;place-items:center;
  background:
    linear-gradient(#FBFCFE,#FBFCFE) padding-box,
    repeating-linear-gradient(45deg,#EEF2F8 0 10px, #F7F9FC 10px 20px)}
.shot-body.is-empty .shot-ph{display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;padding:18px}
.shot-ph b{font-size:13px;font-weight:700;color:#7E8DA6}
.shot-ph span{font-size:12px;color:#9AA6B8}

/* --- metin tarafı --- */
.track-body{min-width:0}
.track-hd{display:flex;gap:15px;align-items:flex-start;padding-bottom:16px;
  border-bottom:1px solid var(--line-2);margin-bottom:4px}
.track-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue)}
.track-demand .track-ic{background:var(--purple-soft);color:var(--purple)}
.track-hd h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.025em}
.track-hd p{margin:6px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}

.steps{list-style:none;margin:0;padding:0}
.step{display:flex;gap:15px;padding:15px 0}
.step + .step{border-top:1px solid var(--line-2)}
.step-n{flex:none;width:27px;height:27px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;background:var(--blue-soft);color:var(--blue);
  font-variant-numeric:tabular-nums;margin-top:1px}
.track-demand .step-n{background:var(--purple-soft);color:var(--purple)}
.step h4{margin:0 0 3px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.step p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.track-cta{margin-top:18px}

/* --- iki blok arası ayraç --- */
.nasil-sep{position:relative;text-align:center;margin:44px 0}
.nasil-sep::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.nasil-sep span{position:relative;background:#FAFCFE;border:1px solid var(--line);border-radius:999px;
  padding:6px 16px;font-size:12px;font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#0E1930;color:#AFBCD2;padding:52px 0 0;font-size:14px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1.15fr 1.25fr 1.05fr;gap:34px;
  padding-bottom:40px}
.foot-logo{height:30px;width:auto;display:block;margin-bottom:15px;
  filter:brightness(0) invert(1);opacity:.95}
.foot-brand p{margin:0;font-size:13.5px;line-height:1.65;color:#93A2BC;max-width:34ch}
.foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fbadge{font-size:11.5px;font-weight:600;color:#B9C7DC;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 11px}

.foot-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot-col h3{margin:0 0 4px;font-size:14.5px;font-weight:700;color:#fff;letter-spacing:-.01em;width:100%}
.acc-btn{all:unset;display:flex;align-items:center;gap:8px;font:inherit;color:inherit;cursor:default}
.acc-btn svg{display:none}
.acc-panel{display:flex;flex-direction:column;gap:11px;align-items:flex-start;width:100%}
.foot-col a{color:#9FADC6;font-size:13.5px;transition:color .15s}
.foot-col a:hover{color:#fff}

.fline{display:flex;align-items:center;gap:9px;color:#C2CEE2 !important;font-size:13.5px}
.fline svg{flex:none;opacity:.75}
.fline-plain{color:#8898B4 !important}
.foot-social{display:flex;gap:9px;margin-top:6px}
.foot-social a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#B9C7DC;
  transition:background .16s, color .16s, transform .16s}
.foot-social a:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}

.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px 28px;
  flex-wrap:wrap;padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.09);
  font-size:12.5px;color:#8E9DB8}
.foot-bottom-right{display:flex;align-items:center;gap:14px 34px;flex-wrap:wrap;
  margin-left:auto}
.foot-legal{flex:none}
.foot-legal h3{display:none}
.foot-legal .acc-panel{flex-direction:row;flex-wrap:wrap;gap:18px}
.foot-legal a{color:#93A2BC;transition:color .15s}
.foot-legal a:hover{color:#fff}

/* yazılım geliştirme künyesi */
.foot-credit{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#7E8DA9}
.foot-credit a{color:#B9C7DC;font-weight:700;transition:color .15s}
.foot-credit a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-credit a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}

/* ============================================================
   RESPONSIVE — yeni bölümler
   ============================================================ */
@media(max-width:1200px){
  .tcard{flex-basis:calc((100% - 16px)/2)}
  .foot-top{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:980px){
  .track{grid-template-columns:1fr;gap:26px}
  .track.is-reverse .track-media{order:0}
  .nasil-sep{margin:34px 0}
  .nasil-hd h2{font-size:26px}
  .talep-hd{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:680px){
  .rotator{min-height:2.4em}
  .foot-top{grid-template-columns:1fr;gap:26px;padding-bottom:30px}
  .foot-bottom{flex-direction:column;align-items:stretch;gap:0;padding-top:0;border-top:0}
  .foot-bottom-right{display:contents}
  .foot-legal{order:1;width:100%}
  .foot-legal h3{display:block;margin:0;width:100%}
  .foot-copy{order:2;padding:16px 0 4px;border-top:1px solid rgba(255,255,255,.09);
    font-size:12px;color:#8E9DB8}
  .foot-credit{order:3;padding-bottom:4px}
  .nasil{padding:40px 0 44px}
  .track{padding:22px 20px}
  .track-cta{align-self:stretch;justify-content:center}
}

/* ============================================================
   MİSAFİR / ÜYE GÖRÜNÜMÜ
   Gövdedeki data-view değerine göre yalnızca ilgili varyant görünür.

   ÜRETİM NOTU: burada iki varyant da HTML'de duruyor çünkü bu bir
   tasarım demosu. Gerçek uygulamada sunucu yalnızca yetkiye uygun
   varyantı render etmeli; gizlenen veri DOM'a HİÇ girmemeli.
   CSS ile gizlemek güvenlik değildir — kaynak koddan okunur.
   (teknik plan 7.4 · IContactVisibilityService)
   ============================================================ */
[data-view="guest"]  [data-view="member"],
[data-view="member"] [data-view="guest"]{display:none !important}

/* --- maskelenmiş firma --- */
.tmono-lock{background:linear-gradient(150deg,#AEB9CA,#8794A8) !important;color:#fff}
/* Logosunu yükleyen firmada rozet logoyu gösterir (2026-08-20). !important,
   .tmono-lock'takiyle aynı sebeple: zemin .tcard[data-tone] .tmono kuralından
   geliyor ve tek sınıf onu yenemiyor. */
.tmono-logo{background:#fff !important;border:1px solid var(--line-2)}
.tmono img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block}
.tfirm-masked{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.mask-bar{display:block;width:112px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,#DFE5EE 0%, #EDF1F7 45%, #DFE5EE 100%);
  background-size:220% 100%;animation:maskShift 2.6s ease-in-out infinite}
@keyframes maskShift{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.mask-bar{animation:none}}
.mask-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:#8A94A6;text-transform:none}
.mask-tag svg{opacity:.85}

.btn-offer-locked{background:#F3F5F9;border-color:var(--line);color:var(--ink-2);
  text-decoration:none;gap:6px}
.btn-offer-locked:hover{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 4px 12px rgba(27,95,235,.26)}

/* --- bölüm başlığındaki durum rozeti --- */
.talep-hd-right{display:flex;align-items:center;gap:14px;flex:none}
.viewstate{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  box-shadow:var(--sh-sm);white-space:nowrap}
.viewstate b{color:var(--ink);font-weight:700}
.viewstate-dot{width:7px;height:7px;border-radius:50%;background:#94A2B8;flex:none}
[data-view="member"] .viewstate-dot{background:#12A150}

/* ============================================================
   DEMO ÇUBUĞU — üretime alınmayacak
   ============================================================ */
.demo-bar{position:fixed;right:20px;bottom:20px;z-index:200;transition:opacity .18s;
  display:flex;align-items:center;gap:12px;
  background:#0E1930;color:#D5DEEC;border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:9px 10px 9px 15px;
  box-shadow:0 12px 34px rgba(9,18,38,.34)}
.demo-bar[hidden]{display:none}
.demo-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7E8DA9}
.demo-seg{display:flex;background:rgba(255,255,255,.07);border-radius:9px;padding:3px;gap:2px}
.demo-btn{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:600;color:#AFBCD2;padding:7px 15px;border-radius:7px;transition:background .15s,color .15s}
.demo-btn:hover{color:#fff}
.demo-btn.is-on{background:#fff;color:#0E1930}
.demo-close{border:0;background:transparent;color:#6F7E9A;cursor:pointer;padding:6px;
  border-radius:7px;display:grid;place-items:center}
.demo-close:hover{background:rgba(255,255,255,.08);color:#fff}

@media(max-width:680px){
  .demo-bar{right:12px;left:12px;bottom:12px;justify-content:space-between;padding:8px 8px 8px 13px}
  .demo-label{display:none}
  .demo-seg{flex:1}
  .demo-btn{flex:1;text-align:center}
  .talep-hd-right{flex-direction:column;align-items:flex-start;gap:11px;width:100%}
  .talep-hd-right .btn{width:100%}
}

/* ============================================================
   İLAN KARTI ŞERİDİ — görünen kart sayısı
   Tek yerde toplandı; media query'ler geniş → dar sırada olmalı,
   yoksa sonraki kural öncekini ezer.
   ============================================================ */
.cols-single .pcard{flex-basis:calc((100% - 7*14px)/8)}          /* 8 kart */
@media(max-width:1360px){ .cols-single .pcard{flex-basis:calc((100% - 6*14px)/7)} }   /* 7 */
@media(max-width:1200px){ .cols-single .pcard{flex-basis:calc((100% - 5*14px)/6)} }   /* 6 */
@media(max-width:1040px){ .cols-single .pcard{flex-basis:calc((100% - 4*14px)/5)} }   /* 5 */
@media(max-width:880px){  .cols-single .pcard{flex-basis:calc((100% - 3*14px)/4)} }   /* 4 */
@media(max-width:680px){  .cols-single .pcard{flex-basis:calc((100% - 2*14px)/3)} }   /* 3 */
@media(max-width:520px){  .cols-single .pcard{flex-basis:calc((100% - 1.5*14px)/2.5)} } /* 2,5 — kaydırma ipucu */

/* ============================================================
   ÜST MENÜ — daralma davranışı
   "Talepler" eklendikten sonra 5 öğe var; dar ekranlarda
   önce boşluklar, sonra ikonlar kalkar, en son menü gizlenir.
   ============================================================ */
nav.main a{white-space:nowrap}
@media(max-width:1300px){
  nav.main{gap:24px;margin-left:40px}
}
@media(max-width:1140px){
  nav.main{gap:20px;margin-left:28px}
  nav.main a svg{display:none}      /* metin kalsın, ikonlar gitsin */
  .hdr-right{gap:16px}
}

/* ============================================================
   MOBİL VE TABLET DÜZELTMELERİ
   ============================================================ */

/* Buton etiketi: geniş ekranda uzun, dar ekranda kısa */
.lbl-short{display:none}

/* --- Hero yığıldığında harita gizlenir ---
   980px altında hero tek sütuna düşüyor ve harita metnin üstüne geçip
   arama çubuğunu ekranın çok aşağısına itiyordu. Harita yalnızca
   yan yana düzende gösterilir. Ayrıca ~200 KB indirme tasarrufu. */
@media(max-width:980px){
  .hero-art{display:none}
  .hero-grid{grid-template-columns:1fr;padding-top:22px;min-height:0;gap:0}
  .hero{padding-bottom:4px}

  /* Dokunmatik hedefler en az 40px (tablet dahil) */
  .logo{height:40px}
  .foot-col a,.foot-legal a,.foot-credit a,.pop a,.panel-hd a,.more,
  .fline,.link-login{min-height:40px;display:inline-flex;align-items:center}
  .nav-btn{width:40px;height:40px}
  .demo-btn{min-height:40px}
  .demo-close{min-width:40px;min-height:40px}
}

@media(max-width:680px){
  .viewstate{white-space:normal;line-height:1.4}
  .talep-hd-right{width:100%}
  /* mobilde header butonu kısa etiket: "Üye Ol" (uzun metin taşıyordu) */
  .lbl-long{display:none}
  .lbl-short{display:inline}
}

/* --- Çok dar ekranlar (≤400px) --- */
@media(max-width:400px){
  .lbl-long{display:none}
  .lbl-short{display:inline}
  .hdr{height:72px}
  .logo img{height:27px}
  .btn-primary{padding:11px 18px;font-size:14.5px}
  .hdr-right{gap:12px}
  .viewstate{font-size:11.5px;padding:7px 11px}
  .viewstate [data-viewstate-note]{display:none}
}

/* --- Dokunmatik cihazlar (genişlikten bağımsız) ---
   Yatay tabletler 980px'den geniş ama yine de parmakla kullanılıyor.
   Hedef boyutu ekran genişliğine değil, giriş türüne bağlanır. */
@media (hover:none) and (pointer:coarse){
  .logo{height:40px}
  .foot-col a,.foot-legal a,.foot-credit a,.pop a,.panel-hd a,.more,
  .fline,.link-login,.combo-opt,.chip,nav.main a{min-height:40px;display:inline-flex;align-items:center}
  .acc-btn{min-height:40px}
  /* Genel bağlantı kuralı 34×34 ikon kutularını 34×40'a bozuyordu */
  .foot-social a{width:40px;height:40px;min-height:40px;display:grid;place-items:center}
  .combo-opt{display:flex}
  .nav-btn{width:40px;height:40px}
  .demo-btn{min-height:40px}
  .demo-close{min-width:40px;min-height:40px}
  .tab{min-height:48px}
}

/* ============================================================
   MOBİL REVİZYONLARI — Tur 2
   ============================================================ */
@media(max-width:680px){

  /* --- 1) Üye Ol butonu: daha zarif --- */
  .hdr-right .btn-primary{padding:10px 16px;font-size:13.5px;border-radius:10px;
    letter-spacing:.01em;box-shadow:0 3px 8px rgba(27,95,235,.22)}
  .hdr-right{gap:14px}
  .link-login{font-size:14px}

  /* --- 3) Popüler aramalar: tek satır, yatay kaydırma --- */
  .pop{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:14px;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
            mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .pop::-webkit-scrollbar{display:none}
  .pop .lbl,.pop a{flex:none}

  /* --- 4) İstatistikler: 2×2 --- */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:15px 14px;gap:10px;border-right:0;border-bottom:0}
  .stat:nth-child(odd){border-right:1px solid var(--line-2)}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .stat .ic svg{width:24px;height:24px}
  .stat b{font-size:19px}
  .stat small{font-size:11.5px}

  /* --- 5) Ürün şeridi: oklar görünür --- */
  .cols-single .panel{padding:15px 14px 18px}
  .cols-single .nav-btn{display:grid;left:4px;background:rgba(255,255,255,.94);
    box-shadow:0 3px 10px rgba(16,36,73,.2)}
  .cols-single .nav-btn.next{left:auto;right:4px}
  .cols-single .nav-btn:disabled{opacity:0;pointer-events:none}

  /* --- 6) Talepler: tek kartlık kaydırmalı şerit --- */
  .talep-wrap{position:relative}
  .talep-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding:2px 2px 6px;margin:0}
  .talep-grid::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 88%;scroll-snap-align:center}
  .talep-wrap .nav-btn{display:grid;top:50%;background:rgba(255,255,255,.94);
    box-shadow:0 3px 10px rgba(16,36,73,.2)}
  .talep-wrap .talep-prev{left:-6px}
  .talep-wrap .talep-next{right:-6px}
  .talep-wrap .nav-btn:disabled{opacity:0;pointer-events:none}

  /* --- 7) Footer akordeonu --- */
  .site-footer{padding-top:34px}
  .foot-top{gap:0;padding-bottom:0}
  .foot-brand{margin-bottom:18px}
  .foot-col h3{margin:0}
  .foot-top .foot-col,.foot-legal{border-top:1px solid rgba(255,255,255,.09);gap:0}
  .acc-btn{cursor:pointer;width:100%;justify-content:space-between;min-height:50px}
  .acc-btn svg{display:block;flex:none;opacity:.6;transition:transform .2s}
  .foot-col.is-open .acc-btn svg{transform:rotate(180deg);opacity:1}
  .foot-col .acc-panel{display:none;padding:2px 0 14px;gap:4px}
  .foot-col.is-open .acc-panel{display:flex;flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.acc-btn svg{transition:none}}


/* ============================================================
   HAMBURGER MENÜ — ≤980px'de nav.main drawer olarak açılır
   (markup çiftlenmez; aynı nav yeniden konumlanır)
   ============================================================ */
.hamburger{display:none;flex:none;width:42px;height:42px;border:0;background:transparent;
  cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamburger:hover{background:#EFF3FA}
.hb-line{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .22s, opacity .18s}
body.nav-open .hamburger .hb-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .hamburger .hb-line:nth-child(2){opacity:0}
body.nav-open .hamburger .hb-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* z-index 40: .site-header (50) ve içindeki drawer'ın ALTINDA kalmalı.
   Perde 60 iken, nav header'ın yığın bağlamında olduğu için (header:50)
   nav'ın kendi z-index:70'i perdeyi geçemiyor ve tıklamaları engelliyordu. */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(14,21,38,.42);z-index:40}
body.nav-open .nav-backdrop{display:block}

@media(max-width:980px){
  .hamburger{display:flex}
  /* nav.main tabanda display:none idi; drawer olarak geri gelir */
  body.nav-open nav.main{display:flex;position:fixed;left:0;right:0;top:var(--hdr-h,84px);
    z-index:70;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px rgba(14,21,38,.18);padding:8px 14px 14px;
    animation:navIn .18s ease}
  body.nav-open nav.main a{display:flex;min-height:50px;padding:0 10px;border-radius:10px;
    font-size:15.5px}
  body.nav-open nav.main a:hover{background:var(--blue-soft)}
  body.nav-open nav.main a svg{display:block}
  body.nav-open{overflow:hidden}
}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.nav-open nav.main{animation:none}}
@media(max-width:400px){:root{--hdr-h:72px}}
@media(min-width:401px){:root{--hdr-h:84px}}

/* ============================================================
   ARAMA ÖNERİ DROPDOWN'I
   Girişe yazarken eşleşen ürünler (fotoğraf + ad + şehir) ve
   ardından eşleşen kategoriler listelenir.
   ============================================================ */
.sb-input{position:relative}
.search-suggest{position:absolute;top:calc(100% + 14px);left:-22px;right:-22px;z-index:75;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 48px rgba(16,36,73,.18), 0 3px 8px rgba(16,36,73,.06);
  overflow:hidden;display:none;max-height:min(60vh,440px);overflow-y:auto;overscroll-behavior:contain}
.search-suggest.open{display:block;animation:ssIn .16s cubic-bezier(.2,.7,.3,1)}
@keyframes ssIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.search-suggest.open{animation:none}}
.search-suggest::-webkit-scrollbar{width:10px}
.search-suggest::-webkit-scrollbar-thumb{background:#DCE3EE;border-radius:9px;border:3px solid #fff}

.ss-group{padding:6px}
.ss-group + .ss-group{border-top:1px solid var(--line-2)}
.ss-head{display:flex;align-items:center;gap:8px;padding:9px 12px 6px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.ss-head .ss-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--ink-3);
  background:#F2F5FA;border-radius:20px;padding:2px 8px;letter-spacing:0}

/* ürün önerisi */
.ss-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:0;
  background:transparent;cursor:pointer;font-family:inherit;padding:9px 12px;border-radius:10px;
  transition:background .13s}
.ss-item:hover,.ss-item[data-active]{background:var(--blue-soft)}
.ss-thumb{flex:none;width:44px;height:44px;border-radius:9px;overflow:hidden;
  background:linear-gradient(150deg,#DDE3EC,#B7C0CD);position:relative}
.ss-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;display:block}
.ss-body{min-width:0;flex:1}
.ss-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-name mark{background:#FFEFB8;color:inherit;border-radius:3px;padding:0 1px}
.ss-city{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-3);margin-top:2px}
.ss-arrow{flex:none;color:var(--ink-3);opacity:0;transition:opacity .13s,transform .13s}
.ss-item:hover .ss-arrow,.ss-item[data-active] .ss-arrow{opacity:1;transform:translateX(2px)}

/* kategori önerisi */
.ss-cat{display:flex;align-items:center;gap:11px;width:100%;text-align:left;border:0;
  background:transparent;cursor:pointer;font-family:inherit;padding:10px 12px;border-radius:10px;
  font-size:14px;color:var(--ink);transition:background .13s}
.ss-cat:hover,.ss-cat[data-active]{background:var(--blue-soft)}
.ss-cat-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue)}
.ss-cat mark{background:#FFEFB8;color:inherit;border-radius:3px;padding:0 1px}
.ss-cat .ss-cat-path{font-size:11.5px;color:var(--ink-3);margin-top:1px}

.ss-empty{padding:26px 18px;text-align:center;font-size:14px;color:var(--ink-2);line-height:1.6}
.ss-empty strong{color:var(--ink)}
.ss-empty span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}

/* 2026-10-04: mobilde de öneri listesi arama çubuğunun altına bağlı
   (bottom sheet kaldırıldı — gerekçe yukarıda, .combo notu). Konum kabı
   .sb-input değil .searchbar'ın kendisi: liste çubuğun TAM genişliğinde ve
   "Ara" düğmesinin altında açılır (liste sayfasında giriş kutusu düğmeyle
   yan yana olduğu için kutu genişliği 253px kalıyordu; ana sayfada liste
   düğmenin üstüne biniyordu). */
@media(max-width:680px){
  .searchbar .sb-input{position:static}
  .search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;bottom:auto;
    max-height:min(55vh,440px);z-index:75}
  body[data-search-open] .demo-bar{opacity:0;pointer-events:none}
}

/* ==========================================================
   ARAMA SONUÇLARI / İLAN LİSTESİ  (arama.html)
   Sınıf öneki: .sres- (sonuç), .fp- (filtre paneli), .r- (sonuç kartı)
   ========================================================== */

/* premium = altın. Bu üç değişken premium dışında hiçbir yerde kullanılmaz. */
:root{
  --gold:#B8860B; --gold-2:#8A6508; --gold-soft:#FCF6E6; --gold-ink:#9C7009;
  --gold-line:#E8CE86;
}

/* elmas = Kurumsal paket rozeti (2026-10-02 müşteri kararı). Arz mavisinden
   (#1B5FEB) BİLEREK ayrı ton: arz=mavi anlamı (sabit karar #6) karışmasın.
   Yalnızca .rrozet-elmas ve .is-kurumsal kullanır. */
:root{
  --elmas:#2F80ED; --elmas-soft:#EEF5FE; --elmas-line:#BCD4F5;
}

/* ---------- üst arama şeridi ---------- */
.sres-bar{background:#FBFCFE;border-bottom:1px solid var(--line);padding:16px 0 22px}
/* arama sayfası: header + arama çubuğu üstte sabit kalır (mockup).
   header zaten sticky top:0; arama barını onun hemen altına yapıştırıyoruz.
   Böylece scroll'da ikisi de görünür kalır, filtre ve sonuçlar altında kayar. */
body.sayfa-arama .site-header{position:sticky;top:0;z-index:52;box-shadow:0 1px 0 var(--line)}
body.sayfa-arama .sres-bar{position:sticky;top:var(--hdr-h);z-index:51;padding:14px 0 16px;
  box-shadow:var(--sh-sm)}
/* arama çubuğu, sol filtre sütununun ÜZERİNDEN başlamaz; sonuç alanı hizasında
   başlar (mockup). Sol boşluk = .wrap taban padding (64px) + filtre sütunu + grid boşluğu. */
@media(min-width:981px){
  body.sayfa-arama .sres-bar .wrap{padding-left:calc(64px + 276px + 22px)}
}
body[data-tip="talep"] body[data-tip="talep"] .searchbar-c{margin-top:12px;padding:7px 7px 7px 6px;border-radius:16px;box-shadow:var(--sh-sm)}
.searchbar-c .sb-input{flex:1}
.searchbar-c .btn-primary{padding:11px 30px}
.nav.main .is-current,nav.main a.is-current{color:var(--blue);font-weight:600}

/* ---------- başlık + kırıntı ---------- */
.sres-head{padding-top:20px}
.crumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.crumbs a:hover{color:var(--blue)}
.crumb-sep{opacity:.5}
.sres-h1{margin:8px 0 0;font-size:26px;font-weight:800;letter-spacing:-.02em}

/* ---------- yerleşim ---------- */
/* ⚠️ Tasarımdan sapma: referansta filtre sütunu 276px. 330px'e çıkarıldı
   (müşteri kararı 2026-08-08) — alt kategorilerin sağına ilan sayısı eklendi
   ve uzun kategori adları 276px'te sayacın altında kalıyordu. */
.sres-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;
  align-items:start;padding-top:22px;padding-bottom:56px}
.sres-main{min-width:0}

/* ---------- filtre paneli ---------- */
/* Panel scroll ETMEZ: açılan öğeler paneli aşağı uzatır (kullanıcı isteği).
   sticky top, sabit header + arama çubuğunun toplam yüksekliğinin altında. */
.fpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);position:sticky;top:calc(var(--hdr-h) + 78px);
  display:flex;flex-direction:column;
  /* panel viewport'tan uzunsa kendi içinde kayar; sonuna gelince sayfa kaymaya
     devam etsin diye overscroll-behavior AUTO (contain değil) */
  max-height:calc(100vh - var(--hdr-h) - 96px);overflow-y:auto;overscroll-behavior:auto}
.fp-hd{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--line-2)}
.fp-title{font-size:15px;font-weight:700}
.fp-clear{margin-left:auto;border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--blue);padding:6px 8px;border-radius:8px}
.fp-clear:hover{background:var(--blue-soft)}
.fp-close{display:none}
.fp-body{padding:4px 17px 14px}
.fp-foot{display:none}

.fgroup{border-bottom:1px solid var(--line-2);padding:2px 0}
.fgroup:last-child{border-bottom:0}
.fgroup h3{margin:0;font-size:14px}
.fg-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--ink);padding:14px 0;text-align:left}
.fg-btn svg{opacity:.55;transition:transform .18s}
.fgroup.is-open .fg-btn svg{transform:rotate(180deg)}
.fg-body{display:none;padding-bottom:12px}
.fgroup.is-open .fg-body{display:block}

.fopt{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;
  color:#3D4A61;cursor:pointer;line-height:1.35}
.fopt:hover{color:var(--ink)}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fbox{flex:none;width:18px;height:18px;border-radius:50%;border:1.6px solid #C7D0DE;
  background:#fff;position:relative;transition:border-color .14s,background .14s}
.fbox-sq{border-radius:5px}
.fopt input:checked + .fbox{border-color:var(--blue);background:var(--blue)}
.fopt input:checked + .fbox::after{content:"";position:absolute;inset:0;
  background:no-repeat center/10px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' stroke='%23fff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.fopt input:focus-visible + .fbox{box-shadow:0 0 0 3px rgba(27,95,235,.25)}
.fp-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}

/* ikonlu filtre seçeneği (mockup: sağda ikon) */
.fopt-ic{gap:11px}
.fopt-ic .fopt-txt{flex:1;min-width:0}
.fopt-icn{flex:none;opacity:.9}
.fi-blue{color:var(--blue)}
.fi-gold{color:var(--gold)}
.fi-gray{color:var(--ink-3)}

/* filtreleri temizle satırı */
.fp-clear-row{padding:6px 17px 16px}
.fp-clear-row:empty{padding:0}
.fp-clear-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:1px solid var(--line);background:#fff;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:650;color:var(--blue);padding:12px;
  transition:all .14s}
.fp-clear-btn:hover{background:var(--blue-soft);border-color:#C9DAF7}
.fp-clear-btn svg{flex:none}

.fp-combo{width:100%}
.fp-combo .sb-trigger{width:100%;justify-content:flex-start;background:#F7F9FD;
  border:1px solid var(--line);padding:11px 13px}
.fp-combo .sb-trigger .chev{margin-left:auto}
.fp-combo .sb-label{max-width:none;flex:1}

/* Filtre panelindeki Combo, üste taşan bir katman DEĞİL, akış içinde açılan bir
   bloktur. Sebep: .fp-body'de dikey kaydırma var; mutlak konumlu panel hem
   sütun genişliğini aşıyor hem de kaydırma kutusu tarafından kırpılıyordu.
   (Aynı aile: .hero üzerindeki overflow:hidden'ın dropdown'ı kırpması.)
   Akış içinde açılınca grup yüksekliği artar ve panel doğal olarak kayar. */
.fpanel .fp-combo .combo{position:static;width:100%;margin-top:8px;box-shadow:none;
  border:1px solid var(--line);border-radius:12px;max-height:none}
/* filtre panelinde liste scroll ETMEZ: açılan kategoriler/iller alt alta uzar
   (kullanıcı isteği). Combo'nun kendi arama kutusu aramayı zaten daraltır. */
.fpanel .fp-combo .combo-list{max-height:none}
.fpanel .fp-combo .combo-search{padding:11px 13px}

.fp-backdrop{display:none}

/* ---------- sonuç üst çubuğu ---------- */
.sres-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.sres-count{font-size:14px;color:var(--ink-2)}
.sres-count strong{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.sres-tools{margin-left:auto;display:flex;align-items:center;gap:8px}

.sortdd{position:relative}
.sort-btn{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  padding:9px 13px;box-shadow:var(--sh-sm)}
.sort-btn:hover{border-color:#D8E1F0}
.sort-btn svg:first-child{opacity:.55}
.sort-btn .chev{opacity:.5;transition:transform .18s}
.sortdd.is-open .sort-btn .chev{transform:rotate(180deg)}
.sort-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  min-width:212px;background:#fff;border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--sh-md);padding:6px}
.sortdd.is-open .sort-menu{display:block}
.sort-opt{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--ink);padding:10px 12px;border-radius:9px}
.sort-opt:hover{background:var(--blue-soft)}
.sort-opt.is-on{color:var(--blue);font-weight:600}

.vtog{display:flex;gap:2px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:3px;box-shadow:var(--sh-sm)}
.vtog-btn{display:grid;place-items:center;width:34px;height:32px;border:0;background:transparent;
  cursor:pointer;color:var(--ink-3);border-radius:8px}
.vtog-btn:hover{color:var(--ink)}
.vtog-btn[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue)}

/* ---------- uygulanan filtre rozetleri ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chips:empty{margin-bottom:0}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--blue-soft);color:var(--blue);
  border:1px solid #D9E5FD;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;padding:6px 11px}
.chip:hover{background:#E2ECFE}
.chip svg{opacity:.75}
.chip-clear{background:transparent;border:0;cursor:pointer;font-family:inherit;font-size:12.5px;
  font-weight:600;color:var(--ink-3);padding:6px 8px;border-radius:8px}
.chip-clear:hover{color:var(--ink);background:var(--line-2)}

/* ---------- öne çıkanlar (ayrı blok, altın) ---------- */
.spot{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:var(--r);
  padding:15px 15px 17px;margin-bottom:18px}
.spot-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.spot-hd h2{margin:0;font-size:15.5px;font-weight:700;color:var(--gold-2)}
.spot-tag{font-size:11.5px;font-weight:600;color:var(--gold);opacity:.9}

/* ---------- sonuç ızgarası ---------- */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rgrid[data-tip="talep"]{grid-template-columns:repeat(4,1fr)}

.rcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .16s,transform .16s,border-color .16s}
.rcard:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:#DEE6F4}
.rcard.is-premium{border-color:var(--gold-line);box-shadow:0 0 0 1px var(--gold-line),var(--sh-sm)}
/* Kurumsal paket (elmas rozet) — açık mavi çerçeve; is-premium'un eşi. */
.rcard.is-kurumsal{border-color:var(--elmas-line);box-shadow:0 0 0 1px var(--elmas-line),var(--sh-sm)}

/* overflow:hidden iki iş birden yapar: (1) görseli yuvarlatılmış kutuya kırpar,
   (2) .rcard bir flex sütunu olduğu için .rthumb'ın min-height:auto değerini
   0'a çeker. İkincisi olmadan dik bir görsel (ör. 300x2400) kendi boyuyla
   kartı uzatıyor, aspect-ratio eziliyor ve ızgaradaki kart listeyi bozuyordu.
   Liste düzeni kuralında (aşağıda) overflow zaten vardı; ızgarada eksikti. */
.rthumb{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  background:#F7F8FA}   /* kare + çerçeve rengi (müşteri, 2026-10-04); önce 4/3 ve degrade */
.rthumb img{position:absolute;inset:0;width:100%;height:100%;padding:5px;box-sizing:border-box;
  object-fit:contain;object-position:center;display:block}   /* kart: kırpılmaz, ortalı (yukarıdaki not) */
.rprem{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:4px;
  background:#fff;color:var(--gold-2);border:1px solid var(--gold-line);border-radius:999px;
  font-size:10.5px;font-weight:700;padding:4px 9px;letter-spacing:.01em;box-shadow:var(--sh-sm)}
.rprem-inline{position:static;align-self:flex-start;margin-bottom:8px}

/* Paket rozeti (_PaketRozeti.cshtml, 2026-10-02) — "★ Premium" yazısının
   yerini aldı. Görselin sol üst köşesinde yuvarlak köşeli kutu içinde ikon:
   yıldız (Profesyonel, altın) / elmas (Kurumsal, elmas mavisi). */
.rrozet{position:absolute;left:10px;top:10px;z-index:2;width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;background:#fff;box-shadow:0 2px 8px rgba(16,36,73,.16)}
.rrozet svg{width:19px;height:19px;display:block}
.rrozet-yildiz{color:var(--gold);background:var(--gold-soft);
  box-shadow:0 0 0 1px var(--gold-line),0 2px 8px rgba(16,36,73,.14)}
.rrozet-elmas{color:var(--elmas);background:#fff;
  box-shadow:0 0 0 1px var(--elmas-line),0 2px 8px rgba(16,36,73,.14)}
/* Metin satırında (talep kartı, ürün detayı). */
.rrozet-satir{position:static;display:inline-grid;vertical-align:middle;width:26px;height:26px;
  border-radius:8px;flex:none}
.rrozet-satir svg{width:15px;height:15px}
.rcard-talep .rrozet-satir{align-self:flex-start;margin-bottom:8px}
.d-line .rrozet-satir{margin-left:10px}
/* Ana sayfa şerit kartı daha küçük: rozet de küçülür.
   isolation ŞART: .pthumb kendi katman grubunu (stacking context) kurmazsa
   rozetin z-index'i sayfa seviyesine taşar ve arama öneri listesinin
   (.search-suggest, .hero .wrap'in z-index:1 grubunda) ÜSTÜNE çıkar —
   2026-10-04'te canlıda görüldü. .rthumb'da bu sorun yok: kendi z-index'i
   zaten bir grup kuruyor. */
.pthumb{position:relative;isolation:isolate}
.pthumb .rrozet{left:7px;top:7px;width:26px;height:26px;border-radius:8px}
.pthumb .rrozet svg{width:15px;height:15px}
/* 2026-10-04 müşteri kararı: kart rozeti küçüldü — masaüstü 28px (yukarıda),
   mobil 24px kutu + 16px ikon. Satır içi rozet (.rrozet-satir: talep kartı,
   detay, paketler) bundan etkilenmez. */
@media(max-width:680px){
  .rrozet:not(.rrozet-satir),.pthumb .rrozet{width:24px;height:24px;border-radius:7px}
  .rrozet:not(.rrozet-satir) svg,.pthumb .rrozet svg{width:16px;height:16px}
}
/* favori: görselin sağ üstünde beyaz daire (mockup) */
.rfav-wrap{position:absolute;right:10px;top:10px;z-index:3}
.rfav{width:34px;height:34px;display:grid;place-items:center;border:0;
  background:rgba(255,255,255,.94);border-radius:50%;cursor:pointer;color:#8A94A6;
  box-shadow:var(--sh-sm);transition:color .14s}
.rfav:hover{color:#C2255C}

.rbody{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1;min-width:0}
.rl-main{display:flex;flex-direction:column;min-width:0}
.rtitle{display:block;font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* 2026-10-04 müşteri kararı: başlık için SABİT 2 satırlık alan (2 × 1.3 =
     2.6em; em olduğu için mobildeki 14px'te de doğru). Tek satırlık başlıkta
     kategori/il/tarih/firma satırları komşu kartlara göre yukarı kayıyordu.
     2 satırı aşan başlık line-clamp ile "…" ile biter. Liste görünümünde
     (tek sütun) sıfırlanır — aşağıda. */
  min-height:2.6em}
.rtitle:hover{color:var(--blue)}
/* Başlık bağlantısı kartın tamamına yayılır: dokunma hedefi kart boyutundadır.
   Kart içindeki diğer tıklanabilir öğeler bunun üstünde kalmalıdır (z-index:2). */
.rtitle::after{content:"";position:absolute;inset:0;z-index:1}
.rthumb,.rfoot,.rflag,.rfav-wrap{position:relative;z-index:2}
/* 2026-10-04: kategori TEK satır + "…" (tam adı title ipucunda). Dar kartta
   "Çimento, Beton ve Harç Ürünleri" iki satıra inip alttaki satırları
   komşu kartlara göre kaydırıyordu — başlığın 2 satır sabitlenmesiyle aynı dert. */
.rcat{font-size:12px;color:var(--ink-3);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;
  color:var(--ink-2);margin-top:9px}
.rqty,.rcity,.rdate{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}
.rqty svg,.rcity svg{opacity:.6;flex:none}
.rqty{font-weight:600}
.rqty-big{font-size:14px;font-weight:700}
.rdate{color:var(--ink-3)}
/* fiyat: yeşil (mockup) */
.rprice{margin-top:11px;font-size:16px;font-weight:800;color:#12934A;
  font-variant-numeric:tabular-nums;line-height:1.2}
.rprice small{display:block;font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.01em;margin-top:1px}
.rprice-none{font-size:14px;font-weight:700;color:var(--ink-2)}

/* footer: firma solda, ok butonu sağda (mockup) */
/* 2026-10-04: ızgara görünümünde alt bölüm (firma + ok) kartın DİBİNE sabit —
   yan yana kartlarda üstteki içerik ne olursa olsun aynı hizada durur.
   margin-top:auto yerine esneyen boşluk öğesi (::after, order ile .rfoot'tan
   önce): en az 12px (mobil 9px) aralığı korur; auto'da en uzun kartta sıfırlanırdı.
   Liste görünümü (.rbody grid) hariç. */
.rgrid:not([data-layout="list"]) .rbody::after{content:"";order:1;flex:1 0 12px}
.rgrid:not([data-layout="list"]) .rfoot{order:2;margin-top:0}
.rfoot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line-2)}
.rfirm{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.rmono{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:#fff;background:#8B96A6}
.rmono[data-tone="a"]{background:#2F6BE0}.rmono[data-tone="b"]{background:#12A150}
.rmono[data-tone="c"]{background:#B4690E}.rmono[data-tone="d"]{background:#7E22CE}
.rmono[data-tone="e"]{background:#C2255C}.rmono[data-tone="f"]{background:#0B7285}
.rmono-lock{background:#EDF1F7;color:#98A2B3}
/* Logosunu yükleyen firmada rozet logoyu gösterir (2026-08-20). Zemin beyaz:
   logolar saydam ya da beyaz zeminli geliyor, ton rengi üstünde kirli durur.
   contain, kırpmak yerine sığdırır — kare olmayan logo bozulmasın. */
.rmono-logo{background:#fff;border:1px solid var(--line-2)}
.rmono img{width:100%;height:100%;object-fit:contain;border-radius:7px;display:block}
.rfirm-name{font-size:13px;font-weight:600;color:#3D4A61;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
.rfirm .tfirm-masked{gap:3px}
.rfirm .mask-bar{width:96px;height:8px}
/* ok butonu */
.rgo{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);
  background:#fff;border-radius:9px;color:var(--blue);transition:all .14s}
.rgo:hover{background:var(--blue-soft);border-color:#C9DAF7}

/* talep kartı (mor taraf)
   Şerit kenarlıkla değil ::before ile çizilir: premium kartlarda
   .rcard.is-premium (0,2,0) özgüllüğü .rcard-talep'i (0,1,0) eziyor,
   mor şerit altına dönüşüyordu. */
.rcard-talep::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--purple);z-index:2}
.rflag{align-self:flex-start;background:var(--purple-soft);color:var(--purple);
  border:1px solid var(--purple-line);border-radius:999px;font-size:10.5px;font-weight:700;
  padding:4px 9px;margin-bottom:9px}
.rcard-talep .btn-offer{width:100%}

/* talep kartı LİSTE görünümü: görsel yok, arz'ın grid düzeni uymaz.
   .rbody dikey akışta kalır; premium üstte, başlık, kategori, meta,
   firma ve teklif butonu alt alta. Kart tam genişlik tek sütun. */
.rgrid[data-layout="list"] .rcard-talep{display:block;padding:16px 20px 16px 22px}
.rgrid[data-layout="list"] .rcard-talep .rbody{display:flex;flex-direction:column;
  gap:0;padding:0}
.rgrid[data-layout="list"] .rcard-talep .rprem-inline,
.rgrid[data-layout="list"] .rcard-talep .rrozet-satir{margin-bottom:8px}
.rgrid[data-layout="list"] .rcard-talep .rtitle{font-size:16px;-webkit-line-clamp:2}
.rgrid[data-layout="list"] .rcard-talep .rmeta{margin-top:9px}
.rgrid[data-layout="list"] .rcard-talep .rfirm{margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line-2)}
.rgrid[data-layout="list"] .rcard-talep .rfoot{margin-top:11px;max-width:260px}

/* liste görünümü (mockup 3): görsel · bilgi · fiyat · firma+ok
   Kart DOM'u grid görünümüyle aynı. Liste'de .rcard yatay flex olur;
   .rbody içindeki başlık/kategori/meta solda kalır, fiyat ve footer
   .rbody'den çıkıp sağa yaslanır (flex order + margin ile). */
.rgrid[data-layout="list"]{grid-template-columns:1fr;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-sm);overflow:hidden}
.rgrid[data-layout="list"] .rcard{flex-direction:row;align-items:center;gap:18px;
  border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line-2);padding:14px 18px}
.rgrid[data-layout="list"] .rcard:last-child{border-bottom:0}
.rgrid[data-layout="list"] .rcard:hover{transform:none;box-shadow:none;background:#FAFBFD}
.rgrid[data-layout="list"] .rcard.is-premium,
.rgrid[data-layout="list"] .rcard.is-kurumsal{box-shadow:none;border-bottom:1px solid var(--line-2)}
.rgrid[data-layout="list"] .rthumb{flex:none;width:150px;aspect-ratio:1/1;border-radius:11px;overflow:hidden}
.rgrid[data-layout="list"] .rfav-wrap{display:none}
/* body: sol bilgi + sağ blok (fiyat üstte, firma altta) — mockup düzeni.
   .rl-main sol sütunda esner; .rprice ve .rfoot sağ sütunda alt alta hizalanır. */
.rgrid[data-layout="list"] .rbody{flex:1;display:grid;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:center;column-gap:22px;row-gap:6px;padding:0;min-width:0}
.rgrid[data-layout="list"] .rtitle{font-size:16px;-webkit-line-clamp:1;min-height:0}
/* sol bilgi bloğu iki satırı kaplar */
.rgrid[data-layout="list"] .rl-main{grid-column:1;grid-row:1 / span 2;
  min-width:0;display:flex;flex-direction:column;align-self:center}
.rgrid[data-layout="list"] .rmeta{margin-top:9px}
/* sağ blok: fiyat üstte, firma altta */
.rgrid[data-layout="list"] .rprice{grid-column:2;grid-row:1;margin-top:0;
  text-align:right;justify-self:end;align-self:end}
.rgrid[data-layout="list"] .rfoot{grid-column:2;grid-row:2;margin-top:0;padding-top:0;
  border-top:0;width:auto;gap:12px;justify-self:end;align-self:start}
.rgrid[data-layout="list"] .rfirm{flex:none;max-width:220px}
@media(max-width:900px){
  .rgrid[data-layout="list"] .rbody{grid-template-columns:1fr;grid-template-rows:auto;gap:10px}
  .rgrid[data-layout="list"] .rl-main{grid-column:1;grid-row:auto}
  .rgrid[data-layout="list"] .rprice{grid-column:1;grid-row:auto;text-align:left;justify-self:start}
  .rgrid[data-layout="list"] .rfoot{grid-column:1;grid-row:auto;justify-self:start}
}

/* ---------- boş sonuç ---------- */
.sres-empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:46px 26px;text-align:center}
.empty-ic{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 14px;
  border-radius:50%;background:var(--blue-soft);color:var(--blue)}
.sres-empty h2{margin:0;font-size:19px;font-weight:750}
.sres-empty p{margin:9px auto 0;max-width:46ch;font-size:14px;line-height:1.6;color:var(--ink-2)}
.empty-act{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn-talep{background:linear-gradient(180deg,#9333EA 0%, var(--purple) 100%);
  box-shadow:0 4px 12px rgba(126,34,206,.26)}
.btn-talep:hover{background:linear-gradient(180deg,#8A2BDF 0%, var(--purple-dark) 100%);
  box-shadow:0 6px 16px rgba(126,34,206,.34)}
.empty-clear{padding:12px 22px;font-size:14px}

/* ---------- sayfalama ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:26px;flex-wrap:wrap}
.pager:empty{margin-top:0}
/* display/hizalama: tasarımda bu düğmeler <button>du (metni kendiliğinden
   ortalıyor); üretimde sayfa numaraları <a> — JS yoksa ve arama motorları
   için tek gezinme yolu o. Anchor bloklaşmadan yükseklik/ortalama tutmaz. */
.pg,.pg-nav{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);background:#fff;
  border-radius:10px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-2)}
.pg:hover,.pg-nav:hover{border-color:#CFDCF4;color:var(--ink)}
.pg.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.pg-nav[disabled]{opacity:.4;cursor:default}

/* ---------- mobil filtre çubuğu ---------- */
.fbar{display:none}
.fbar-btn{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:650;color:var(--ink);padding:10px 16px;box-shadow:var(--sh-sm)}
.fbar-sayi{color:var(--blue);font-weight:700}

/* ================= DUYARLI KURALLAR (geniş → dar) ================= */
@media(max-width:1140px){
  .sres-layout{grid-template-columns:246px minmax(0,1fr);gap:18px}
  .rgrid,.rgrid[data-tip="talep"]{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .sres-layout{grid-template-columns:1fr;padding-top:12px}
  /* filtre gizlenir; tablet genişliğinde 3 sütun rahat okunur */
  .rgrid,.rgrid[data-tip="talep"]{grid-template-columns:repeat(3,1fr)}

  /* filtre paneli çekmeceye dönüşür */
  .fpanel{position:fixed;top:0;left:0;bottom:0;width:min(370px,88vw);max-height:none;
    border-radius:0;border:0;z-index:130;transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.2,.7,.3,1);box-shadow:0 0 40px rgba(16,36,73,.18)}
  body.filtre-acik .fpanel{transform:translateX(0)}
  body.filtre-acik{overflow:hidden}
  .fp-hd{padding:16px 18px}
  .fp-close{display:grid;place-items:center;width:34px;height:34px;border:0;background:var(--line-2);
    border-radius:9px;cursor:pointer;color:var(--ink-2)}
  .fp-body{flex:1;padding:4px 18px 16px}
  .fp-foot{display:block;padding:12px 18px;border-top:1px solid var(--line-2);background:#fff}
  .fp-apply{width:100%;height:46px}
  .fp-backdrop{display:block;position:fixed;inset:0;z-index:120;background:rgba(14,21,38,.42);
    opacity:0;pointer-events:none;transition:opacity .2s}
  body.filtre-acik .fp-backdrop{opacity:1;pointer-events:auto}

  .fbar{display:block;position:sticky;top:var(--hdr-h);z-index:45;
    background:rgba(251,252,254,.94);backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);padding:10px 0}
  /* mockup 2: Filtrele | Sırala — iki eşit buton yan yana */
  .fbar-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px}
  .fbar .fbar-btn{min-height:46px;width:100%;justify-content:center}
  .fbar-sort{display:flex}
  .fbar-sort .sortdd{flex:1;width:100%;position:relative}
  .fbar-sort .sort-btn{width:100%;min-height:46px;justify-content:center;border-radius:11px}
  .fbar-sort .sort-menu{left:0;right:0;min-width:0}
  /* mockup 2: mobilde buton sabit "Sırala" gösterir (seçili sıralama gizlenir) */
  .fbar-sort .sort-lbl{display:none}
  .fbar-sort .sort-btn::after{content:"Sırala";font-size:14px;font-weight:650;color:var(--ink)}
  .fbar-sort .sort-btn .chev{display:none}
  /* mobilde üst araç çubuğundaki sayaç + görünüm ikonları gizli (mockup 2) */
  .sres-top{display:none}
  .sres-head{padding-top:16px}
  .sres-h1{font-size:22px}
}
@media(max-width:680px){
  .sres-bar{padding:12px 0 16px}
  /* mockup 2: arama input + küçük "Ara" butonu aynı satırda */
  .searchbar-c{flex-wrap:nowrap;gap:8px;padding:7px 7px 7px 6px}
  .searchbar-c .sb-input{flex:1 1 auto;min-width:0;order:0;border-top:0;margin:0}
  .searchbar-c .btn-primary{flex:none;width:auto;height:42px;padding:0 20px;font-size:14.5px;margin-top:0;order:0}
  .sres-tools{margin-left:0;width:100%}
  .sortdd{flex:1}
  .sort-btn{width:100%;min-height:42px}
  .fpanel .fp-combo .combo{position:static;left:auto;right:auto;bottom:auto;
    width:100%;max-height:none;border-radius:12px;z-index:auto}
  .fpanel .fp-combo .combo-list{max-height:none}

  /* mobil kart (mockup 1): tek sütun, YATAY düzen — görsel sol, bilgi sağ.
     Artık yalnızca TALEP listesi bu kalıpta (talep kartında görsel yok);
     ürün listesi aşağıda 2 sütunlu dikey karta döner. */
  .rgrid,.rgrid[data-tip="talep"]{grid-template-columns:1fr;gap:12px}
  .rgrid .rcard{flex-direction:row;align-items:stretch}
  .rfav-wrap{right:8px;top:8px}
  .rgrid .rcard .rfav-wrap{display:block}
  .rgrid .rbody{flex:1;flex-direction:column;padding:11px 12px;gap:0;min-width:0}
  .rl-main{flex:none}
  .rtitle{font-size:14px;-webkit-line-clamp:2}
  .rcat{margin-top:3px}
  .rmeta{margin-top:6px;gap:10px}
  .rmeta .rdate{display:none}          /* dar kartta tarih düşer */
  .rprice{margin-top:8px;font-size:15px}
  .rfoot{margin-top:9px;padding-top:9px}
  .rgrid:not([data-layout="list"]) .rbody::after{flex-basis:9px}
  .rgo{width:32px;height:32px}

  /* 2026-10-05 müşteri: ÜRÜN listesi mobilde de masaüstündeki gibi KART —
     satırda 2, görsel üstte (kare, kartın tam genişliği), bilgi altta.
     Görünüm düğmeleri ≤980px'te gizli olduğundan liste.js bu genişlikte
     hep ızgarayı uygular; mobilde liste düzeni (data-layout="list") yok. */
  .rgrid[data-tip="arz"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rgrid[data-tip="arz"] .rcard{flex-direction:column}
  .rgrid[data-tip="arz"] .rthumb{width:auto;margin:0;border-radius:0;align-self:stretch}
  .rgrid[data-tip="arz"] .rbody{padding:10px 10px 11px}
  .rgrid[data-tip="arz"] .rtitle{font-size:13.5px}
  .rgrid[data-tip="arz"] .rmeta{gap:6px}
  .rgrid[data-tip="arz"] .rfirm{gap:6px}
  .rgrid[data-tip="arz"] .rmono{width:26px;height:26px;border-radius:7px;font-size:10.5px}
  .rgrid[data-tip="arz"] .rgo{width:30px;height:30px}
  /* misafir kartı: kilit kutusu, "🔒 Üyelere özel" etiketinin kilidini tekrarlıyor;
     dar kartta etiketi kesiyordu → yalnızca burada gizli. */
  .rgrid[data-tip="arz"] .rmono-lock{display:none}

  .sres-empty{padding:34px 18px}
  .empty-act .btn{width:100%}
  body.filtre-acik .demo-bar{opacity:0;pointer-events:none}
}
@media(max-width:400px){
  .rmeta{font-size:11.5px}
}
@media (hover:none) and (pointer:coarse){
  .fopt{padding:11px 0;min-height:44px}
  .crumbs a,.crumbs span{min-height:40px;display:inline-flex;align-items:center}
  .fp-close{width:40px;height:40px}
  .sort-btn,.fbar-btn,.fg-btn,.fp-clear,.sort-opt{min-height:44px}
  .pg,.pg-nav{min-width:42px;height:42px}
  .vtog-btn{width:40px;height:40px}
  .chip{padding:9px 13px}
  .rfav{width:42px;height:42px}
  .btn-detail{height:42px}
}
@media (prefers-reduced-motion:reduce){
  .rcard{transition:none}
  .fpanel{transition:none}
}

/* ==========================================================
   ÜRÜN İLAN DETAY  (ilan-detay.html)
   Sınıf öneki: .detay- / .d- (özet, blok) / .df- (firma) / .g- (galeri)
   ========================================================== */
.detay-crumbs{padding-top:18px;padding-bottom:2px}
.detay-crumbs .crumbs{font-size:13px}

.detay-layout{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:26px;
  align-items:start;padding-top:16px;padding-bottom:40px}
.detay-main{min-width:0}

/* ---------- galeri ---------- */
/* galeri + açıklama üstte yan yana: fotoğraf sayfanın en fazla yarısı kadar.
   Böylece görsel çok yer kaplamaz, yanındaki alan açıklamayla dolar. */
.detay-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;
  align-items:start;margin-bottom:22px}
.gallery{margin-bottom:0}
.d-block-desc{margin-bottom:0}
.g-ana{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(150deg,#E4EAF3,#C4CDDB);border:1px solid var(--line)}
.g-ana img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;display:block}
.g-ph{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(255,255,255,.35) 14px,rgba(255,255,255,.35) 28px)}
.d-prem{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;
  background:#fff;color:var(--gold-2);border:1px solid var(--gold-line);border-radius:999px;
  font-size:12px;font-weight:700;padding:6px 11px;box-shadow:var(--sh-sm)}
.g-thumbs{display:flex;gap:9px;margin-top:9px;flex-wrap:wrap}
.g-thumb{width:76px;height:76px;border-radius:11px;overflow:hidden;cursor:pointer;padding:0;
  border:2px solid var(--line);background:#EEF1F6;transition:border-color .14s}
.g-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;display:block}
.g-thumb:hover{border-color:#C6D3EA}
.g-thumb.is-on{border-color:var(--blue)}

/* ---------- içerik blokları ---------- */
.d-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:22px 24px;margin-bottom:16px}
.d-bh{margin:0 0 14px;font-size:17px;font-weight:750;letter-spacing:-.01em}
.d-desc p{margin:0 0 12px;font-size:14.5px;line-height:1.72;color:#3A465C}
.d-desc p:last-child{margin-bottom:0}
/* 2026-10-02: açıklama basit editörle biçimli — liste ve vurgu
   (izinli etiketler: p br strong b em i u ul ol li). */
.d-desc ul,.d-desc ol{margin:0 0 12px;padding-left:22px;font-size:14.5px;line-height:1.72;color:#3A465C}
.d-desc li{margin-bottom:4px}
.d-desc li:last-child,.d-desc>*:last-child{margin-bottom:0}
.d-desc strong,.d-desc b{font-weight:700;color:var(--ink)}

.d-specs{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.spec-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line-2);font-size:14px}
.spec-k{color:var(--ink-3)}
.spec-v{font-weight:650;color:var(--ink);text-align:right}

.d-safe{display:flex;gap:12px;align-items:flex-start;background:#F3F8F4;
  border:1px solid #D5E9DA;border-radius:var(--r);padding:15px 17px}
.d-safe-ic{flex:none;color:#1F8A4C;margin-top:1px}
.d-safe p{margin:0;font-size:13px;line-height:1.6;color:#2E5A3E}

/* ---------- sağ sütun: özet kartı ---------- */
.detay-side{position:sticky;top:calc(var(--hdr-h) + 14px);display:flex;flex-direction:column;gap:16px}
.d-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:20px}
.d-summary .d-cat{font-size:12px;font-weight:600;color:var(--blue)}
.d-title{margin:6px 0 0;font-size:20px;font-weight:800;line-height:1.32;letter-spacing:-.01em}
.d-line{margin-top:12px}
.d-city{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.d-city svg{color:var(--ink-3)}
.d-ilce-lock{font-weight:500;color:var(--ink-3);font-size:12.5px}
.d-sub{margin-top:6px;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.d-dot{opacity:.5}

.d-facts{display:flex;gap:12px;margin-top:16px}
.d-qty,.d-value{flex:1;background:#F7F9FD;border:1px solid var(--line-2);border-radius:12px;padding:11px 13px}
.d-qty small,.d-value small{display:block;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.d-qty b,.d-value b{font-size:17px;font-weight:750;color:var(--ink);letter-spacing:-.01em}
.d-value b{color:var(--blue)}
.d-value-none{color:var(--ink-2) !important;font-size:15px !important}

.d-pref-row{margin-top:14px}
.d-pref{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;
  padding:6px 11px;border-radius:999px;border:1px solid transparent}
.d-pref[data-pref="InAppOnly"]{background:#EEF1F6;color:#556075;border-color:#DDE3EC}
.d-pref[data-pref="PublicToMembers"]{background:#EAF7EE;color:#1F7A44;border-color:#CBEAD5}
.d-pref[data-pref="RevealOnRequest"]{background:var(--blue-soft);color:var(--blue);border-color:#D6E4FD}

.d-actions{display:flex;gap:9px;margin-top:16px}
.d-msg,.d-join{flex:1;height:46px;font-size:15px}
.d-fav{flex:none;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);
  background:#fff;border-radius:12px;cursor:pointer;color:var(--ink-3)}
.d-fav:hover{color:#C2255C;border-color:#F3D3DF}
.d-fav.is-on{color:#C2255C;border-color:#F3D3DF;background:#FDF2F6}
.d-fav.is-on svg path{fill:currentColor}

/* ---------- firma kartı: üye ---------- */
.df-hd{display:flex;align-items:flex-start;gap:12px}
.df-mono{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:16px;font-weight:750;color:#fff;background:#8B96A6}
.df-mono[data-tone="a"]{background:#2F6BE0}.df-mono[data-tone="b"]{background:#12A150}
.df-mono[data-tone="c"]{background:#B4690E}.df-mono[data-tone="d"]{background:#7E22CE}
.df-mono[data-tone="e"]{background:#C2255C}.df-mono[data-tone="f"]{background:#0B7285}
/* Logosunu yükleyen firmada rozet logoyu gösterir (2026-08-20); kart
   rozetlerindeki .rmono-logo / .tmono-logo ile aynı davranış. */
.df-mono-logo{background:#fff;border:1px solid var(--line-2)}
.df-mono img{width:100%;height:100%;object-fit:contain;border-radius:11px;display:block}
.df-id{min-width:0;flex:1}
.df-name{display:flex;align-items:center;gap:6px;font-size:15.5px;font-weight:750;
  line-height:1.3;color:var(--ink)}
.df-name svg{flex:none}
.df-sector{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.df-prem{flex:none;display:inline-flex;align-items:center;gap:4px;background:var(--gold-soft);
  color:var(--gold-2);border:1px solid var(--gold-line);border-radius:999px;
  font-size:10.5px;font-weight:700;padding:4px 8px}
.df-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
  color:var(--ink-3);margin-top:14px}
.df-meta span{display:inline-flex;align-items:center;gap:4px}
.df-meta svg{color:var(--ink-3)}
.df-dot{opacity:.5}
.df-about{margin:12px 0 0;font-size:13.5px;line-height:1.62;color:#43506A}
.df-listings{margin-top:13px;padding-top:13px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--ink-2)}
.df-listings b{color:var(--ink);font-weight:700}
.df-listings a{color:var(--blue);font-weight:600}
.df-listings a:hover{text-decoration:underline}

/* iletişim durumları */
.df-contact{margin-top:15px}
.ci-open{display:flex;flex-direction:column;gap:8px}
.ci-row{display:flex;align-items:center;gap:11px;background:#F7F9FD;border:1px solid var(--line-2);
  border-radius:12px;padding:11px 13px;color:var(--ink)}
.ci-row:hover{border-color:#CFDCF4;background:#F1F6FE}
.ci-row svg{flex:none;color:var(--blue)}
.ci-row span{display:flex;flex-direction:column;font-size:14.5px;font-weight:650;line-height:1.2}
.ci-row small{font-size:11px;font-weight:500;color:var(--ink-3);margin-bottom:2px}

.ci-locked{display:flex;gap:11px;align-items:flex-start;background:var(--blue-soft);
  border:1px solid #DCE8FD;border-radius:12px;padding:13px 14px}
.ci-locked.ci-inapp{background:#F5F6F9;border-color:var(--line)}
.ci-lock-ic{flex:none;color:var(--blue);margin-top:1px}
.ci-inapp .ci-lock-ic{color:var(--ink-3)}
.ci-locked p{margin:0;font-size:13px;line-height:1.55;color:#3D4A61}
.btn-detay-mesaj{width:100%;margin-top:10px;height:46px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:12px;
  cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:650}
.btn-detay-mesaj:hover{background:var(--blue-dark)}
.ci-revealed{display:flex;align-items:center;gap:9px;background:#EAF7EE;border:1px solid #CBEAD5;
  border-radius:12px;padding:11px 13px;margin-bottom:9px;font-size:13px;font-weight:600;color:#1F7A44}
.ci-revealed svg{flex:none}

/* ---------- firma kartı: misafir (kilitli) ---------- */
.d-firm-locked{background:linear-gradient(180deg,#FBFCFE,#F5F8FD)}
.dfl-hd{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--line-2)}
.dfl-mono{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:#EDF1F7;color:#98A2B3}
.dfl-mask{display:flex;flex-direction:column;gap:7px}
.dfl-mask .mask-bar{width:150px;height:12px}
.dfl-mask .mask-bar-sm{width:96px;height:9px}
.dfl-body{padding-top:15px}
.dfl-lock-tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.dfl-body p{margin:9px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.dfl-cta{width:100%;height:46px;margin-top:14px;font-size:15px}
.dfl-login{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:600;color:var(--blue)}
.dfl-login:hover{text-decoration:underline}

/* ---------- benzer ilanlar ---------- */
.benzer{padding-bottom:56px}
.benzer-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.benzer-hd h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.benzer-all{font-size:13.5px;font-weight:600;color:var(--blue)}
.benzer-all:hover{text-decoration:underline}
.benzer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .16s,transform .16s,border-color .16s}
.bcard:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:#DEE6F4}
.bcard.is-premium{border-color:var(--gold-line)}
.bthumb{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#E4EAF3,#C4CDDB)}
.bthumb img{width:100%;height:100%;object-fit:cover;display:block}
.bprem{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:24px;height:24px;
  background:#fff;color:var(--gold-2);border:1px solid var(--gold-line);border-radius:7px}
.bbody{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1}
.btitle{font-size:13.5px;font-weight:650;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard:hover .btitle{color:var(--blue)}
.bmeta{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.bprice{margin-top:auto;padding-top:8px;font-size:14px;font-weight:750;color:var(--ink)}
.bprice small{font-size:10px;font-weight:600;color:var(--ink-3)}

/* ---------- demo çubuğu: iletişim tercihi eklendi ---------- */
.demo-sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.demo-label-2{opacity:.75}
.demo-seg-pref .demo-btn{padding:7px 11px;font-size:12.5px}

/* ================= DETAY DUYARLI (geniş → dar) ================= */
@media(max-width:1140px){
  .detay-layout{grid-template-columns:minmax(0,1fr) 330px;gap:20px}
  .benzer-grid{grid-template-columns:repeat(3,1fr)}
  .benzer-grid .bcard:nth-child(4){display:none}
}
@media(max-width:900px){
  /* özet + firma yukarı, tek sütun; sağ sütun yapışkanlığı kalkar */
  .detay-layout{grid-template-columns:1fr}
  .detay-side{position:static;order:-1}
  /* galeri + açıklama üst üste (yan yana düzen dar ekranda sıkışır) */
  .detay-top{grid-template-columns:1fr;gap:18px}
  .d-title{font-size:22px}
  .benzer-grid{grid-template-columns:repeat(3,1fr)}
  .benzer-grid .bcard:nth-child(4){display:flex}
}
@media(max-width:680px){
  .detay-layout{gap:16px;padding-top:12px}
  .g-ana{aspect-ratio:1/1}
  .d-block{padding:17px 16px}
  .d-specs{grid-template-columns:1fr;gap:0}
  .d-card{padding:16px}
  .d-title{font-size:20px}
  .d-facts{flex-direction:column;gap:9px}
  .benzer-grid{grid-template-columns:repeat(2,1fr)}
  .demo-sep{display:none}
  .demo-label-2{width:100%;margin-top:6px}
}
@media(max-width:400px){
  .g-thumb{width:64px;height:64px}
  .d-actions{flex-wrap:wrap}
  .d-msg,.d-join{flex:1 1 100%}
  .d-fav{width:100%}
}
@media (hover:none) and (pointer:coarse){
  .g-thumb{min-width:64px;min-height:64px}
  .ci-row,.dfl-login,.df-listings a{min-height:44px}
  .d-fav{width:46px;height:46px}
  .benzer-all,.benzer-hd a{min-height:40px;display:inline-flex;align-items:center}
  .detay-crumbs .crumbs a,.detay-crumbs .crumbs span{min-height:40px;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .bcard{transition:none}
}

/* ==========================================================
   TALEP DETAY  (talep-detay.html) — mor taraf
   Arz detayının (.detay-layout, .d-card, .df-, .ci-) yapısını paylaşır;
   yalnızca renk ve talebe özgü öğeler burada.
   ========================================================== */

/* özet kartı sol mor şerit */
.d-summary-t{border-top:3px solid var(--purple)}
.d-summary-t .d-cat{color:var(--purple)}
.d-summary-t .d-value b{color:var(--purple)}

/* --- "Aranıyor" hero kutusu (görsel yerine) --- */
.t-hero{position:relative;border-radius:var(--r);border:1px solid var(--purple-line);
  background:linear-gradient(150deg,#FaF5FE,#F3E8FC);padding:30px 26px;margin-bottom:22px;
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.t-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120px 120px at 85% 15%,rgba(126,34,206,.10),transparent 70%),
             radial-gradient(140px 140px at 12% 90%,rgba(126,34,206,.08),transparent 70%)}
.t-flag{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--purple);
  color:#fff;border-radius:999px;font-size:12.5px;font-weight:700;padding:6px 14px;letter-spacing:.02em}
.t-flag-dot{width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:tpulse 1.8s ease-out infinite}
@keyframes tpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media (prefers-reduced-motion:reduce){.t-flag-dot{animation:none}}
.t-hero-in{position:relative;margin-top:16px;display:flex;align-items:baseline;gap:9px}
.t-hero-qty{font-size:40px;font-weight:800;color:var(--purple);letter-spacing:-.02em;line-height:1}
.t-hero-unit{font-size:17px;font-weight:600;color:var(--purple-dark);opacity:.8}
.t-hero-cat{position:relative;margin-top:10px;font-size:13px;font-weight:600;color:#7B5AA0;
  background:#fff;border:1px solid var(--purple-line);border-radius:999px;padding:5px 13px}

/* --- talebe özgü: gelen teklif + kalan süre --- */
.t-teklif{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;
  padding:11px 13px;background:var(--purple-soft);border:1px solid var(--purple-line);
  border-radius:12px;font-size:13px;color:#5A3B7A}
.t-teklif b{font-size:16px;font-weight:750;color:var(--purple)}
.t-kalan{flex-basis:100%;font-size:11.5px;color:#8A6BA8}

/* --- teklif ver butonu (mor) --- */
.btn-teklif{background:linear-gradient(180deg,#9333EA 0%, var(--purple) 100%);
  box-shadow:0 4px 12px rgba(126,34,206,.26)}
.btn-teklif:hover{background:linear-gradient(180deg,#8A2BDF 0%, var(--purple-dark) 100%);
  box-shadow:0 6px 16px rgba(126,34,206,.34)}
.btn-detay-mesaj-t{background:var(--purple)}
.btn-detay-mesaj-t:hover{background:var(--purple-dark)}

/* iletişim tercihi rozeti mor bağlamda */
.d-summary-t .d-pref[data-pref="RevealOnRequest"]{background:var(--purple-soft);
  color:var(--purple);border-color:var(--purple-line)}
.ci-revealed-t{background:var(--purple-soft);border-color:var(--purple-line);color:#5A3B7A}

/* firma kartı mor vurgu (monogram zaten data-tone) */
.df-listings a{color:var(--purple)}
.d-firm-t .df-listings a{color:var(--purple)}
.dfl-cta-t{background:linear-gradient(180deg,#9333EA 0%, var(--purple) 100%)}
.dfl-cta-t:hover{background:linear-gradient(180deg,#8A2BDF 0%, var(--purple-dark) 100%)}
.d-firm-locked-t .dfl-login{color:var(--purple)}

/* --- basit yönlendirme kutusu --- */
.talep-yonlendir{display:flex;align-items:center;gap:20px;justify-content:space-between;
  flex-wrap:wrap;background:var(--purple-soft);border:1px solid var(--purple-line);
  border-radius:var(--r);padding:22px 24px;margin-bottom:16px}
.ty-txt h2{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em;color:#4A2A6E}
.ty-txt p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:#6B4B8A;max-width:52ch}
.btn-yayinla{flex:none;height:44px;background:linear-gradient(180deg,#9333EA 0%, var(--purple) 100%);
  box-shadow:0 4px 12px rgba(126,34,206,.24);white-space:nowrap}
.btn-yayinla:hover{background:linear-gradient(180deg,#8A2BDF 0%, var(--purple-dark) 100%)}

/* ================= TALEP DETAY DUYARLI ================= */
@media(max-width:680px){
  .t-hero{padding:24px 18px}
  .t-hero-qty{font-size:32px}
  .talep-yonlendir{padding:18px}
  .btn-yayinla{width:100%}
}

/* ==========================================================
   ÜYELİK BAŞVURUSU  (uye-ol.html) + GİRİŞ (giris.html)
   Sınıf öneki: .uyelik- / .step / .field / .ftip / .check
   ========================================================== */
.uyelik-sayfa{background:linear-gradient(180deg,#F4F7FC 0%,#EEF3FA 100%);
  padding:40px 0 64px;min-height:calc(100vh - var(--hdr-h))}
.uyelik-wrap{max-width:620px}

.uyelik-head{text-align:center;margin-bottom:26px}
.uyelik-brand{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.22em;
  color:var(--blue);background:var(--blue-soft);border:1px solid #DCE8FD;
  border-radius:999px;padding:5px 14px}
.uyelik-title{margin:14px 0 0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.uyelik-desc{margin:10px auto 0;max-width:50ch;font-size:13.5px;line-height:1.62;color:var(--ink-2)}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;gap:10px;list-style:none;padding:0;margin:0 auto 22px;max-width:520px}
.step{display:flex;align-items:center;gap:11px;flex:none}
.step-no{position:relative;flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--line);
  color:var(--ink-3);font-weight:750;font-size:15px;transition:all .18s}
.step-tick{display:none}
.step.is-on .step-no{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.step.is-done .step-no{border-color:var(--blue);background:var(--blue);color:#fff}
.step.is-done .step-num{display:none}
.step.is-done .step-tick{display:block}
.step-txt{display:flex;flex-direction:column;line-height:1.25}
.step-txt b{font-size:14px;font-weight:700;color:var(--ink)}
.step-txt small{font-size:11.5px;color:var(--ink-3)}
.step:not(.is-on):not(.is-done) .step-txt b{color:var(--ink-3)}
.step-line{flex:1;height:2px;background:var(--line);border-radius:2px;min-width:20px}
.uyelik-akis[data-adim="2"] ~ * .step-line,
.uyelik-akis[data-adim="2"] .step-line{background:var(--blue)}

/* ---------- kart ---------- */
.uyelik-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 8px 30px rgba(20,42,86,.07);padding:26px 28px}

/* ---------- firma tipi kartları ---------- */
.ftip{border:0;padding:0;margin:0 0 22px}
.ftip-legend{font-size:14px;font-weight:700;color:var(--ink);padding:0;margin-bottom:11px}
.ftip-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ftip-card{position:relative;display:flex;align-items:center;gap:12px;padding:15px 16px;
  border:1.6px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;
  transition:border-color .15s,background .15s,box-shadow .15s}
.ftip-card:hover{border-color:#C6D3EA}
.ftip-card.is-on{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px rgba(27,95,235,.10)}
.ftip-card input{position:absolute;opacity:0;width:0;height:0}
.ftip-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:#EEF2F8;color:var(--ink-3)}
.ftip-card.is-on .ftip-ic{background:#fff;color:var(--blue)}
.ftip-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ftip-t b{font-size:14.5px;font-weight:700}
.ftip-t small{font-size:12px;color:var(--ink-3)}
.ftip-check{flex:none;margin-left:auto;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line);position:relative}
.ftip-card.is-on .ftip-check{border-color:var(--blue);background:var(--blue)}
.ftip-card.is-on .ftip-check::after{content:"";position:absolute;inset:0;
  background:no-repeat center/11px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' stroke='%23fff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- form ızgarası ---------- */
.uyelik-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;min-width:0}
.field-wide{grid-column:1 / -1}
/* T.C. alanı tüzelde gizlenir (JS hidden) */
.uyelik-akis[data-tip="tuzel"] .field-tc{display:none}
/* Şirket türü alanı iki dalda ayrıdır: gerçek kişide tek seçenek (Şahıs
   Şirketi), tüzelde liste. Yanlış olan her zaman gizlenir. */
.uyelik-akis[data-tip="sahis"] .field-tuzel{display:none}
.uyelik-akis[data-tip="tuzel"] .field-sahis{display:none}
/* ⚠️ .field'ın display:flex'i tarayıcının [hidden]{display:none} kuralını EZER.
   Bu satır olmadan uyelik.js'in "alan.hidden = true" ataması hiçbir şey
   gizlemez: öznitelik yazılır, DOM'da görünür, alan ekranda kalır. Gerçek
   kişi seçiliyken tüzel şirket türü listesinin görünmesinin sebebi buydu. */
.field[hidden]{display:none}
.field label{font-size:13px;font-weight:650;color:var(--ink);margin-bottom:7px;
  display:inline-flex;align-items:center;gap:6px}
.req{color:#E5484D;font-weight:700}
.field input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:11px;
  padding:0 14px;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  transition:border-color .14s,box-shadow .14s}
.field input::placeholder{color:#9AA6B8}
.field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,95,235,.12)}
.field-err{font-size:12px;color:#E5484D;margin-top:6px;min-height:0;display:none}
/* 🔴 SUNUCUDAN GELEN HATA MESAJI.
   Yukarıdaki kural mesajı display:none yapar; görünmesi için .field'ın
   "touched has-error" sınıflarını alması gerekir ve o sınıfları YALNIZCA
   istemci JS'i (canlı doğrulama) ekler. Sunucunun döndürdüğü hata bu
   sınıfları hiç almadığı için kullanıcı formun neden reddedildiğini
   GÖREMİYORDU (2026-08-09: üye ol formu sessizce 1. adıma dönüyordu).
   MVC, hatalı alanın span'ine field-validation-error sınıfını kendisi ekler. */
.field-err.field-validation-error{display:block}
.field:has(.field-validation-error) input,
.field:has(.field-validation-error) textarea,
.field:has(.field-validation-error) .uyelik-select,
.field:has(.field-validation-error) .sb-trigger{border-color:#E5484D}

/* Hata özeti (üye ol formunun başı). Sınıfın CSS karşılığı yoktu. */
.uyelik-ozet-hata{margin:0 0 18px;padding:13px 15px;border:1px solid #F3C9CB;
  background:#FDECEC;border-radius:12px;color:#B4262A;font-size:13.5px;line-height:1.6}
.uyelik-ozet-hata ul{margin:0;padding-left:18px}
.uyelik-ozet-hata li{margin:2px 0}
.uyelik-ozet-hata.validation-summary-valid{display:none}
.field.touched.has-error input{border-color:#E5484D}
.field.touched.has-error .field-err{display:block}
.field.touched.has-error .sb-trigger{border-color:#E5484D}

/* alan içi bilgi ipucu */
.field-hint{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;
  border:0;background:transparent;cursor:pointer;color:var(--ink-3);padding:0}
.field-hint:hover{color:var(--blue)}
.hint-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:220px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;
  padding:9px 11px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .16s;
  z-index:20;box-shadow:var(--sh-md)}
.hint-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}
.field-hint:hover .hint-pop,.field-hint:focus-visible .hint-pop{opacity:1}

/* combo alanları form içinde */
.uye-combo{width:100%}
.uye-combo .sb-trigger{width:100%;justify-content:flex-start;height:46px;
  border:1.5px solid var(--line);background:#fff;padding:0 14px;border-radius:11px}
.uye-combo .sb-trigger .chev{margin-left:auto}
.uye-combo .sb-label{flex:1;max-width:none;color:var(--ink)}
.uye-combo:not(.has-value) .sb-label{color:#9AA6B8}
.uye-combo.is-disabled{opacity:.55;pointer-events:none}
.uye-combo .combo{width:100%}

/* ---------- not + footer ---------- */
.uyelik-note{display:flex;align-items:flex-start;gap:9px;margin:20px 0 0;padding:12px 14px;
  background:#F5F8FD;border:1px solid var(--line-2);border-radius:11px;
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.uyelik-note svg{flex:none;color:var(--blue);margin-top:1px}
.uyelik-foot{display:flex;align-items:center;gap:12px;margin-top:22px}
.uyelik-login-link{font-size:13.5px;font-weight:600;color:var(--blue)}
.uyelik-login-link:hover{text-decoration:underline}
.btn-ileri,.btn-tamamla{margin-left:auto;height:48px;padding:0 28px;font-size:15px;
  display:inline-flex;align-items:center;gap:8px}
.btn-geri{height:48px;padding:0 22px;display:inline-flex;align-items:center;gap:7px}
.btn-tamamla{min-width:200px;justify-content:center}

/* ---------- şifre ---------- */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--ink-3);border-radius:8px}
.pw-toggle:hover{color:var(--ink)}
.pw-strength{display:flex;gap:5px;margin-top:9px}
.pw-strength span{flex:1;height:4px;border-radius:2px;background:var(--line)}
.pw-strength[data-skor="1"] span:nth-child(1){background:#E5484D}
.pw-strength[data-skor="2"] span:nth-child(-n+2){background:#F5A524}
.pw-strength[data-skor="3"] span:nth-child(-n+3){background:#3E9BFE}
.pw-strength[data-skor="4"] span{background:#12A150}
.pw-strength-lbl{font-size:11.5px;font-weight:600;color:var(--ink-3);margin-top:5px;min-height:14px}

/* ---------- onay kutuları ---------- */
.uyelik-checks{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.check{display:flex;align-items:flex-start;gap:11px;padding:9px 0;cursor:pointer}
.check input{position:absolute;opacity:0;width:0;height:0}
.check-box{flex:none;width:20px;height:20px;border-radius:6px;border:1.7px solid #C7D0DE;
  background:#fff;position:relative;margin-top:1px;transition:border-color .14s,background .14s}
.check input:checked + .check-box{border-color:var(--blue);background:var(--blue)}
.check input:checked + .check-box::after{content:"";position:absolute;inset:0;
  background:no-repeat center/11px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' stroke='%23fff' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check input:focus-visible + .check-box{box-shadow:0 0 0 3px rgba(27,95,235,.22)}
.check-txt{font-size:13.5px;line-height:1.5;color:#3D4A61}
.check-txt a{color:var(--blue);font-weight:600}
.check-txt a:hover{text-decoration:underline}
.check-txt em{font-style:normal;color:var(--ink-3);font-size:12.5px}
.check.touched.has-error .check-box{border-color:#E5484D}
.check.touched.has-error .check-txt{color:#B4262A}

/* ---------- başarı ekranı ---------- */
.uyelik-basarili{text-align:center;padding:40px 30px}
.basarili-ic{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 16px;
  border-radius:50%;background:#EAF7EE;color:#12A150}
.uyelik-basarili h2{margin:0;font-size:23px;font-weight:800}
.uyelik-basarili p{margin:11px auto 0;max-width:46ch;font-size:14px;line-height:1.62;color:var(--ink-2)}
.basarili-durum{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:9px 15px;
  background:#FFF7E8;border:1px solid #F5E0B0;border-radius:999px;font-size:13.5px;color:#8A6508}
.basarili-durum b{font-weight:750}
.bd-ic{display:inline-flex;color:#B8860B}
.basarili-not{font-size:12.5px !important;color:var(--ink-3) !important;margin-top:14px !important}
.basarili-act{display:flex;justify-content:center;gap:11px;margin-top:22px;flex-wrap:wrap}
.basarili-act .btn{height:46px;padding:0 24px}

/* ================= GİRİŞ SAYFASI (giris.html) ================= */
.giris-wrap{max-width:440px}
.giris-card{padding:30px 30px 26px}
.giris-alt{text-align:center;margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.giris-alt a{color:var(--blue);font-weight:600}
.giris-alt a:hover{text-decoration:underline}
.giris-forgot{display:block;text-align:right;margin-top:-2px;margin-bottom:4px;
  font-size:12.5px;font-weight:600;color:var(--blue)}
.giris-forgot:hover{text-decoration:underline}
.btn-giris{width:100%;height:48px;font-size:15px;margin-top:4px}
.giris-sep{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-3);font-size:12px}
.giris-sep::before,.giris-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ================= DUYARLI ================= */
@media(max-width:680px){
  .uyelik-sayfa{padding:24px 0 44px}
  .uyelik-card{padding:20px 17px;border-radius:16px}
  .uyelik-title{font-size:23px}
  .uyelik-grid{grid-template-columns:1fr;gap:15px}
  .ftip-cards{grid-template-columns:1fr}
  .stepper{gap:8px}
  .step-txt small{display:none}
  .step-txt b{font-size:13px}
  .uyelik-foot{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .uyelik-login-link{text-align:center}
  .btn-ileri,.btn-tamamla,.btn-geri{margin-left:0;width:100%;justify-content:center}
  .hint-pop{width:180px}
  .basarili-act .btn{width:100%}
}
@media(max-width:400px){
  .step-txt{display:none}
  .stepper{justify-content:center}
}
@media (hover:none) and (pointer:coarse){
  .ftip-card,.check{min-height:44px}
  .pw-toggle{width:40px;height:40px}
  .field-hint{width:40px;height:40px}
  .uyelik-login-link,.giris-forgot,.giris-alt a{min-height:40px;display:inline-flex;align-items:center}
}

/* ==========================================================
   İÇERİK SAYFALARI  (hakkimizda.html · iletisim.html)
   Sınıf öneki: .page- / .about- / .iletisim- / .ik-
   ========================================================== */
.page-hero{background:linear-gradient(180deg,#F4F7FC,#EEF3FA);border-bottom:1px solid var(--line);
  padding:30px 0 34px}
.page-crumbs{font-size:13px;margin-bottom:14px}
.page-h1{margin:0;font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.15;max-width:20ch}
.page-lead{margin:14px 0 0;max-width:60ch;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.page-body{padding-top:40px;padding-bottom:60px}
.page-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue)}

/* ---------- hakkımızda: misyon ---------- */
.about-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:36px;
  align-items:center;margin-bottom:48px}
.about-intro-txt h2{margin:12px 0 0;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.about-intro-txt p{margin:14px 0 0;font-size:15px;line-height:1.7;color:#3A465C}
.about-intro-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-md);padding:26px}
.aic-row{display:flex;align-items:center;gap:14px}
.aic-num{font-size:52px;font-weight:800;color:var(--blue);letter-spacing:-.03em;line-height:1}
.aic-lbl{font-size:15px;font-weight:600;color:var(--ink-2);line-height:1.3}
.aic-line{height:1px;background:var(--line-2);margin:18px 0}
.aic-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.aic-list li{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink)}
.aic-dot{width:11px;height:11px;border-radius:50%;flex:none}
.aic-blue{background:var(--blue)}.aic-purple{background:var(--purple)}

/* ---------- değer kartları ---------- */
.about-values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:48px}
.av-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-sm);padding:22px 20px}
.av-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;
  background:var(--blue-soft);color:var(--blue);margin-bottom:14px}
.av-card h3{margin:0;font-size:16px;font-weight:750;letter-spacing:-.01em;line-height:1.3}
.av-card p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- nasıl çalışır ---------- */
.about-how{text-align:center;margin-bottom:48px}
.about-how h2{margin:10px 0 26px;font-size:25px;font-weight:800;letter-spacing:-.02em}
.ah-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.ah-step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-sm);padding:24px 22px}
.ah-no{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--blue);color:#fff;font-size:18px;font-weight:750;margin-bottom:13px}
.ah-step h3{margin:0;font-size:16.5px;font-weight:750}
.ah-step p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ---------- CTA ---------- */
.about-cta{background:linear-gradient(120deg,#1B5FEB,#1450CF);border-radius:20px;
  padding:34px 38px;color:#fff;overflow:hidden;position:relative}
.about-cta::before{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.ac-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ac-in h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.01em}
.ac-in p{margin:8px 0 0;font-size:14.5px;color:rgba(255,255,255,.85);max-width:44ch}
.ac-act{display:flex;gap:11px;flex-wrap:wrap}
.ac-act .btn-primary{background:#fff;color:var(--blue)}
.ac-act .btn-primary:hover{background:#F0F4FF}
.ac-act .btn-line{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.ac-act .btn-line:hover{background:rgba(255,255,255,.12)}

/* ---------- iletişim ---------- */
.iletisim-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}
.iletisim-yan{display:flex;flex-direction:column;gap:12px}
.ik-card{display:flex;align-items:flex-start;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-sm);padding:16px 17px}
.ik-ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue)}
.ik-card small{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:3px}
.ik-card a,.ik-card span{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.ik-card a:hover{color:var(--blue)}

.if-title{margin:0 0 18px;font-size:19px;font-weight:750}
.iletisim-form textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;
  font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;resize:vertical;min-height:110px;
  transition:border-color .14s,box-shadow .14s}
.iletisim-form textarea::placeholder{color:#9AA6B8}
.iletisim-form textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,95,235,.12)}
.field.touched.has-error textarea{border-color:#E5484D}
.opt{font-style:normal;color:var(--ink-3);font-weight:500;font-size:12px}
.if-kvkk{margin-top:16px}
.if-submit{margin-top:20px;height:48px;padding:0 30px;font-size:15px}
.iletisim-basarili{text-align:center;padding:20px 10px}
.iletisim-basarili .basarili-ic{width:60px;height:60px}
.iletisim-basarili h3{margin:0;font-size:19px;font-weight:750}
.iletisim-basarili p{margin:8px auto 0;max-width:40ch;font-size:14px;line-height:1.6;color:var(--ink-2)}

/* ================= İÇERİK SAYFALARI DUYARLI ================= */
@media(max-width:980px){
  .about-values{grid-template-columns:repeat(2,1fr)}
  .iletisim-layout{grid-template-columns:1fr}
  .iletisim-yan{flex-direction:row;flex-wrap:wrap}
  .ik-card{flex:1 1 calc(50% - 6px);min-width:220px}
}
@media(max-width:820px){
  .about-intro{grid-template-columns:1fr;gap:22px}
  .ah-steps{grid-template-columns:1fr}
}
@media(max-width:680px){
  .page-hero{padding:22px 0 26px}
  .page-h1{font-size:25px}
  .page-lead{font-size:14.5px}
  .page-body{padding-top:28px}
  .about-values{grid-template-columns:1fr}
  .about-cta{padding:26px 22px}
  .ac-act{width:100%}
  .ac-act .btn{flex:1}
  .iletisim-yan{flex-direction:column}
  .ik-card{flex:1 1 100%}
  .iletisim-form .uyelik-grid{grid-template-columns:1fr}
}
@media (hover:none) and (pointer:coarse){
  .ik-card a{min-height:40px;display:inline-flex;align-items:center}
}

/* ==========================================================
   NASIL ÇALIŞIR (nasil-calisir.html)
   ========================================================== */
.nc-tabs{display:inline-flex;gap:6px;background:#EDF1F8;border:1px solid var(--line);
  border-radius:13px;padding:5px;margin-bottom:30px}
.nc-tab{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;
  padding:10px 18px;border-radius:9px;font-family:inherit;font-size:14px;font-weight:650;
  color:var(--ink-2);cursor:pointer;transition:all .15s}
.nc-tab:hover{color:var(--ink)}
.nc-tab.is-on{background:#fff;color:var(--blue);box-shadow:var(--sh-sm)}
.nc-tab[data-nc="talep"].is-on{color:var(--purple)}
.nc-steps{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:16px;counter-reset:nc}
.nc-step{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh-sm);padding:22px 24px}
.nc-no{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-size:19px;font-weight:750}
.nc-steps-t .nc-no{background:var(--purple)}
.nc-body h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em}
.nc-body p{margin:7px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.nc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.btn-primary-t{background:var(--purple)}
.btn-primary-t:hover{background:var(--purple-dark)}
.nc-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:26px;
  background:#F5F8FD;border:1px solid var(--line-2);border-radius:16px;margin-bottom:36px}
.nct-item{display:flex;align-items:center;gap:14px}
.nct-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:#fff;color:var(--blue);border:1px solid var(--line)}
.nct-item b{display:block;font-size:14.5px;font-weight:700}
.nct-item span{font-size:12.5px;color:var(--ink-3)}
.nc-faq-link{text-align:center;padding:24px;border-top:1px solid var(--line)}
.nc-faq-link p{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--ink)}

/* ==========================================================
   ÜYELİK PAKETLERİ (paketler.html)
   ========================================================== */
/* 2026-10-02: paket sayısından bağımsız — üç paket yan yana (dar ekranda alt alta). */
.pk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-bottom:48px}
.pk-card{position:relative;background:var(--card);border:1.5px solid var(--line);
  border-radius:20px;box-shadow:var(--sh-sm);padding:28px}
.pk-featured{border-color:var(--gold-line);box-shadow:0 12px 36px rgba(184,134,11,.14)}
.pk-badge{position:absolute;top:-12px;left:28px;background:linear-gradient(180deg,var(--gold),#9C7009);
  color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px;letter-spacing:.02em}
.pk-name{font-size:20px;font-weight:800}
.pk-tag{margin:6px 0 0;font-size:13.5px;color:var(--ink-2)}
.pk-price{display:flex;align-items:baseline;gap:8px;margin:18px 0 20px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.pk-amount{font-size:40px;font-weight:800;letter-spacing:-.03em}
.pk-featured .pk-amount{color:var(--gold-ink,#9C7009)}
.pk-per{font-size:14px;color:var(--ink-3);font-weight:600}
.pk-per small{color:var(--ink-3);font-weight:500}
.pk-btn{width:100%;height:46px;margin-bottom:22px}
.pk-featured .pk-btn{background:linear-gradient(180deg,var(--gold),#A67B0A)}
.pk-featured .pk-btn:hover{background:linear-gradient(180deg,#A67B0A,#8A6708)}
/* Kurumsal (elmas rozet) — pk-featured'ın elmas mavisi eşi. */
.pk-kurumsal{border-color:var(--elmas-line);box-shadow:0 12px 36px rgba(47,128,237,.12)}
.pk-kurumsal .pk-amount{color:#1F66CC}
.pk-kurumsal .pk-btn{background:linear-gradient(180deg,var(--elmas),#1F66CC)}
.pk-kurumsal .pk-btn:hover{background:linear-gradient(180deg,#1F66CC,#1853A8)}
.pk-hd .rrozet-satir{margin-left:8px;vertical-align:-4px}
.pk-feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.pk-feats li{position:relative;padding-left:28px;font-size:14px;line-height:1.45;color:#3A465C}
.pk-feats li b{font-weight:750;color:var(--ink)}
.pk-feats li::before{position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:11px}
.pk-yes::before{content:"";background:no-repeat center/11px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' stroke='%2312A150' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),#EAF7EE}
.pk-no{color:var(--ink-3) !important}
.pk-no::before{content:"–";background:#F0F2F5;color:var(--ink-3);font-weight:700;line-height:1}

.pk-compare{margin-bottom:40px}
.pk-compare h2{margin:0 0 18px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pk-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.pk-table{width:100%;border-collapse:collapse;min-width:480px}
.pk-table th,.pk-table td{padding:14px 20px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
.pk-table thead th{font-weight:700;color:var(--ink);background:#F7F9FC}
.pk-table th:not(:first-child),.pk-table td:not(:first-child){text-align:center;width:130px}
.pk-th-prem{color:var(--gold-ink,#9C7009) !important;background:var(--gold-soft) !important}
.pk-cell-prem{background:var(--gold-soft);font-weight:700;color:var(--gold-ink,#9C7009)}
.pk-th-elmas{color:#1F66CC !important;background:var(--elmas-soft) !important}
.pk-cell-elmas{background:var(--elmas-soft);font-weight:700;color:#1F66CC}
.pk-table tbody tr:last-child td{border-bottom:0}
.pk-dash{color:var(--ink-3)}
.pk-pay-note{display:flex;gap:16px;align-items:flex-start;background:#F5F8FD;
  border:1px solid var(--line-2);border-radius:16px;padding:22px 24px;margin-bottom:36px}
.pk-pay-ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:#fff;color:var(--blue);border:1px solid var(--line)}
.pk-pay-note b{font-size:15px;font-weight:750}
.pk-pay-note p{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* ==========================================================
   SSS (sss.html)
   ========================================================== */
.sss-body{max-width:820px}
.sss-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sss-cat{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .14s}
.sss-cat:hover{border-color:#C6D3EA;color:var(--ink)}
.sss-cat.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.sss-list{display:flex;flex-direction:column;gap:10px}
.sss-item{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:box-shadow .15s}
.sss-item.is-open{box-shadow:var(--sh-md)}
.sss-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:0;background:transparent;padding:17px 20px;font-family:inherit;font-size:15px;
  font-weight:650;color:var(--ink);text-align:left;cursor:pointer}
.sss-chev{flex:none;color:var(--ink-3);transition:transform .2s}
.sss-item.is-open .sss-chev{transform:rotate(180deg);color:var(--blue)}
.sss-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.sss-item.is-open .sss-a{max-height:340px}
.sss-a p{margin:0;padding:0 20px 18px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.sss-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:22px 26px;background:var(--blue-soft);border:1px solid #DCE8FD;border-radius:16px}
.sss-contact b{font-size:16px;font-weight:750}
.sss-contact p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}

/* ==========================================================
   BLOG (blog.html · blog-detay.html)
   ========================================================== */
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.blog-cat{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .14s}
.blog-cat:hover{border-color:#C6D3EA;color:var(--ink)}
.blog-cat.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.blog-thumb{position:relative;aspect-ratio:16/10;display:block;
  background:linear-gradient(135deg,#DCE6F5,#EAF0FA)}
.blog-thumb[data-tone="a"]{background:linear-gradient(135deg,#DCE6F5,#C9DAF3)}
.blog-thumb[data-tone="b"]{background:linear-gradient(135deg,#F3E3E8,#EAD0DA)}
.blog-thumb[data-tone="c"]{background:linear-gradient(135deg,#E0EFE6,#CDE7D6)}
.blog-thumb[data-tone="d"]{background:linear-gradient(135deg,#F5EEDD,#EDE0C4)}
.blog-thumb[data-tone="e"]{background:linear-gradient(135deg,#E6E1F3,#D6CEEA)}
.blog-thumb[data-tone="f"]{background:linear-gradient(135deg,#DEEDF2,#C9E4EC)}
.blog-thumb-cat{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;
  box-shadow:var(--sh-sm)}
.blog-body{display:flex;flex-direction:column;padding:18px 18px 20px;flex:1}
.blog-title{font-size:16.5px;font-weight:750;letter-spacing:-.01em;line-height:1.35;color:var(--ink)}
.blog-ozet{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--ink-2);flex:1}
.blog-meta{margin-top:14px;font-size:12px;color:var(--ink-3);font-weight:600}

/* blog detay */
.bd-hero{background:linear-gradient(180deg,#F4F7FC,#EEF3FA);border-bottom:1px solid var(--line);
  padding:28px 0 30px}
.bd-cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.bd-title{margin:0;font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.2;max-width:24ch}
.bd-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;color:var(--ink-2)}
.bd-author{font-weight:650;color:var(--ink)}
.bd-wrap{max-width:760px}
.bd-cover{aspect-ratio:16/8;border-radius:18px;overflow:hidden;margin:-40px 0 32px;
  box-shadow:var(--sh-md);position:relative;z-index:1}
.bd-cover-ph{position:absolute;inset:0;background:linear-gradient(135deg,#DCE6F5,#EAF0FA)}
.bd-cover-ph[data-tone="a"]{background:linear-gradient(135deg,#DCE6F5,#C9DAF3)}
.bd-cover-ph[data-tone="b"]{background:linear-gradient(135deg,#F3E3E8,#EAD0DA)}
.bd-cover-ph[data-tone="c"]{background:linear-gradient(135deg,#E0EFE6,#CDE7D6)}
.bd-cover-ph[data-tone="d"]{background:linear-gradient(135deg,#F5EEDD,#EDE0C4)}
.bd-cover-ph[data-tone="e"]{background:linear-gradient(135deg,#E6E1F3,#D6CEEA)}
.bd-cover-ph[data-tone="f"]{background:linear-gradient(135deg,#DEEDF2,#C9E4EC)}
.bd-content{font-size:16px;line-height:1.75;color:#2C3852}
.bd-content h2{margin:30px 0 10px;font-size:21px;font-weight:750;letter-spacing:-.01em;color:var(--ink)}
.bd-content p{margin:0 0 16px}
.bd-content ul{margin:0 0 16px;padding-left:22px}
.bd-content li{margin-bottom:8px}
.bd-foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.bd-related{max-width:1200px;margin-top:48px;padding-top:36px;border-top:1px solid var(--line)}
.bd-related h2{margin:0 0 20px;font-size:22px;font-weight:800;letter-spacing:-.02em}

/* ==========================================================
   SÖZLEŞMELER (sozlesmeler.html)
   ========================================================== */
.page-hero-sm{padding:26px 0 28px}
.soz-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:start}
.soz-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:calc(var(--hdr-h) + 20px)}
.soz-link{text-align:left;border:0;background:transparent;padding:12px 16px;border-radius:10px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all .14s}
.soz-link:hover{background:#F0F4FA;color:var(--ink)}
.soz-link.is-on{background:var(--blue-soft);color:var(--blue)}
.soz-content{padding:30px 34px}
.soz-notice{display:flex;align-items:flex-start;gap:9px;margin-bottom:22px;padding:11px 14px;
  background:#FFF7E8;border:1px solid #F5E0B0;border-radius:11px;font-size:12.5px;line-height:1.5;color:#8A6508}
.soz-notice svg{flex:none;color:#B8860B;margin-top:1px}
.soz-h{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.soz-guncel{margin:6px 0 24px;font-size:12.5px;color:var(--ink-3)}
.soz-bh{margin:22px 0 7px;font-size:16px;font-weight:750;color:var(--ink)}
.soz-p{margin:0;font-size:14.5px;line-height:1.7;color:#3A465C}

/* ==========================================================
   YENİ SAYFALAR — DUYARLI
   ========================================================== */
@media(max-width:980px){
  .pk-cards{grid-template-columns:1fr}
  .nc-trust{grid-template-columns:1fr;gap:14px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .soz-layout{grid-template-columns:1fr}
  .soz-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:6px}
  .soz-link{border:1px solid var(--line);background:#fff}
  .soz-link.is-on{border-color:var(--blue)}
}
@media(max-width:680px){
  .nc-tabs{display:flex;width:100%}
  .nc-tab{flex:1;justify-content:center;padding:10px 8px;font-size:13px}
  .nc-step{flex-direction:column;gap:12px;padding:18px}
  .nc-cta{flex-direction:column}
  .nc-cta .btn{width:100%}
  .pk-card{padding:22px}
  .blog-grid{grid-template-columns:1fr}
  .bd-title{font-size:25px}
  .bd-cover{margin-top:-24px}
  .sss-contact{flex-direction:column;align-items:flex-start}
  .sss-contact .btn{width:100%}
  .soz-content{padding:20px 18px}
  .pk-pay-note{flex-direction:column}
}
@media (hover:none) and (pointer:coarse){
  .nc-tab,.sss-cat,.blog-cat,.soz-link,.pk-btn{min-height:40px}
}

.giris-admin-link{margin-top:6px;font-size:12.5px}
.giris-admin-link a{color:var(--purple)}

/* ==========================================================
   Filtre paneli — açık kategori ağacı (ilanlar/talepler)
   ========================================================== */
.fcat-tree{display:flex;flex-direction:column;gap:2px}
.fcat-group{display:flex;flex-direction:column}
.fcat-main{display:flex;align-items:center;gap:6px}
.fcat-toggle{flex:1;display:flex;align-items:center;gap:7px;border:0;background:transparent;
  cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  text-align:left;padding:8px 6px;border-radius:8px;min-width:0}
.fcat-toggle:hover{background:#F5F8FD}
.fcat-caret{flex:none;color:var(--ink-3);transition:transform .15s}
.fcat-caret.is-open{transform:rotate(90deg)}
.fcat-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcat-count{flex:none;min-width:22px;height:20px;padding:0 7px;border-radius:999px;
  background:var(--line-2);color:var(--ink-3);font-size:11px;font-weight:700;
  display:grid;place-items:center}
.fcat-subs{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 24px}
/* ⚠️ display:flex, tarayıcının [hidden]{display:none} kuralını EZER.
   Bu satır olmadan akordiyon kapalıyken de alt kategoriler ekranda kalır:
   hidden özniteliği yazılır, DOM'da görünür, ama hiçbir şey gizlenmez. */
.fcat-subs[hidden]{display:none}
.fcat-sub{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;
  color:var(--ink-2);text-align:left;padding:7px 9px;border-radius:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcat-sub:hover{background:#F5F8FD;color:var(--ink)}
.fcat-sub.is-on{background:var(--blue-soft);color:var(--blue);font-weight:650}
body.sayfa-talep .fcat-sub.is-on{background:var(--purple-soft);color:var(--purple)}

/* Alt kategori satırı: ad solda, ilan sayısı sağda (müşteri kararı 2026-08-08).
   Satır flex olunca kırpma (ellipsis) satırın kendisinde değil ad kutusunda
   çalışır; bu yüzden ad .fcat-name ile sarılır. Sayaç .fcat-count'tur —
   ana kategoriyle aynı rozet, yeni sınıf uydurulmadı. */
.fcat-sub{display:flex;align-items:center;gap:8px}
.fcat-sub .fcat-name{flex:1 1 auto;min-width:0}
.fcat-sub .fcat-count{background:transparent;font-weight:600;min-width:0;padding:0}
.fcat-sub:hover .fcat-count{color:var(--ink-2)}
.fcat-sub.is-on .fcat-count{color:inherit}

/* ==========================================================================
   ÜRETİM EKİ — native <select> (.uyelik-select)
   --------------------------------------------------------------------------
   Tasarımda her açılır liste SY.Combo ile üretiliyordu; üretimde JS'siz de
   çalışsın diye native <select> tercih edildi (il, ilçe, kategori, birim,
   sektör, vergi dairesi, şikâyet gerekçesi, paket süresi). Bu sınıfın stili
   yazılmadığı için kontroller tarayıcı varsayılanında (≈18px) kalıyordu —
   yanındaki .field input 46px. Aşağısı o boşluğu kapatır; ölçüler
   .field input ile birebir aynıdır.
   ========================================================================== */
.uyelik-select{width:100%;height:46px;border:1.5px solid var(--line);border-radius:11px;
  padding:0 38px 0 14px;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  transition:border-color .14s,box-shadow .14s;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%236B7688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.uyelik-select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,95,235,.12)}
.uyelik-select:disabled{background-color:#F5F7FA;color:var(--ink-3);cursor:not-allowed}
.field.touched.has-error .uyelik-select{border-color:#E5484D}
/* Şikâyet formu ve filtre panelinde tam genişlik istenmiyor. */
.d-report .uyelik-select{width:auto;min-width:220px}

/* --------------------------------------------------------------------------
   ÜRETİM EKİ — başlıktaki çıkış formu (.hdr-logout)
   Çıkış POST olmak zorunda olduğu için düğme bir <form> içinde; tasarımda
   (statik demo) girişli başlık hiç yoktu, bu yüzden sınıfın stili de yok.
   Stilsiz form .hdr-right'ta fazladan bir blok kutusu yaratıyor ve 320 px'te
   başlığı taşırıyordu (misafirde görünmez, YALNIZCA girişli kullanıcıda).
   display:contents ile form kutusu kalkar, düğme doğrudan flex öğesi olur —
   düzen misafir hâliyle birebir aynı olur, form gönderimi değişmez.
   -------------------------------------------------------------------------- */
.hdr-logout{display:contents}
/* .link-login tasarımda <a> içindir. Çıkış POST olmak zorunda olduğu için
   üretimde aynı sınıf bir <button>'a verildi; tarayıcının varsayılan düğme
   dolgusu/kenarlığı sınıfa dahil olmadığından öğe <a> hâlinden ~18px geniş
   çıkıyor ve 320 px'te başlığı taşırıyordu. Burada UA varsayılanları
   sıfırlanır — görünüm <a> ile birebir aynı olur. */
button.link-login{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}

/* Tasarımın §181 kuralı (@media max-width:680px → .link-login{display:none})
   dosyada DAHA SONRA gelen §621 dokunma hedefi kuralı tarafından eziliyor
   (@media max-width:980px → .link-login{display:inline-flex}). İkisi de aynı
   özgüllükte olduğu için sonuncusu kazanıyor ve metin bağlantısı telefonda
   görünmeye devam ediyordu. Misafirde bu yalnızca sıkışıklık yaratıyordu;
   girişli kullanıcıda "Çıkış" düğmesi eklenince 320 px'te yatay taşma oldu.
   Aşağısı tasarımın asıl niyetini geri getirir. Çıkış, mobilde panel
   çekmecesindeki "Çıkış yap" bağlantısından erişilebilir. */
@media(max-width:680px){
  .link-login{display:none}
}

/* ==========================================================================
   ÜRETİM EKİ — <select> üzerine kurulan SY.Combo (sabit karar #11)
   --------------------------------------------------------------------------
   combo-select.js, sunucunun render ettiği <select>'i kaynak alıp yanına
   .sb-field/.sb-trigger kurar. Kaynak select DOM'da KALIR (form POST'u ve
   asp-for bağlaması ona bağlı), yalnızca görsel olarak gizlenir — ve ancak
   kurulum başarılı olduktan sonra. JS yüklenmezse native select görünür kalır.

   .prof-combo kuralları panel.css'te zaten var ama genel sayfalar (üye ol,
   liste filtresi) panel.css yüklemiyor; aynı değerlerle buraya da kondu.
   ========================================================================== */
.combo-kaynak{display:none}
.prof-combo{width:100%}
.prof-combo .sb-trigger{width:100%;justify-content:flex-start;height:46px;border:1.5px solid var(--line);
  background:#fff;padding:0 14px;border-radius:11px}
.prof-combo .sb-trigger .chev{margin-left:auto}
.prof-combo .sb-label{flex:1;max-width:none;color:var(--ink)}
.prof-combo .combo{width:100%}
/* Sunucu doğrulaması alanı işaretlediyse tetik de kırmızı kenar alsın. */
.field.touched.has-error .prof-combo .sb-trigger{border-color:#E5484D}

/* --------------------------------------------------------------------------
   ÜRETİM EKİ — sıralama menüsü <details> ile, sonsuz kaydırma işareti
   Tasarımda .sortdd bir <div> + JS idi; menü `.sortdd.is-open` ile açılıyordu,
   yani JS yoksa sıralama tümüyle erişilemez kalırdı. Üretimde <details>/
   <summary> kullanıldı: açma/kapama tarayıcıdan gelir, klavye zaten çalışır.
   Sınıf adları tasarımla aynı, CSS öğe değil sınıf hedeflediği için görünüm
   değişmiyor; yalnızca [open] durumu eşlenir.
   -------------------------------------------------------------------------- */
.sortdd[open] .sort-menu{display:block}
.sortdd[open] .sort-btn .chev{transform:rotate(180deg)}
.sortdd > summary.sort-btn{list-style:none;cursor:pointer}
.sortdd > summary.sort-btn::-webkit-details-marker{display:none}
.sortdd > summary.sort-btn::marker{content:""}

/* Sonsuz kaydırma tetikleyicisi ve durum satırı (müşteri kararı B8). */
.sres-more{height:1px}
.sres-more-durum{margin:14px 0 0;text-align:center;font-size:13px;color:var(--ink-3)}
.sres-more-durum:empty{margin:0}

/* --------------------------------------------------------------------------
   ÜRETİM EKİ — yasal metinler sayfası (/sozlesmeler)
   Tasarımda gezinme <button> + JS, gövde de JS ile üretiliyordu (.soz-h /
   .soz-bh / .soz-p sınıflarıyla). Üretimde her belge kendi adresine sahip bir
   <a>, gövde ise yöneticinin girdiği ham HTML. Bu yüzden gövde içindeki
   başlık/paragraf/liste öğelerine kapsamlı (scoped) kural gerekiyor —
   değerler tasarımdaki .soz-bh ve .soz-p ile birebir aynıdır.
   -------------------------------------------------------------------------- */
.soz-nav .soz-link{display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-decoration:none;font-family:inherit}
.soz-taslak{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);background:var(--line-2);border-radius:999px;padding:2px 7px}
.soz-link.is-on .soz-taslak{background:#fff;color:var(--blue)}

.soz-doc > :first-child{margin-top:0}
.soz-doc h2,.soz-doc h3{margin:22px 0 7px;font-size:16px;font-weight:750;color:var(--ink)}
.soz-doc p,.soz-doc li{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#3A465C}
.soz-doc ul,.soz-doc ol{margin:0 0 10px;padding-left:20px}
.soz-doc a{color:var(--blue);text-decoration:underline}
.soz-doc table{width:100%;border-collapse:collapse;margin:0 0 14px}
.soz-doc th,.soz-doc td{border:1px solid var(--line);padding:8px 10px;font-size:13.5px;text-align:left}

/* --------------------------------------------------------------------------
   ÜRETİM EKİ — S.S.S. akordeonu <details> ile (F7b)
   Tasarımda .sss-q bir <button> + JS idi ve cevap `.sss-item.is-open` ile
   açılıyordu; JS yoksa hiçbir cevap okunamazdı. Sıralama menüsünde alınan
   kararla aynı gerekçeyle <details>/<summary> kullanıldı — sınıf adları
   tasarımla aynı, yalnızca [open] durumu eşlenir.
   Not: tasarım açık cevaba max-height:340px koyuyordu (geçiş efekti için);
   <details> göstermeyi kendisi yaptığı için sınır kaldırıldı, yoksa uzun
   cevaplar AÇIKKEN kırpılırdı.
   -------------------------------------------------------------------------- */
.sss-item > summary.sss-q{list-style:none;cursor:pointer}
.sss-item > summary.sss-q::-webkit-details-marker{display:none}
.sss-item > summary.sss-q::marker{content:""}
.sss-item[open]{box-shadow:var(--sh-md)}
.sss-item[open] .sss-chev{transform:rotate(180deg);color:var(--blue)}
.sss-item[open] .sss-a{max-height:none}

/* Blog gövdesi: yöneticinin girdiği HTML, /sozlesmeler'deki .soz-doc ile aynı
   desen — kapsamlı kural, global çıplak element seçicisi değil. */
.bd-content h2,.bd-content h3{margin:26px 0 8px;font-size:19px;font-weight:750;color:var(--ink)}
.bd-content p,.bd-content li{margin:0 0 14px;font-size:16px;line-height:1.75;color:#3A465C}
.bd-content ul,.bd-content ol{margin:0 0 14px;padding-left:22px}
.bd-content a{color:var(--blue);text-decoration:underline}
.bd-content blockquote{margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--blue);
  background:var(--blue-soft);border-radius:0 8px 8px 0}
.bd-content table{width:100%;border-collapse:collapse;margin:0 0 16px}
.bd-content th,.bd-content td{border:1px solid var(--line);padding:9px 11px;font-size:14.5px;text-align:left}

/* ============================================================
   KULLANICI METNİ — kesintisiz uzun dizge düzeni bozmasın (2026-08-18)
   ------------------------------------------------------------
   Bir firma ilan açıklamasına 400 karakterlik, hiç boşluk içermeyen tek bir
   dizge girdi ("llll…ssss…uuuu") ve ilan detayı yatay olarak taştı: sayfa
   genişliği 1280 yerine 2719 px oldu.

   `overflow-wrap:anywhere` seçildi, `word-break:break-word` değil. Fark
   kritik: yalnızca `break-word` satırı kırar ama **min-content genişliğini
   düşürmez**, dolayısıyla ızgara/esnek kutu sütunu yine metnin tam boyuna
   büyür ve taşma sürer. Taşmayı durduran `anywhere`'dir.

   Kural yalnızca KULLANICI ya da YÖNETİCİ metni taşıyan sınıflara konur;
   genele (`body`) konsaydı düğme ve menü metinleri de kelime ortasından
   kırılabilir hâle gelirdi. Yeni sınıf adı uydurulmadı.
   ============================================================ */

.rtitle,.rcat,.rcity,.rfirm-name,.tfirm-name,
.d-title,.d-cat,.d-city,.d-desc p,.d-desc li,.df-name,.df-sector,.df-meta,.df-about,
.pcard h3,.pcity,
.blog-title,.blog-ozet,.blog-body,.bd-title,.btitle,.bbody,.ss-body,
.fcat-name,.pk-name{overflow-wrap:anywhere}

/* ============================================================
   MÜŞTERİ KARARLARI (2026-08-29) — sunum düzeltmeleri
   ------------------------------------------------------------
   1) Öne çıkanlar bloğunda sarı ARKA PLAN kaldırıldı (yalnızca zemin;
      sabit karar #5 gereği blok ayrı ve etiketli kalır, ince çerçeve ve
      altın başlık durur).
   2) Filtre ağacındaki alt kategori metni soluktu (--ink-2); ana kategori
      rengine (--ink) yaklaştırıldı.
   3) Mobilde "Giriş Yap" bağlantısı geri geldi: misafirde Üye Ol'un yanında
      kısa "Giriş" olarak görünür. Tasarımın gizleme kuralı yalnızca girişli
      kullanıcıdaki Çıkış <button>'ı için korunur (320 px taşma nedeni oydu).
   ============================================================ */

.spot{background:transparent}

.fcat-sub{color:var(--ink)}

@media(max-width:680px){
  a.link-login{display:inline-flex;font-size:14px}
  /* Girişli kullanıcıda Çıkış düğmesi mobilde gizli kalır (çekmecede var). */
  button.link-login{display:none}
  a.link-login .lbl-long{display:none}
  a.link-login .lbl-short{display:inline}
}

/* ============================================================
   VKN BİLGİ BALONU — üyelik formu (2026-08-29 müşteri kararı)
   ------------------------------------------------------------
   "Vergi Kimlik No" etiketinin yanındaki bilgi ikonu; üzerine gelince
   (klavyede odaklanınca / mobilde dokununca) vergi levhası çizimiyle
   VKN'nin nerede olduğunu gösterir. Görsel müşterinin ilettiği örneğe
   göre CSS ile çizilmiştir; bit eşlem kullanılmaz.
   ============================================================ */

.vkn-tip{position:relative;display:inline-flex;vertical-align:middle;margin-left:2px}
.vkn-tip-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  padding:0;border:0;border-radius:50%;background:none;color:var(--blue);cursor:pointer}
.vkn-tip-btn:hover{background:var(--blue-soft)}
.vkn-tip-pop{position:absolute;bottom:calc(100% + 10px);left:-14px;z-index:40;width:340px;max-width:82vw;
  display:none;flex-direction:column;gap:8px;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(20,35,70,.16);
  font-weight:400;white-space:normal;text-align:left}
.vkn-tip-pop::after{content:"";position:absolute;top:100%;left:20px;border:8px solid transparent;
  border-top-color:#fff;filter:drop-shadow(0 1px 0 var(--line))}
.vkn-tip:hover .vkn-tip-pop,
.vkn-tip:focus-within .vkn-tip-pop{display:flex}
.vkn-tip-hd{font-size:14.5px;font-weight:750;color:var(--ink)}
.vkn-tip-txt{font-size:13px;line-height:1.55;color:var(--ink-2)}
.vkn-tip-txt b{color:var(--blue)}

/* vergi levhası çizimi */
.vkn-levha{display:flex;flex-direction:column;gap:8px;margin-top:4px;padding:12px;
  background:#F1F3F7;border:1px solid #C9CFD9;border-radius:8px}
.vkn-levha-gib{display:flex;align-items:center;gap:7px;align-self:flex-end;
  background:#fff;border:1px solid #C9CFD9;border-radius:4px;padding:5px 8px}
.vkn-levha-gib-ic{display:grid;place-items:center;width:26px;height:18px;border:2px solid #C22026;
  border-radius:50%;color:#C22026;font-size:10px;font-weight:800;font-style:italic}
.vkn-levha-gib-tx{font-size:9.5px;font-weight:700;line-height:1.2;color:#1D2534}
.vkn-levha-row{display:flex;align-items:stretch;gap:8px}
.vkn-levha-lbl{flex:none;width:64px;font-size:8.5px;font-weight:700;text-transform:uppercase;
  line-height:1.25;color:#1D2534;display:flex;align-items:center}
.vkn-levha-box{flex:1;min-height:26px;background:#fff;border:1px solid #C9CFD9;border-radius:3px}
.vkn-levha-box-no{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:6px 8px}
.vkn-levha-barkod{width:82%;height:14px;
  background:repeating-linear-gradient(90deg,#1D2534 0 2px,transparent 2px 4px,#1D2534 4px 5px,transparent 5px 8px)}
.vkn-levha-hane{display:inline-block;padding:2px 10px;border:2px dashed var(--blue);border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:#1D2534}

@media(max-width:680px){
  /* Dar ekranda balon ikona göre değil EKRANA göre konumlanır: ikon sola
     yakınken balon soldan taşıyordu (2026-09-19 müşteri bildirimi). Ekrana
     sabit, yatayda kenarlardan 12px içeride ve dikeyde ortalanmış açılır;
     ok işareti anlamsızlaştığı için gizlenir. Kapatma davranışı aynı:
     başka yere dokununca odak dağılır, balon kapanır. */
  .vkn-tip-pop{position:fixed;left:12px;right:12px;top:50%;bottom:auto;
    transform:translateY(-50%);width:auto;max-width:none}
  .vkn-tip-pop::after{display:none}
}

/* ============================================================
   ŞİKÂYET MODALI — ilan detayı (2026-08-29 müşteri kararı)
   ------------------------------------------------------------
   Gerekçe listesi kaldırıldı; şikâyet, serbest metinli bir modaldan
   gönderilir. Modal, panel/yönetimdeki adm-modal desenini kullanır
   (modal.js bu sınıfları bekler); ilan detayı panel.css yüklemediği
   için desenin gerekli kuralları buraya kopyalandı. Yeni sınıf adı
   uydurulmadı.
   ============================================================ */

.adm-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.adm-modal[hidden]{display:none}
.adm-modal-backdrop{position:absolute;inset:0;background:rgba(14,21,38,.5)}
.adm-modal-box{position:relative;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);
  width:min(480px,100%);padding:26px 26px 22px}
.adm-modal-x{position:absolute;top:16px;right:16px;width:34px;height:34px;border:0;background:var(--line-2);
  border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink-2)}
.adm-modal-x:hover{background:#E4E9F0}
.adm-modal-title{margin:0 0 4px;font-size:19px;font-weight:800}
.adm-modal-subnote{margin:0 0 16px;font-size:13px;color:var(--ink-3)}
.adm-modal-reason{margin-bottom:16px}
.adm-modal-reason label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.adm-modal-reason textarea{width:100%;min-height:96px;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
.adm-modal-reason textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,95,235,.13)}
.adm-modal-acts{display:flex;justify-content:flex-end;gap:10px}
.adm-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 20px;border-radius:9px;
  border:1px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:650;color:var(--ink-2);white-space:nowrap;transition:all .13s}
.adm-btn:hover{border-color:#C6D3EA;color:var(--ink)}
.adm-btn-ok{background:#12934A;border-color:#12934A;color:#fff}
.adm-btn-ok:hover{background:#0F7E3F;border-color:#0F7E3F;color:#fff}

/* ============================================================
   MÜŞTERİ KARARI (2026-09-06) — hero alt metni daha koyu
   ------------------------------------------------------------
   Metin soluk griydi (--ink-2 #6B7688); müşteri tam siyah olmayan ama
   daha koyu bir ton istedi. #3A465C paletteki mevcut gövde metni tonudur
   (.bd-content ile aynı) — yeni renk uydurulmadı.
   ============================================================ */

.hero p{color:#000000}

/* ============================================================
   NCM — "Nasıl çalışır" panel mockup'ları (2026-09-06 müşteri kararı)
   ------------------------------------------------------------
   Bölümdeki nasil-ilan-ver.png / nasil-talep-ver.png bit eşlemleri,
   müşterinin ilettiği yeni görsele göre HTML/CSS ile yeniden çizildi
   (eski PNG'ler güncel akışla ve kaldırılan "ilk 3 ilan" kuralıyla
   çelişiyordu). Salt dekoratiftir (aria-hidden); .shot çerçevesinin
   içine oturur. .ncm-t değiştiricisi talep (mor) tonunu verir.
   ============================================================ */

.ncm{--ncma:var(--blue);--ncma-soft:var(--blue-soft);
  background:#F4F6FA;border-radius:0 0 12px 12px;overflow:hidden;
  font-size:9.5px;line-height:1.35;color:var(--ink-2);text-align:left;user-select:none}
.ncm-t{--ncma:var(--purple);--ncma-soft:var(--purple-soft)}

.ncm-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;
  border-bottom:1px solid var(--line-2)}
.ncm-logo{height:16px;width:auto}
.ncm-top-sep{width:1px;height:14px;background:var(--line)}
.ncm-top-lbl{font-weight:600;color:var(--ink-2)}
.ncm-firm{margin-left:auto;display:flex;align-items:center;gap:6px;text-align:right}
.ncm-firm b{display:block;font-size:8.5px;color:var(--ink)}
.ncm-firm small{display:block;font-size:7.5px;color:var(--ink-3)}
.ncm-firm i{font-style:normal;width:18px;height:18px;border-radius:6px;background:var(--ncma);
  color:#fff;font-size:8px;font-weight:700;display:grid;place-items:center}

.ncm-grid{display:grid;grid-template-columns:86px 1fr}
.ncm-side{display:flex;flex-direction:column;gap:1px;padding:8px 6px;background:#fff;
  border-right:1px solid var(--line-2)}
.ncm-mi{display:flex;align-items:center;gap:5px;padding:4px 6px;border-radius:6px;
  font-size:8.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.ncm-mi::before{content:"";width:7px;height:7px;border-radius:3px;background:var(--line);flex:none}
.ncm-mi.is-on{background:var(--ncma-soft);color:var(--ncma);font-weight:700}
.ncm-mi.is-on::before{background:var(--ncma)}
.ncm-mh{margin:6px 6px 1px;font-size:7px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

.ncm-main{padding:10px 12px;min-width:0}
.ncm-h{display:block;font-size:12px;font-weight:800;color:var(--ink)}
.ncm-desc{display:block;margin-top:1px;font-size:8.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ncm-steps{display:flex;align-items:center;gap:5px;margin:8px 0 9px}
.ncm-st{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:600;
  color:var(--ink-3);white-space:nowrap}
.ncm-st i{font-style:normal;width:13px;height:13px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink-3);font-size:7.5px;font-weight:700;display:grid;place-items:center;flex:none}
.ncm-st.is-on{color:var(--ink)}
.ncm-st.is-on i,.ncm-st.is-done i{background:var(--ncma);border-color:var(--ncma);color:#fff}
.ncm-st.is-done{color:var(--ncma)}
.ncm-stline{flex:1;height:1px;background:var(--line);min-width:6px}

.ncm-lbl{display:block;margin:0 0 2px;font-size:8px;font-weight:700;color:var(--ink)}
.ncm-lbl b{color:#E5484D}
.ncm-input{position:relative;display:flex;align-items:center;gap:6px;margin-bottom:7px;
  padding:5px 8px;background:#fff;border:1px solid var(--line);border-radius:6px;
  font-size:8.5px;color:var(--ink);white-space:nowrap;overflow:hidden}
.ncm-input small{margin-left:auto;font-size:7.5px;color:var(--ink-3)}
.ncm-select::after{content:"";margin-left:auto;flex:none;width:5px;height:5px;
  border-right:1.2px solid var(--ink-3);border-bottom:1.2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-1px)}
.ncm-area{white-space:normal;align-items:flex-start;min-height:26px}
.ncm-row{display:flex;gap:6px}
.ncm-cell{flex:1;min-width:0}
.ncm-cell-sm{flex:0 0 34px}

.ncm-opt{flex:1;display:flex;gap:5px;align-items:flex-start;margin-bottom:7px;
  padding:6px 7px;background:#fff;border:1px solid var(--line);border-radius:7px;min-width:0}
.ncm-opt i{flex:none;width:8px;height:8px;margin-top:1px;border-radius:50%;border:1.3px solid var(--line)}
.ncm-opt b{display:block;font-size:8px;color:var(--ink)}
.ncm-opt small{display:block;font-size:7px;color:var(--ink-3);line-height:1.3}
.ncm-opt.is-on{border-color:var(--ncma);background:var(--ncma-soft)}
.ncm-opt.is-on i{border-color:var(--ncma);background:var(--ncma);box-shadow:inset 0 0 0 1.5px #fff}

.ncm-acts{display:flex;justify-content:space-between;margin-top:2px}
.ncm-btn{padding:4px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;
  font-size:8px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.ncm-btn-p{background:var(--ncma);border-color:var(--ncma);color:#fff}

.ncm-cols{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px}
.ncm-ozet{background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:7px 8px;height:fit-content}
.ncm-ozet-h{display:block;font-size:7px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.ncm-ozet-t{display:block;font-size:8px;font-weight:700;color:var(--ink);margin-bottom:3px}
.ncm-ozet-r{display:block;font-size:7.5px;color:var(--ink-2);margin-bottom:2px}
.ncm-ozet-not{display:block;margin-top:5px;padding:4px 5px;border-radius:5px;
  background:var(--ncma-soft);color:var(--ncma);font-size:7px;line-height:1.35}

@media(max-width:680px){
  /* Dar ekranda kenar menüsü ve talep özeti gizlenir; form tek sütun akar. */
  .ncm-grid{grid-template-columns:1fr}
  .ncm-side{display:none}
  .ncm-cols{grid-template-columns:1fr}
  .ncm-ozet{display:none}
}

/* .shot-body bit eşlem için 16/10 oranına sabitlenmişti; çizilen mockup
   kendi doğal yüksekliğinde akar, oran kısıtı kalkar (kırpılma olmasın). */
.shot-body:has(.ncm){aspect-ratio:auto}

/* .shot-body img{width:100%;height:100%} kuralı bit eşlem ekran görüntüsü
   içindi; mockup'ın içindeki logoyu da şişiriyordu. Daha özgül seçici kazanır. */
.shot-body .ncm-logo{width:auto;height:16px;object-fit:contain;object-position:left center}

/* ============================================================
   MÜŞTERİ KARARI (2026-09-19) — şikâyet kartı mobilde en alta
   ------------------------------------------------------------
   ≤900px'te .detay-side{order:-1} tüm sağ sütunu (özet + firma +
   şikâyet) ana içeriğin ÜSTÜNE taşıyordu; şikâyet kartı ürün
   görselinin üzerinde görünüyordu. Sütun dar ekranda display:contents
   olur: özet ve firma kartları yine üstte kalır (order:-1), yalnızca
   şikâyet kartı (.d-report) açıklamanın altına iner. Masaüstü düzeni
   değişmez (kurallar medya sorgusuyla sınırlı).
   ============================================================ */
@media(max-width:900px){
  .detay-side{display:contents}
  .detay-side>*{order:-1;min-width:0}
  .detay-side>.d-report{order:1}
}

/* ============================================================
   iOS ODAK YAKINLAŞTIRMASI ÖNLEMİ (2026-09-19)
   ------------------------------------------------------------
   iOS Safari, 16px'ten küçük puntolu bir form alanına odaklanınca
   sayfayı YAKINLAŞTIRIR ve klavye kapandıktan sonra da yakınlaşmış
   bırakır — müşterinin telefonunda panel özetinin "ekran dışına
   taşıması" bu yüzdendi (mesaj yazma alanı 14px'ti). Dokunmatik
   cihazlarda tüm form denetimleri en az 16px olur; masaüstü boyutları
   değişmez. !important bilinçli: bileşen bazlı küçük puntoların
   (.msg-compose input 14px vb.) hepsini tek kuralla aşmak için.
   Bu dosya panel/yönetim sayfalarında da yüklendiğinden kural
   üç alanı birden kapsar.
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]),
  select,textarea{font-size:16px !important}
  /* Zengin metin editörünün yazı yüzeyi (contenteditable <div>) da bir form
     alanıdır; iOS ona da odaklanınca yakınlaştırıyor (2026-10-02, ürün
     açıklaması editörü telefonda denenirken bulundu — 14,5px'ti). */
  .adm-editor-body{font-size:16px !important}
}