/* =====================================================================
   RESWONS EMLAK — TANITIM SAYFASI (apex: reswonsemlak.com)

   Yön: "Tabela ve ilan föyü". Sayfa, emlakçının her gün elinden geçen şeylerin
   dilini konuşur: dar kalın tabela harfleri, ilan föyü tablosu, gerçek bir ilanın
   panelden Instagram'a yolu. Önceki sürüm (serif + eğik vurgu + ikon ızgarası +
   sahte tarayıcı çerçevesi) "yapay zekâ şablonu" gibi okunduğu için bırakıldı.
   Yön, iki bağımsız tasarım incelemesi (eleştiri + sanat yönü) birleştirilerek seçildi.

   Kendi başına yüklenir, site.css YÜKLENMEZ (vitrinin global kuralları bu sayfayı bozmasın).
   Kırmızı yalnız eylem ve işaretlerde — sayfanın küçük bir kısmı. Kontrast (AA 4.5:1):
   mürekkep/kâğıt 16.5 · soluk/kâğıt 6.4 · kırmızı/kâğıt 6.3 · beyaz/kırmızı 7.0 · #B9BBBF/mürekkep 9.1
   ===================================================================== */
:root{
  --kagit:#F5F4F0;
  --yuzey:#FFFFFF;
  --murekkep:#15171A;
  --soluk:#55595F;
  --cizgi:#D9D7D0;
  --kirmizi:#B3121C;
  --kirmizi-koyu:#8E0E16;
  --kirmizi-acik:#FF6B5E;
  --koyu-metin:#B9BBBF;

  --baslik:'Archivo','Arial Narrow',Arial,sans-serif;
  --metin:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  --yan:clamp(20px,5vw,64px);
  /* Genis ekranda icerik ortada dar bir serit gibi kalmasin: kapsayici ekranla
     birlikte buyur, cok genis ekranda okunurluk icin 1800px'te durur.
     max(1280px,...) sayesinde dizustu genisliklerinde ESKISINDEN DAR OLMAZ. */
  --genislik:min(1800px, max(1280px, 88vw));
  --bolum:clamp(64px,9vw,128px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kagit);color:var(--murekkep);font:400 17px/1.6 var(--metin);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--kirmizi);outline-offset:3px}
