:root {
  
  --renk-birincil: #201e1b;   
  --renk-vurgu: #AC915B;      
  --renk-zemin: #FFFFFF;      
  --renk-metin: #201e1b;
  --font-baslik: Georgia, "Times New Roman", serif;
  --font-govde: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --olcek: 1;

  
  --renk-vurgu-metin: #7E6839; 
  --renk-kum: #F6F3EC;         
  --renk-kum-2: #EDE9DF;       
  --renk-cizgi: #E5E1D8;       
  --renk-cizgi-2: #CFC9BC;     
  --renk-cizgi-yumusak: #EDE9E0;
  --renk-ikincil: #696764;     
  --renk-soluk: #a4a3a0;       
  --renk-altin-2: #C4AE7E;     
  --renk-onay: #155E4C;        
  --renk-durum: #B4541E;       
  --renk-gece: #1b1a18;        
  --renk-whatsapp: #25D366;
  --renk-whatsapp-koyu: #128C7E;
  
  --renk-foto-metin: #FFFFFF;
  --renk-foto-soluk: #E4E0D6;

  
  --radius: 4px;
  --radius-kart: 16px;
  --radius-ic: 8px;
  --radius-pill: 100px;
  --golge-1: 0 1px 2px rgb(32 30 27 / .05);
  --golge-2: 0 6px 20px rgb(32 30 27 / .08);

  
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --kap: 1200px;
  --kap-dar: 760px;

  
  --fs-xs: 12px;   
  --fs-sm: 14px;   
  --fs-md: 16px;   
  --fs-lg: 18px;
  --fs-xl: clamp(20px, 2.2vw, 24px);      
  --fs-2xl: clamp(28px, 3.6vw, 40px);     
  --fs-3xl: clamp(28px, 3.6vw, 40px);
  --fs-hero: clamp(34px, 5.2vw, 56px);    
  --fs-sayi: clamp(34px, 4.4vw, 44px);    
  --fs-fiyat-detay: clamp(30px, 3.4vw, 36px);

  
  --fv-display: "SOFT" 0, "WONK" 0, "opsz" 40;
  --ag-display: 500;

  
  --sure: 200ms;
  --egri: cubic-bezier(0.22, 1, 0.36, 1);
}




:root {
  
  --renk-birincil: #272522;
  --renk-vurgu: #f0c251;
  --renk-zemin: #FAF9F7;          
  --renk-metin: #312f2b;
  --font-baslik: Georgia, "Times New Roman", serif;   
  --font-govde: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  
  --renk-vurgu-metin: #7d5e12;
  --renk-kum: #F2F0EA;            
  --renk-kum-2: #EAE7DF;
  --renk-cizgi: #E3DED4;
  --renk-cizgi-2: #CFC7B8;
  --renk-cizgi-yumusak: #EDEAE2;
  --renk-ikincil: #6c6964;
  --renk-soluk: #9b9994;
  --renk-altin-2: #f0c251;
  --renk-onay: #0F6B52;
  --renk-durum: #dda92a;
  --renk-gece: #21201d;
  --renk-foto-metin: #FFFFFF;
  --renk-foto-soluk: #e1e0de;

  --radius: 0px;
  --radius-kart: 2px;             
  --radius-ic: 2px;
  --golge-1: 0 1px 2px rgb(33 32 29 / .05);
  --golge-2: 0 14px 40px rgb(33 32 29 / .13);
}