.vitrin :focus-visible,.son :focus-visible,.alt :focus-visible{outline-color:var(--kirmizi-acik)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

.kap{max-width:var(--genislik);margin:0 auto;padding:0 var(--yan)}
.atla{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;background:var(--murekkep);color:var(--kagit);text-decoration:none}
.atla:focus{left:8px}

/* Tabela harfi: dar, kalın, büyük harf (html lang="tr" → i/İ doğru büyür) */
/* Satır aralığı 1: .92'de Türkçe büyük harflerin İ noktası ile Ç/Ş çengeli komşu satıra değiyordu (1440 px'te ölçüldü) */
.tabela{font-family:var(--baslik);font-stretch:75%;font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.005em;word-spacing:.08em}
.etiket{font-family:var(--mono);font-weight:500;font-size:12.5px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}

/* ---------------- ÜST ---------------- */
.ust{position:sticky;top:0;z-index:40;background:var(--kagit);border-bottom:2px solid var(--murekkep)}
.ust-ic{display:flex;align-items:center;gap:20px;min-height:64px}
.marka{display:flex;align-items:baseline;gap:10px;text-decoration:none}

/* Baslikta logo — yazi markanin yerine. Yukseklikle sinirlanir ki
   yanindaki "Emlak · Isparta" etiketiyle ayni satirda hizali dursun. */
.marka{align-items:center}
.marka-logo{height:34px;width:auto;display:block;object-fit:contain}
@media (max-width:600px){.marka-logo{height:28px}}
.marka b{font-family:var(--baslik);font-stretch:75%;font-weight:800;font-size:27px;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.marka span{color:var(--soluk)}
.ust-link{margin-left:auto;padding:10px 0;font-weight:600;font-size:15px;text-underline-offset:5px;text-decoration-thickness:2px}
.ust-link:hover{color:var(--kirmizi)}
@media (max-width:600px){
  .ust-link{display:none}
  .ust .dugme{margin-left:auto}
  .marka{flex-direction:column;align-items:flex-start;gap:3px}
  .marka-logo{height:28px}
.marka b{font-size:22px}
}

/* ---------------- DÜĞMELER ---------------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;
  border:2px solid var(--murekkep);border-radius:3px;font:600 16px/1.2 var(--metin);text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.dugme svg{width:19px;height:19px;flex:0 0 auto}
.dugme-kirmizi{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.dugme-kirmizi:hover{background:var(--kirmizi-koyu);border-color:var(--kirmizi-koyu)}
.dugme-cizgi{background:transparent;color:var(--murekkep)}
.dugme-cizgi:hover{background:var(--murekkep);color:var(--kagit)}
.dugme-kucuk{min-height:44px;padding:8px 16px;font-size:15px}

/* ---------------- HERO ---------------- */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(56px,8vw,112px)}
.hero-ic{display:grid;gap:clamp(40px,6vw,64px);align-items:end}
@media (min-width:980px){.hero-ic{grid-template-columns:minmax(0,1fr) 300px}}
.hero .etiket{color:var(--soluk)}
.hero .ust-etiket{color:var(--kirmizi)}
.hero h1{margin-top:18px;font-size:clamp(54px,9.4vw,136px);max-width:10.5ch}
.hero-metin{margin-top:28px;max-width:33em;font-size:clamp(17px,1.5vw,20px);color:var(--soluk)}
.eylem{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}
.not{margin-top:18px;color:var(--soluk);font-size:14px}
.hero-telefon{justify-self:center;width:min(78vw,300px)}
.hero-telefon img{border:2px solid var(--murekkep);border-radius:24px}
.hero-telefon figcaption{margin-top:12px;text-align:center;color:var(--soluk)}

/* ---------------- ORTAK BÖLÜM BAŞI ---------------- */
.bolum-bas{max-width:780px;margin-bottom:clamp(32px,4.5vw,56px)}
.bolum-bas h2{font-size:clamp(40px,6vw,84px)}
.bolum-bas p{margin-top:18px;max-width:36em;font-size:18px;color:var(--soluk)}

/* ---------------- VİTRİN (işaretli ekran görüntüsü) ---------------- */
.vitrin{padding:var(--bolum) 0;background:var(--murekkep);color:var(--kagit)}
.vitrin .bolum-bas p{color:var(--koyu-metin)}
.isaretli-ic{position:relative}
/* Dar ekranda 1280px görüntü ~350px'e iniyor ve içindeki yazı okunmuyordu: 680px genişlikte yatay kaydırılır */
@media (max-width:759px){
  .isaretli{overflow-x:auto;margin:0 calc(var(--yan) * -1);padding:0 var(--yan) 12px}
  .isaretli-ic{width:680px}
}
.isaretli img{width:100%;border:2px solid #3A3D42;border-radius:6px}
.isaret{position:absolute;display:grid;place-items:center;width:clamp(24px,2.6vw,36px);height:clamp(24px,2.6vw,36px);
  transform:translate(-50%,-50%);border-radius:50%;background:var(--kirmizi);color:#fff;
  font:600 clamp(12px,1.1vw,15px)/1 var(--mono);box-shadow:0 0 0 clamp(3px,.4vw,5px) rgba(179,18,28,.35)}
.isaret-1{left:12%;top:16%}  /* ofis adının ÜSTÜ (boş gökyüzü) — yazının üstüne binmesin */
.isaret-2{left:72%;top:38%}
.isaret-3{left:6.5%;top:81%}
.isaret-4{left:90.5%;top:94%}
.lejant{display:grid;gap:22px;margin-top:32px}
@media (min-width:760px){.lejant{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lejant li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.lejant .no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--kirmizi);color:#fff;font:600 13px/1 var(--mono)}
.lejant strong{display:block;font-weight:600;font-size:17px;line-height:1.3}
.lejant span{display:block;margin-top:4px;font-size:15px;color:var(--koyu-metin)}

/* ---------------- BİR İLANIN YOLU ---------------- */
.yol{padding:var(--bolum) 0}
.yol .bolum-bas .etiket{display:block;margin-top:14px;color:var(--kirmizi)}
.yol-liste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,70vw);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--yan) 14px;margin:0 calc(var(--yan) * -1)}
@media (min-width:900px){
  .yol-liste{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:0;margin:0}
}
.yol-liste{scroll-padding-inline:var(--yan)}
.yol-liste li{scroll-snap-align:start}
.yol-gorsel{aspect-ratio:9/16;overflow:hidden;border:2px solid var(--murekkep);border-radius:16px;background:var(--yuzey)}
.yol-gorsel img{width:100%;height:100%;object-fit:cover;object-position:top}
.yol-liste .etiket{display:block;margin-top:16px;color:var(--kirmizi)}
.yol-liste h3{margin-top:6px;font-size:clamp(24px,2.2vw,30px)}
.yol-liste p{margin-top:8px;font-size:16px;color:var(--soluk)}

/* ---------------- İLAN FÖYÜ (imza öğesi) ---------------- */
.foy{padding:0 0 var(--bolum)}
.foy-kagit{background:var(--yuzey);border:2px solid var(--murekkep)}
.foy-ust{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;
  padding:18px clamp(18px,3vw,32px);border-bottom:2px solid var(--murekkep)}