html .ust { background: var(--renk-gece); border-bottom: 1px solid rgb(255 255 255 / .09); }
html .ust .marka__ad { color: #FFFFFF; }
html .ust .marka__alt { color: #aaa8a4; }
html .ust nav a, html .ust__ic nav a { color: #e4e3e2; }
html .ust nav a:hover { color: #FFFFFF; }
html .ust .dugme--anahat { border-color: rgb(255 255 255 / .28); color: #FFFFFF; }


html .hero__perde {
  background:
    linear-gradient(to top, rgb(22 21 18 / .90) 0%, rgb(22 21 18 / .58) 46%, rgb(22 21 18 / .10) 82%),
    linear-gradient(to right, rgb(22 21 18 / .74) 0%, rgb(22 21 18 / .22) 56%, rgb(22 21 18 / 0) 82%);
}
html .hero__baslik { letter-spacing: -0.015em; line-height: .98; max-width: 17ch; }
html .hero__alt { color: #d4d2cf; }
html .hero__goz { color: #7d5e12; letter-spacing: .22em; }


html .goz, html .hero__goz { position: relative; padding-left: 26px; }
html .goz::before, html .hero__goz::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 16px; height: 3px; background: var(--renk-vurgu);
  transform: translateY(-50%) skewX(-24deg);   
}


html .bolum-bas h2 { letter-spacing: -0.015em; line-height: 1.08; }
html .bolum-bas { margin-bottom: var(--sp-7); }


html .kart { border: 1px solid var(--renk-cizgi); box-shadow: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
html .kart:hover { border-color: var(--renk-cizgi-2); transform: translateY(-3px); box-shadow: var(--golge-2); }
html .kart-kapak { clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }


html .ofis-kunye { background: var(--renk-gece); color: #fff; padding: var(--sp-5) var(--sp-6); }
html .ofis-kunye__satir { border-bottom: 1px solid rgb(255 255 255 / .12); }
html .ofis-kunye__satir:last-child { border-bottom: 0; }
html .ofis-kunye__et { color: #aaa8a4; letter-spacing: .16em; text-transform: uppercase; }
html .ofis-kunye__d { color: #fff; font-family: var(--font-baslik); }
html .ofis-kunye__birim { color: #aaa8a4; }


html .dugme { border-radius: 2px; letter-spacing: .01em; }
html .dugme--altin { background: var(--renk-vurgu); color: #fff; border-color: var(--renk-vurgu); }
html .dugme--altin:hover { background: var(--renk-vurgu-metin); border-color: var(--renk-vurgu-metin); }


html .alt { background: var(--renk-gece); }


html .hero__foto { filter: saturate(.90) contrast(1.06) brightness(.93); }


@media (min-width: 900px) {
  html .kunye-bandi { position: relative; z-index: 5; margin-top: -104px; padding-top: 0; }
  html .kunye-bandi .goz, html .kunye-bandi .bolum-goz { display: none; }
  html .kunye-bandi .ofis-kunye { box-shadow: 0 26px 64px rgb(22 21 18 / .38); }
}




html .kap--yazi { max-width: var(--kap); }
html .kap--yazi > .hk-giris,
html .kap--yazi > .aciklama p,
html .kap--yazi > .hk-davet,
html .kap--yazi .bolum-bas__alt,
html .kap--yazi > p { max-width: 62ch; }
html .kap--yazi .sss { max-width: 860px; }
html .kap--yazi .hk-bas { max-width: 24ch; }


html .bolum { padding: clamp(56px, 6vw, 96px) 0; }
html .bolum-bas { margin-bottom: clamp(28px, 3vw, 44px); }
html .hk-bas { margin-bottom: var(--sp-3); }


html .hero__adres {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid rgb(255 255 255 / .20);
  max-width: 52ch; color: #ebeae8; font-size: var(--fs-sm); line-height: 1.6;
  letter-spacing: .01em;
}
html .hero__saat {
  margin-top: 4px; color: #b8b6b1; font-size: var(--fs-sm); line-height: 1.6;
}

@media (min-width: 900px) {
  html .hero__ic { padding-bottom: calc(var(--sp-7) + 116px); }
}

@media (max-width: 899px) {
  html .hero__ic { padding-bottom: calc(var(--sp-7) + 72px); }
}


html .ofis-kunye__d { display: flex; align-items: baseline; gap: 7px; }
html .ofis-kunye__birim { font-family: var(--font-govde); font-size: var(--fs-xs);
  letter-spacing: .10em; text-transform: uppercase; }


html .kunye-bandi .ofis-kunye__yetki {
  margin: 0; padding: var(--sp-4) var(--sp-6);
  background: rgb(33 32 29 / .055);
  border-left: 3px solid var(--renk-vurgu);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--renk-ikincil);
}
@media (min-width: 900px) { html .kunye-bandi .ofis-kunye__yetki { margin-top: var(--sp-5); } }


html .hizmet-izgara--bes { justify-content: flex-start; }
html .hizmet-izgara--bes > * { margin-inline: 0; }
@media (min-width: 1000px) {
  html .hizmet-izgara--bes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); }
  html .hizmet-izgara--bes > :nth-child(-n+3) { grid-column: span 2; }
  html .hizmet-izgara--bes > :nth-child(n+4) { grid-column: span 3; }
}
html .hizmet-kart { padding: var(--sp-6); background: #fff; }
html .hizmet-kart h3 { margin-top: var(--sp-4); }
html .hizmet-kart__ikon { color: var(--renk-vurgu); }


html .mahalle-bolum { background: var(--renk-gece); color: #fff; }
html .mahalle-bolum > img { opacity: .5; }
html .mahalle-bolum .goz { color: #7d5e12; }
html .mahalle-bolum h2 { color: #fff; }
html .mahalle-bolum .bolum-bas p, html .mahalle-bolum__ic > .bolum-bas p { color: #c4c3bf; }
html .mahalle-dizin__ad { color: #fff; }
html .mahalle-dizin__adet { color: #acaaa5; }
html .mahalle-dizin__cizgi { border-bottom-color: rgb(255 255 255 / .16); background-image: none; }
html .mahalle-dizin a { border-bottom: 1px solid rgb(255 255 255 / .10); }
html .mahalle-dizin a:hover .mahalle-dizin__ad { color: var(--renk-altin-2); }

@media (min-width: 1000px) {
  html .mahalle-dizin {
    grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 72px);
    max-width: none;
  }
  html .mahalle-dizin li:nth-child(2) a { border-top: 1px solid rgb(255 255 255 / .10); }
}


@media (min-width: 1000px) {
  html .kisiler { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
}
html .kisi__foto { margin: 0 0 var(--sp-4); overflow: hidden; }
html .kisi__foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
html .kisi__ad { font-size: clamp(19px, 1.6vw, 23px); }
html .kisi__unvan { color: var(--renk-vurgu-metin); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; }
html .kisi__tanit { color: var(--renk-ikincil); }
html .kisi__cta { gap: var(--sp-2); flex-wrap: wrap; }


html .rozet--satilik { background: var(--renk-gece); color: #fff; }
html .rozet--kiralik { background: var(--renk-vurgu); color: #fff; }
html .rozet { letter-spacing: .10em; }


html .bolum:has(> .kap > .galeri[data-galeri="ofis"]) { display: none; }


html .kisi { display: flex; flex-direction: column; }
html .kisi__cta { margin-top: auto; padding-top: var(--sp-4); }


html .bolum .kap--yazi > .yan { max-width: none; }
html .bolum .kap--yazi > .yan > h2 { font-family: var(--font-baslik);
  font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.015em; }
html .bolum .kap--yazi > .yan > p { max-width: 52ch; color: var(--renk-ikincil); }
html .form { max-width: 620px; margin-inline: 0; }
html .form__alan label { letter-spacing: .12em; }
@media (min-width: 1000px) {
  html .bolum .kap--yazi > .yan {
    display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 620px);
    column-gap: clamp(40px, 5vw, 90px); align-items: start;
  }
  html .bolum .kap--yazi > .yan > h2 { grid-column: 1; margin-top: 0; }
  html .bolum .kap--yazi > .yan > p { grid-column: 1; }
  html .bolum .kap--yazi > .yan > .form,
  html .bolum .kap--yazi > .yan > form { grid-column: 2; grid-row: 1 / span 4; }
}


html .ofis__foto img { aspect-ratio: 3 / 2; object-fit: cover; }
html .ofis__kareler--esli { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 859px) { html .ofis__kareler--esli { grid-template-columns: 1fr; } }


html .ilan-kart__fiyat { letter-spacing: -.01em; }
html .son-bant { background: var(--renk-gece); }
html .son-bant h2 { max-width: 26ch; }
html a:focus-visible, html button:focus-visible { outline: 2px solid var(--renk-vurgu); outline-offset: 2px; }