.foy-ust h2{font-size:clamp(34px,4.6vw,60px)}
.foy-ust .etiket{color:var(--soluk)}
.foy-govde{display:grid}
@media (min-width:900px){
  .foy-govde{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foy-kolon + .foy-kolon{border-left:2px solid var(--murekkep)}
}
@media (max-width:899px){.foy-kolon + .foy-kolon{border-top:2px solid var(--murekkep)}}
.foy-kolon{padding:clamp(18px,3vw,32px)}
.foy-kolon h3{font-size:26px;margin-bottom:10px}
.foy-satir{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--cizgi)}
.foy-satir:last-child{border-bottom:0}
.foy-satir dt{display:flex;flex:1 1 auto;align-items:baseline;gap:10px;min-width:0;font-weight:500}
.foy-satir dt::after{content:"";flex:1 1 24px;min-width:18px;border-bottom:2px dotted #A5A7AB;transform:translateY(-5px)}
.foy-satir dd{flex:0 1 auto;max-width:58%;text-align:right;font-size:15px;line-height:1.45}
.foy-satir dd.deger{font-family:var(--mono);font-size:14px}
@media (max-width:560px){
  .foy-satir{display:block}
  .foy-satir dt::after{display:none}
  .foy-satir dd{max-width:none;margin-top:2px;text-align:left}
}
.foy-fiyat{display:flex;align-items:baseline;gap:10px;padding:18px clamp(18px,3vw,32px);border-top:2px solid var(--murekkep)}
.foy-fiyat dt{display:flex;flex:1 1 auto;align-items:baseline;gap:10px;font-family:var(--baslik);font-stretch:75%;font-weight:800;font-size:24px;text-transform:uppercase}
.foy-fiyat dt::after{content:"";flex:1 1 24px;border-bottom:2px dotted #A5A7AB;transform:translateY(-6px)}
.foy-fiyat dd a{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--kirmizi);text-underline-offset:4px}

/* ---------------- SIK SORULANLAR (açık) ---------------- */
.sss{padding:var(--bolum) 0;border-top:2px solid var(--murekkep)}
.sss-liste{display:grid;gap:36px 64px}
@media (min-width:900px){.sss-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sss-liste h3{font-family:var(--metin);font-weight:600;font-size:20px;line-height:1.3}
.sss-liste p{margin-top:8px;color:var(--soluk)}

/* ---------------- SON ---------------- */
.son{padding:var(--bolum) 0;background:var(--murekkep);color:var(--kagit)}
.son h2{font-size:clamp(56px,10vw,148px)}
.son-tel{display:inline-block;margin-top:28px;padding-bottom:4px;border-bottom:3px solid var(--kirmizi-acik);
  font:500 clamp(26px,3.6vw,44px)/1.1 var(--mono);color:var(--kagit);text-decoration:none}
.son-tel:hover{color:var(--kirmizi-acik)}
.son .dugme-cizgi{border-color:var(--kagit);color:var(--kagit)}
.son .dugme-cizgi:hover{background:var(--kagit);color:var(--murekkep)}
.son-alt{margin-top:26px;color:var(--koyu-metin)}

.alt{padding:22px 0;background:var(--murekkep);color:var(--koyu-metin);border-top:1px solid #33363B}
.alt-ic{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.alt nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.alt a{padding:6px 0;color:var(--kagit);text-decoration:none}
.alt a:hover{color:var(--kirmizi-acik)}

/* ---------------- ÖN İZLEME: ofisinizin adıyla ---------------- */
.gorsel-gizli{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.onizle{margin-top:28px;padding:16px;border:2px solid var(--murekkep);background:var(--yuzey);max-width:640px}
.onizle .etiket{display:block;margin-bottom:10px;color:var(--kirmizi)}
.onizle-satir{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.onizle input[type=text]{flex:1 1 200px;min-height:44px;padding:8px 12px;border:1px solid var(--cizgi);border-radius:0;font:inherit;font-size:16px;color:var(--murekkep);background:var(--kagit)}
.onizle input[type=text]:focus{outline:2px solid var(--murekkep);outline-offset:1px}
.onizle-renk{display:flex;gap:8px}
.onizle-renk label{position:relative;cursor:pointer}
.onizle-renk input{position:absolute;opacity:0}
.onizle-renk span{display:block;width:30px;height:30px;border-radius:50%;border:2px solid var(--yuzey);box-shadow:0 0 0 1px var(--cizgi)}
.onizle-renk input:checked+span{box-shadow:0 0 0 2px var(--murekkep)}
.onizle-renk input:focus-visible+span{outline:2px solid var(--kirmizi);outline-offset:3px}
.r-17332a{background:#17332A}.r-1d3b6f{background:#1D3B6F}.r-6b1e2e{background:#6B1E2E}.r-2b2b2b{background:#2B2B2B}

/* ---------------- EMLAKÇININ BİR GÜNÜ ---------------- */
.gun{border-top:2px solid var(--murekkep)}
.gun .bolum-bas p{margin-top:12px;color:var(--soluk);max-width:56ch}

/* Föy: üçüncü kolon (kurulum ve destek) iki kolonun altında tam genişlik */
@media (min-width:900px){
  .foy-kolon:nth-child(3){grid-column:1/-1;border-left:0!important;border-top:2px solid var(--murekkep)}
  .foy-kolon:nth-child(3) dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,3vw,32px)}
  .foy-kolon:nth-child(3) .foy-satir:nth-last-child(2){border-bottom:0}
}